simiancraft / create-phaser-app Goto Github PK
View Code? Open in Web Editor NEWPhaser 3, Webpack 4, Babel 7+boilerplate and a scaffold
Home Page: https://simiancraft.github.io/create-phaser-app/
License: Other
Phaser 3, Webpack 4, Babel 7+boilerplate and a scaffold
Home Page: https://simiancraft.github.io/create-phaser-app/
License: Other
Really, this is me seeking support with webpack/modular web applications and not so much specifically an issue with this repo so apologies in advance, but it is (I think) slightly related or at very least highlighting an area for documentation for the less-well initiated ๐.
When loading an image, e.g. the flares atlas, you're importing the asset via:
import flaresJSON from '../../assets/particles/flares.json';
import flaresPNG from '../../assets/particles/flares.png';
Then loading it as normal in phaser, only referencing the imported objects instead of relative file paths:
this.scene.load.atlas('flares', flaresPNG, flaresJSON);
I'm assuming this affords some value from having it in the webpack pipeline so optimisation, file organising or such like can be performed on the images.
I'm currently facing a workflow issue with this as in my case, the atlas png file can't be written to whilst I'm running the dev server and so have to stop and restart the site every time I tweak an image in an atlas. Changing it to load the relative static file path instead doesn't serve the file as seemingly the above pipes a blob with a hashed filename straight into the webpack server.
So, getting to an actual question(s):
1 - what is the value in having the image imported as an object vs served as a traditional static asset
2 - how can I configure webpack to serve static assets or can this be made non-locking so changes to the file are possible whilst webpack is running?
Can I add a new step 2 such as, type into your console cd create-phaser-app
Depends on #4
Depends on #3
also research other plugins you will certainly use (decorators)
I don't know if I'm doing something wrong but BrowserSync gets disconnected as soon as the page loads. In the Firefox console, just below the Phaser version (first line of console), I see the "[WDS] Disconnected!" message.
I knew something was up when I saved my changes and the browser didn't auto refresh.
I have limited experience with gamedev, but it seems to me integrating a test framework might be worth it, at least for testing ui (especially with React #18).
Jest seems to me like the most obvious option, seeing its quality and level of support.
If you think it's useful, I can open a PR that adds Jest integration (if #26 is validated, I can make tests run precommit as well).
At the moment, the demo game is a platformer, a game that uses 2D physics with a player controlled entity that moves around. This may not be helpful to someone who wants to make a strategy game, or a management game, or a card game, ...
So I was wondering, what are the plans (if any) to support different game type demos in the phaser app? I can imagine maybe a RTS, a management game, a Zelda-like isometric one...
From a usability standpoint, I imagine there could be several scenes with different demos available. But if you plan on doing such a thing with create-phaser-app, I'm wondering how to structure the app so that someone can easily identify the parts they need for their type of game and discard the rest, while keeping the opinionated file structure that makes getting right into development easily.
One of the plans for this repo is to make a webapp that runs parallel to the webpack browsersync server, that allows you to do some basic tasks, and assist in development. This will depends on a fairly conventional file structure, or some configuration in the tool. I plan on this project being managed as a sub-project with lerna.
The purpose of this issue is to capture ideas for this tool. and discuss them by difficulty before taking them
Some rudimentary ideas are
Some advanced ideas:
the focus on here is to integrate good pipelines with as many free things as possible.
@vantreeseba , add to this if you think of stuff
short version:
the command is yarn process-levels
You put your assets in the levels/raw folder. You also put your level.tmx here alongside the tilemap
The processor outputs into the 'processed' folder and it fixes the level.json and the image to work
let template = `
${_importsString};
import {Howl, Howler} from 'howler';
const soundsConfig = ${_json};
const sounds = new Howl(soundsConfig)
export default sounds;
export { Howl, Howler, sounds, soundsConfig };
`;
reverseCurrent() {
return new Promise((resolve, reject) => {
this.entity.anims.reverse();
this.entity.once(
'animationcomplete',
(animation, frame) => {
resolve(name);
},
this.entity
);
});
}
drop this method in on the next update, it is easy-mode for reversing the animation where it currently is.
@DannyT opened a PR here: #55 which wile wasn't pulled in, made me think a bout a few things
slush-phaser-webpack
, most likely with the output mockingYou have to extrude tilemaps for webgl : phaserjs/phaser#3766 (comment)
Use React for menus and overlays. This is fully aware there are limitations to this sort of UI, such as the inability to pur UI behind the canvas, but its great for menus and things like that. Many game can make ui faster with this approach.
Semantic ui as the standard library see https://react.semantic-ui.com/introduction
also the core tool used for create-phsaer-jetpack
#17
easier google fonts integration
react Vis for visualizations https://uber.github.io/react-vis/documentation/welcome-to-react-vis
create-phaser-app
related to #48
One of the goals is to consolidate free tools, a good example is dragonbones: DragonBones/DragonBonesJS#66
They are actively working on Phaser 3 integration
other examples are Creature, Spine and Spriter.
Edit: I hadn't seen prettier was already on, I'll make a PR with husky in case you want this formatting to happen automatically pre-commit
I really like this project, the only thing that is missing for me is typescript template.
this will be in PR #47 along with the additional level tooling
Possible places to look:
https://adamatomic.itch.io/
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.