Search the Community

Phaser 3 BOILERPLATES | STARTERS Unify, upgrade, use. Last updated: March 6 Table of contents: 1. Intro 2. create-phaser-app 3. List of existing boilerplates 4. What kind of features we need/want 5. What's the point Intro: Hello there everyone! As Phaser 3 came out I immediately started to look after some Boilerplate which would take care of basic stuff and speed up the development. If you don't know what I am talking about, think of create-react-app, but for Phaser. There are a few already, however I think that is one of the things that shouldn't be re-created every time, but I'd rather see one, powerful, generator that is community driven, updated, and has many options. Richard has mentioned that he prefers this to be created by community, and just highlighted on the Phaser website. I am aware that sometimes you need something really different and boilerplate X won't suit your needs, but that's where configuration comes in (for example question at the beginning which physics you want to use). Unless even that can help you - get a different boilerplate/create new one. I want to help and in my opinion boilerplates are great way to unify the community, show out the best practices and speed up the development. Let me know what do you think about it. create-phaser-app: So currently I am developing this generator, which follows the convention of create-X-app. It will be configurable with --options, or by default running a "wizard" where you select basic options. At the start there will be only plain JS and typescript probably, but later on I'm planning to add things like multiple examples (ping-pong, platformer, etc) and many other stuff, but also some --basic flag where you get 0 configuration small project without any webpacks or anything! https://github.com/phaser-contrib/create-phaser-app Here's the repo. Project will be open up for contributions after I prepare the base. Hopefully after everything's prepared community will be able to focus this one and stop creating new ones, unless they really need to. Existing boilerplates list: https://github.com/oliverbenns/phaser-starter - https://github.com/rblopes/generator-phaser-plus - by @rblopes https://github.com/lean/phaser-es6-webpack/tree/phaser3 - (phaser 3 on different branch, i think it's still in development for p3) by @leandro Boilerplates/examples (things that fall in into example category, but still can be a good foundation) https://github.com/nkholski/phaser3-es6-webpack - generic platformer template (mario in this case) and it's based on phaser-es6-webpack by @nkholski I'll keep the list updated, you can give links in the comments too! Features: What should the perfect boilerplate have Recognizable name ES6 transpilation with babel ES6, CoffeeScript or TypeScript Webpack, along with live and hot reload Environment variables Continuous delivery and continuous deployment Images compress JS minify Standard folder structure with basic scenes like preload screen, game Config file for game configuration with all possible options Maybe something that will make sprite bundles ES lint configuration? (not quite sure as many people have different ways of writing code, however maybe just a small base for further configuration?) CLI commands (like create new object) Popular building integrations (Cordova, Cocoon etc) at least on some level Easy way to update Phaser Configurable at the start: Provide bigger example? or just standard template (for example do you want only one example asset, or whole game generated) Physics selection List of some basic useful plugins? That's all coming to my mind for now, leave the comments what would you like to see in a boilerplate! The point?: I know this may be not immediately clear "what the hell this guy want to do with this topic". I think it would be nice if community choose one boilerplate that already is in a good shape and drop all the focus on it. I don't think that this will be better if every person creates a new boilerplate for no good reason and reinvents the wheel. So to summarize: Create a list of boilerplates to have it in one place Let's choose together a boilerplate which community would accept to take care of, becoming a kind of "official" boilerplate (again think of create-react-app that is used by most of the people). (and yes, I am aware that not everybody will want that, but in most cases unified standard is a good thing, I guess?) List of features that this boilerplate would ideally have. I want to hear your feedback about the whole concept, maybe I am dreaming too much. From my side: https://github.com/lean/phaser-es6-webpack/tree/phaser3 seems to be the most popular, however don't think it's phaser 3 ready yet? Haven't looked at it yet. https://github.com/rblopes/generator-phaser-plus is also looking great, I've used it at it seems it has most of the features. What would I like to hear from you guys: Do you like the idea? If yes, would you like to prefer to choose an existing boilerplate or create a new one How would you name it if new one? If new one, clean start or forked from other project? What features would you add to the list Do you know any other generators that should be on the list? So let me know what do you think about it, let the discussion begin. Yey. Best regards.

Hi , I prepared an yeoman generator for phaser 3. It is supporting typescript , bower and webpack by default. npm install -g yo npm install -g generator-phaser-3-ts-boilerplate Also it is available via http://yeoman.io/generators/ type to search bar phaser-3-ts-boilerplate. Best Regards

EDIT: TANKS TO :Jammy EDITOR: http://pixitools.jamdonut.com/ TANKS TO :bigtimebuddy FROM http://mattkarl.com/ EDITOR: https://pixijs.github.io/pixi-text-style/# SOURCE: https://github.com/pixijs/pixi-text-style ___________________________________________________________ hi !, is there a pixi.text generator for the style. Because I find it very long to try different configuration styles without preview. similar as pixi-particles but for the text style ? http://pixijs.github.io/pixi-particles-editor/ thank a lot for help

It's a pleasure to announce a texture generator "TexGen" to be used by BABYLON developers. Due to the excellent work of @NasimiAsl 's ShaderBuilder it's possible to build a somewhat generic shader and inject the runtime properties (uniforms) on the fly. I've designed a shader-script which takes altenative inputs, generates artificial normal maps, mixes with another optionally image and outputs a really nice 3D look of the (flat) inputs. Live system available HERE (updated) Key featuers: Alternative input sources: PatternGenerator, NoiseGenerator and plain image No need for normal maps, they will be generated on the fly by the shader pattern generator on the javascript side, once generated => turbo speed on the shader side noise generator on the javascript side (Perlin,Fractal,Turbulence), once generated => turbo speed on the shader side Preset concept, all shader/pattern/noise-parameters can be reduced to a handful numerical settings (JSON-Format) Full procedural, images can be mixed optionally Here are some preset patterns from the noise generator and some other Examples. I hope you find this interesting... Greetings, javalang PS. a short description to the LIVE-System (from right to left): on the upper right you find a slider with three input-sources. The next menu are the properties for the pattern generator. On thenext menu are the shader properties mainly for the normal map creation and a slider "balance" where you can mix another image to the input. And on the left side is the noise menu (I prefer preset9 ), there are endless more to be detected... Full procedural image with noise: Mixed with another image: Input source: single image! Input source: pattern generator Noise mixed with image:

Hello Babylon.js Community, I am new to Babylon.js but very impressed by the framework so far. Nevertheless I would like to stay as much JS-framework agnostic as possible. Therefore I wish to use glTF as the data format so that I can (if required) switch to other frameworks and also take advantage of the many tools currently popping up (https://www.khronos.org/gltf) regarding this new format specially created for WebGL. So first I wanted to create a custom build including the glTF-Loader and stable 2.5 version using the “Babylon.js Generator” (http://babylonjs.com/versionBuilder). But for some reason this doesn’t work. Anyone can give me a hand? Any help is appreciated.

Hello everybody! I am looking for procedural terrain generator. I'd like to achieve something like smooth hills or something like here. In the last link there is a beautiful and smooth terrain. I thought about Perlin Noise generator, but I am not sure if is it possible with this function. Maybe do you know something that I can achieve with.

Hello, is it the correct behaviour that instances that are being disposed doesn't get removed from ShadowGenerator.getShadowMap().renderList ? I have the refreshrate set to 0 and only render with shadow on demand. if (_renderShadow && this._manuallyShadowRender) { this._shadowGenerator.getShadowMap().refreshRate = 1; this._scene.render(); this._shadowGenerator.getShadowMap().refreshRate = 0; } else { this._scene.render(); } Is this a problem i this case? I just want to know (maybe it's a bug). Shouldn't ShadowGenerator check the Mesh.isDisposed attribute? Have a nice day Kevin

So yea, my internet was out yesterday and today... soooo I decided to go ahead and create my first written tutorial. Um I hope you like it? https://pryme8.github.io/Das_Noise/Tutorial_1/ Comments, Concerns, Criticism?

Hi all, I'm starting a new Phaser project and I thought I'd take a look at the options for project generators out there. I'm overwhelmed by the amount of options and while I'm sure most of it is down to personal preference, I'd love to hear some opinions on the best way to go. I've worked on a couple of projects in the past that have used Codevinsky's generator, which was great and got me into using prefabs and the like, but that hasn't been updated in over 2 years. These days everyone's talking about ES6. I ran into some problems in the past with inheritance and thought being able to use 'super' would be a good thing, so I thought I'd give that a try, but there loads of different ES6 generators and they all have different features and methodologies. I was thinking of maintaining a list of all the generators I can find with some information about the technology and features, but I wondered before I put too much time into that, if one already exists somewhere? Does anyone have any opinions as to the best way to go, or is it really just a case of trying them all out and going with whatever feels right?

http://pryme8.github.io/TERIABLE/ I will be pushing updates to this github quite often. Features Soon to be implemented : - More Noise Types - Natural Filters for Erosion and Coastlines ect... - Procedural Shades with Editable base textures - Built in Image Editor and Paint program for texture creation and 3d painting Layers. - Infinite Mode - Spherical Mode - Export (the Region as a fixed object, or as a Dynamic one) I am only two days into development so yeah stay tuned... *** UPDATES *** I added the ability to delete and move the item nodes in the filter stack... this is only a temporary way to process the noises and filters. Soon I will be adding a "Node" drag and drop system where you will be able to make linkages between different process. Example:

Hello! I have started a sellfy in which I will post source code of project that is documented and a great way to learn Phaser, also a great way to support me too! https://sellfy.com/SiLD11 Thank you!

So I have tried to develop several games where multiple objects are produced and they move from pointA to pointB and then disappear (deleted) and are no longer required. I have tried many approaches tweening, physics with gravity when they need to fall from a point to a point, also I had the objects on recycle so only the alive ones were rendering. But still the performance took a serious hit even with no more than 50 objects (yes all animating or falling at the same time) and settled around 30-40fps (which is horrible for a simple game) So I was wondering what is the most perfomant approach here for something like this. In terms of animation(tweening) vs physics and about recycle approach. Assume that the objects are actually sprites and may play different frames (even while they animate or fall). Also assume that each object is as big as 5%-10% of the total space of the stage. I really appreciate the help on this.

Hi phaser users, I think it's time to introduce it to the public since scene and prefab generation feature is just finished. Full features listed: Easy and efficient workflow powered by Node.js and Gulp.jsES6 module supportScene(state) and prefab generatorFast live reload with BrowserSyncDeploy with one line commandFor more details, please check the repo: https://github.com/pixelpicosean/slush-phaser-project NOTE: please always update to latest version before using, the project is under heavy development currently. Some screenshots: Why build ANOTHER generator? Phaser is designed without any module system support, so I searched a lot for project generators come with AMD or CJS support, and I did find some nice projects. I use them for some games, and then I saw ember-cli which comes with ES6 module system, and I fell in love with es6 clean and beautiful syntax. That's the most important reason, another one is I did not find any project support blueprint which gives ember-cli a really efficient workflow and clean project layout. PS. Feedbacks and PRs are welcome, let's make it better together And happy coding everyone

Hi fellow devs! I'd like to share with you an app I've been working on for the past couple months. http://www.glyphite.com I present...Glyphite! A fast, clean, and affordable Bitmap font builder. Glyphite runs entirely in your browser so you never have to download an app. Choose from a (soon-to-be) massive selection of Photoshop-quality presets and tweak shadows, strokes, and fills to your heart's desire. When you're done, you can export in the standard BMFont format with more formats coming soon. Glyphite caters to every member of your team, from designers to developers to marketers. We've streamlined the experience so that creating stunning text effects is as easy as clicking a button or tweaking settings in Photoshop. It's now ready to be taken for a spin...by you! We've launched in beta right now, but all of the core font-producing functionality is present. The app performs best in Chrome and Safari, but full support for Firefox is next in the pipeline. Take a look (free to try!) and let us know what you think. We're building this tool for you and we would love to know how you use it and what you'd like to see in the future. www.glyphite.com

For everyone who needs a NormalMap Generator for Windows, Mac, Linux and whatever...: I have build an online in-browser free normal map generator. http://cpetry.github.io/NormalMap-Online/ Screenshot: Please give feedback, post ideas or problems you encounter. Greetz, Christian

Hello guys, Allow me to introduce myself, I'm Geoffroy Warin, entreprise javascript developper by day and an html5 game development junkie at night. I really love phaser, I think it's fantastic work and as I kept experimenting with it, I realized I was always bootstrapping my projects the same way. Copy my gulp file then create the small phaser bootstrap classes in typescript. So I decided to create a yeoman generator : https://github.com/geowarin/generator-phaser-gulp-typescript It's really simple but you have nothing to do, just type 'gulp' on the command line and you will get : LivereloadAutocompletion thanks to typescript definitions filesTypescript debugging in your browser with source mapsI also use it to deploy to github pages in one command ('gulp deploy'). Hope you will enjoy it. It can really be helpful if you want to dive into typescript or you wish to have an example of a good gulp build file. I'm 100% open to pull requests and improvements. Cheers !