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

Hello guys! I'm having some "problem" (not really, more a doubt). Working with Node js (firstime) I'am organizing an already made game. My problem is to acces the "game object" outside the modules. So, how would you make the game object (var game = new Phaser.Game(SCREENWIDTH, SCREENHEIGHT, Phaser.CANVAS, 'game') available to all the sub-modules in the app?. I'm sending the game as a parameter but I don't think this is a good approach. This is what I have now: main.js: 'use strict';// var PlayScene = require('./play_scene.js');var GlobalVariables = require('./main_variables.js');var MenuScene = require('./modules/menu/menu.js');var PlayerVsCpuGame = require('./modules/pvscpu/player_vs_cpu_game.js');var BootScene = { ...};var PreloaderScene = { ...};window.onload = function () { var SCREENWIDTH = window.innerWidth; var SCREENHEIGHT = window.innerHeight; var game = new Phaser.Game(SCREENWIDTH, SCREENHEIGHT, Phaser.CANVAS, 'game'); // var game = new Phaser.Game(800, 600, Phaser.AUTO, 'game'); game.state.add('globalv', GlobalVariables); game.state.add('boot', BootScene); game.state.add('preloader', PreloaderScene); game.state.add('PVsCPUGame', PlayerVsCpuGame); // game.state.add('play', PlayScene); // Main Menu For the Game game.state.add('menu', MenuScene); game.state.start('boot');};Then the PlayerVsCpuGame (where I can access the game object easily): var CpuPlayHardMod = require('./libraries/cpu_play_hard.js');var PVsCPUGame = { handleResize: function(){ var w = window.innerWidth; var h = window.innerHeight; this.game.width = w; this.game.height = h; var ratio = 1600/900; var windowRatio = w/h; RATIO = w/1600; if (windowRatio > TaTeTi._RATIO) { TaTeTi._RATIO = h/900; } }, this.handleResize(); this.physics.startSystem(Phaser.Physics.ARCADE); this.preloadBG = this.add.sprite(0,0,'generalBG'); this.preloadBG.width = TaTeTi._WIDTH; this.preloadBG.height = TaTeTi._HEIGHT; this.board = this.add.sprite(TaTeTi._WIDTH/2+TaTeTi._RATIO*30,TaTeTi._HEIGHT/2,'board'); this.board.anchor.set(0.5,0.5); this.board.scale.setTo(TaTeTi._RATIO*0.35,TaTeTi._RATIO*0.35); this.board.name = 'THE BOARD'; TaTeTi._GAMESTARTED = true; this.HitZoneGroup = this.add.group(); // the group for player pieces this.playerPieces = this.add.group(); // the group for cpu pieces this.cpuPieces = this.add.group();.... As you can see on top of that file, I'm calling a new module, and here is where I'm having the problem: // Hard Level CPUvar cpuPlayHard = function (game){ // if the game has ended then I'll skip this function if(TaTeTi._GAMESTARTED === false) return; // if all the pieces are on the board, then it will use the // randomCpuKeepPlaying() function which moves the CPU pieces to // keep playing if(TaTeTi._COUNT > 5 ) { return false; } self = this; ...because I need to call cpuPieces which is in the "parent module", and other methods as well. For now I'm passing the "game" object as a paremeter, but I intend to use more libraries like this one, and as I'm very new to node, I'm not sure how to do this in a right and clean way. Hope you guys can help me with this. Thanks in advance! Diego.

Hi all, I created a Phaser generator for Yeoman (a scaffolding tool). The original idea was to have an easy way to set up a HTML 5 game project for game jams, prototypes, etc. It doesn't have a lot of features, but it provides: Latest version of Phaser, of course A starter project with an asset preloader scene, plus a main scene.A gulpfile with some basic tasks:Launch a local web serverLivereload (so the web browser does a reload automatically when a JS file changes)Deployment via rsyncBrowserify integration, so you have a nice way to create modules for your game (and/our use NPM packages) or import other files while we wait for ES6 to be common.Two HTML files: one that acts as a viewer/wrapper (which you can customize) and another one that is just a canvas so the game can be embedded in 3rd party sites (like itch.io or Ludum Dare)If you have node and NPM in your system, this is really easy to setup. First you need to install Yeoman and this generator: npm install -g yo generator-gamejamThen you create a new directory for your game (or clone an empty git repository) and run Yeoman from there: mkdir my-fancy-gamecd my-fancy-gameyo gamejamYou will be asked several questions, such as the title of your game, the license you want to use, the resolution you'd like, etc. With this info, you will get a custom base template you can build your game on Once the template is set up, you can try it by running: gulp runThen open your browser in http://localhost:8080 and boom! If you want livereload, you'll need an extension for your browser, like this one for Chrome. There's a gulp task to deploy your game to a server via rsync. In order for that to work, you need to edit the file gulp.config.json with the data of your server. And I think that's it. If you have any comments, or feature requests, they are more than welcome. Happy coding

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 !