Giter Club home page Giter Club logo

phaser4's Introduction

Phaser 4

Needless to say, don't use this yet.

Contributor Guide

  1. Checkout the Phaser 4 repo.
  2. npm i.
  3. The packages folder contains all of the Phaser 4 modules.
  4. The bundles folder contains all of the Phaser 4 bundles.

To create a new module

  1. Go into the scripts/ folder and copy the _template folder.
  2. Paste it into the packages/ folder.
  3. Rename the _template folder it to whatever the module is called, i.e. geom-line.
  4. Inside the new folder, edit the package.json file.
  5. Replace the "name" property with the module name, i.e. "@phaserjs/geom-line".
  6. Change the "description" property to be the Phaser namespace for the module, i.e. "Phaser.Geom.Line".
  7. Save package.json.

Now, edit the TypeScript source in the src folder, making sure to properly export the module.

Once you're ready to publish:

  1. First, commit your changes to git, as you can't publish with uncommited changes.
  2. Run lerna-wizard.
  3. Pick publish from the menu and answer N to custom publishing and info for the log level.
  4. It will detect your new package and ask for a version increment. Select Patch (0.0.1).
  5. Confirm your choices and publish. It should then send it all off to npm and you're done.

To update a module

  1. Edit the TypeScript code to make the changes required.
  2. First, commit your changes to git, as you can't publish with uncommited changes.
  3. Run lerna-wizard.
  4. Pick publish from the menu and answer N to custom publishing and info for the log level.
  5. It will detect your new package and ask for a version increment. Select Patch (0.0.1).
  6. Confirm your choices and publish. It should then send it all off to npm and you're done.

To build a module

  1. Change into the package directory, i.e. cd packages/geom-line.
  2. Run npm run build.
  3. TypeScript will do its thing. If there are errors in the source, fix them.
  4. If the build completes, the files will be in the dist folder.
  5. Commit the build files and publish then to npm via the lerna-wizard -> publish option.

Creating package tests

First, to aid in testing, link the packages together:

  1. In the package folder in the Phaser 4 repo, i.e. packages/geom-line and run the command npm link.
  2. In the Phaser 4 Dev repo, add the package you've just created, i.e. npm i @phaserjs/geom-line.
  3. Now link them together: npm link @phaserjs/geom-line.
  4. It should create a symlink between phaser4-dev and the roaming node_modules package.
  5. This means you can write a test in Phaser 4 Dev and edit the package source inside of Phaser 4 without needing to publish every time.

When you've finished an edit, just build the package as usual with npm run build, and npm link will see the changes automatically.

To create a test for a module

Do the following in the Phaser 4 Dev Repo (not this repo)

  1. Run the command npm run create. This will create a brand new folder in which you can build a test. The folder name will automatically increment from the previous one, i.e. 009, 010, etc. If you want a specific folder name, use the command npm run create -- -f folderName instead.
  2. Edit the test file, i.e. if the folder it created was called 009 then edit test009.ts:
import { Angle, Line } from '@phaserjs/geom-line';

const test: Line = new Line(0, 100, 400, 50);

console.log(Angle(test));
  1. Build the test with npm run build. It will create the build file in the test folder.
  2. Open the test in a browser, i.e. localhost/phaser4-dev/src/009/ and the test will load.
  3. If you want to do lots of edits, use npm run watch and it'll rebuild the test on each save.
  4. If you want to test for errors, use npm run test.
  5. If you want to check to see which modules the test depends on, use npm run trace for a full trace resolution.

To check for outdated packages

This repo uses https://www.npmjs.com/package/npm-check-updates - which you can run from the cli via ncu.

Also, use lerna-wizard to check for out-dated packages across sub-packages.

phaser4's People

Contributors

photonstorm avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.