Search the Community

Recently released an alpha test for a simple Top down shooter game I was making (Play here): https://play.idevgames.co.uk/game/bright-blight-shootout-alpha-v2 But I also released the source files on itch.io for $1,00: https://meatyeeter9000.itch.io/bbs-alpha-template Feel free to try it out and use it as a base for your own projects. Features: Upgrades system and Pause menu Boss spawn (boss spawns at multiples of 5) Waves of enemies Lighting Game Menu I still plan to continue this project and make it better but at the moment the development is on hold.

Hello all - I have started working on my first browser-based game and I got the Phaser framework set up with Angular and Electron for this, as I'm super comfortable with Angular and enjoy playing with typescript. I started to build it and realized that getting these frameworks to play well together can be a pain for a lot of people, so I stripped back the content and posted the template in a repo on GitHub. I just thought I'd share and get the word out, and I've had decent traffic from subreddits. I'm hopeful if it gets enough use and some forks, that the implementation might be worked and improved upon. Let me know what you think, or if you have any questions about it: https://github.com/TBosak/game-template

I created a Webpack template that sets up a Vue project with Phaser 3 integration. It's really minimal but can get people started. Feel free to hit me with suggestions. https://github.com/Sun0fABeach/vue-phaser3 Cheers

I've created a template to illustrate the concept of levels generated from dynamically loaded tilemaps from a single level scene. Phaser 3 Tilemap & File Pack Project Template Demo Questions and feedback are welcome!

Looking for someone/team to help us create templates in Quest.ai. We're an IDE that works on Phaser 3 where we easily create timeline animations, sprite sheets, audio sheets, simple interactions, etc. We offer templates that our customers can customize by using us. Finding it hard to create templates and work on the product at the same time so looking for help. Ideally looking for someone or a team that has multiple existing game projects that can be repurposed into templates for our system. This is absolutely a paying a gig where we pay up front for you to create it in Quest in a way that our users can reuse it. Might not be for all but hoping to find someone with many games behind their belts. www.quest.ai I'm the head of design /co-founder of Quest. I can potentially help with the design / reskinning of things depending on the projects. Thank you and please reach out ASAP as we're looking to produce these soon. This also isn't a 1 person fits the position type thing. We'll have to review your game experience and concepts before starting. Thanks and really looking forward to working on collaboration on some fun stuff. (Attaching an example of a design I have that needs to be coded in Quest)

I made a repository with a starter project for creating Phaser 3 plugins (Phaser 3.8.0+): Demo for testing your plugin with dat.gui integration for easy testing. Build script to build uncompressed and minified versions of the plugin (with source map) Webpack 4 ES6 support This is a cleaned up version of what I've been using for my Grid Physics and Animated Tiles plugins. Feedback and suggestions are appreciated. Clone it with git: https://github.com/nkholski/phaser-plugin-starter

Hey folks, New version of Phaser CLI is here: https://github.com/phaser-cli/phaser-cli. Phaser CLI is based on the latest versions of Create React App and vue-cli, and is designed to provide a zero-config setup for your Phaser projects. Getting started: npm install -g @phaser-cli/cli # or yarn global add @phaser-cli/cli phaser create my-project cd my-project npm start # serves your project at localhost:8080 npm run build # builds for production Currently implemented: Basic template with Babel support Linting with Standard Webpack 4 Webpack Dev Server Ability to eject from Phaser CLI Coming soon™️: Support for additional templates (e.g TypeScript, CoffeeScript) Support for multiplayer games via socket.io More linting options (e.g ESLint, ESLint + Standard, ESLint + AirBnB) Add some tests into the templates Integrate Travis/AppVeyor for automated testing/deployment of Phaser CLI And likely a few other things yet to be decided. Phaser CLI is still a work in progress (read: bugs!) so please yell if you're having any issues. Any contributions to the code and other suggestions are very much appreciated ?

As the opportunity to submit an HTML5 game to instant games is open now, I want to convert some of my most interesting HTML5 games to be played in messener. Facebook published a very good sample, I wonder, is there Phaser 3 or Phaser 2 specific instant game sample?

Hi everybody, To thank the users of this forum who helped me a lot, i put my template available to help new beginners or someone else. This template offers : correct scaling without stretching effect portrait mode (for landscape mode you must invert width and height) works with cocoon in webview+ and canvas+ mode (deviceready implemented) upload the file source.zip in cocoon.io and run it. https://cocoon.io/ NOTICE for canvas+, avoid this syntax, that don't work in canvas+, in webview and webview+ no problem let variable; const anothervariable; var myFunc=()=>{} and prefer this: var variable; var myFunc = function(){}; simple example with prototype and inheritance use the states (i personnaly put all the states in a single file but you can quite put them in separate files, it's necessary to inform them in index.html eg: <script src="src/otherfile.js"></script> This template is based on : https://github.com/EnclaveGames/Cyber-Orb and how to adjust the scale is based on: Now my template for the beginners , index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>example_test_scale</title> <link rel="shortcut icon" href="favicon.png" type="image/x-icon" /> <style> body { margin: auto; display: table; position: absolute; border:0px; top: 0px; left: 0px; padding: 0; margin: 0; background: #ffff00 } </style> <!--necessary for cocoon.js--> <script src="cordova.js"></script> <script src="src/phaser.js"></script> <script src="src/main.js"></script> </head> <body> </body> <script> document.addEventListener("deviceready", function() { setTimeout(function() { navigator.splashscreen.hide(); }, 5000, false); }); (function() { //start with a game with these resolution : 1280-1920 // personnaly i find it offers the best graphics for all devices but may slow some devices. // after put a safe zone //1280+200 > 1480 //1920 +350 > 2270 (350 is 200*1.5 > ratio from 1920/1280) var safe_zone_width=1480; var safe_zone_height=2270; var w = window.innerWidth ;//* pixelRatio, var h = window.innerHeight ;//* pixelRatio; var lw, lh; if ( h > w ) { lw = h; lh = w; } else { lw = w; lh = h; } var aspect_ratio_device = lw/lh; var aspect_ratio_safe_zone = safe_zone_height / safe_zone_width; var extra_height = 0, extra_width = 0; if (aspect_ratio_safe_zone < aspect_ratio_device) { // have to add game pixels horizontally in order to fill the device screen extra_height = aspect_ratio_device * safe_zone_width - safe_zone_height; } else { // have to add game pixels vertically extra_width = safe_zone_height / aspect_ratio_device - safe_zone_width; } game = new Phaser.Game( safe_zone_width + extra_width, safe_zone_height + extra_height, Phaser.CANVAS, 'game'); game.state.add('boot', boot); game.state.add('preloader', preloader); game.state.add('the_game', the_game); game.state.add('next_screen', next_screen); game.state.start('boot'); })(); </script> </html> my main.js //initialize variables here var test="1...2...3"; var text="hello from sprite"; //example of prototype => a simple sprite _sprite = function(game,posx,posy,picture){ this.picture=picture, this.posx=posx; this.posy=posy; //call the class sprite from Phaser Phaser.Sprite.call(this,game,this.posx,this.posy,this.picture); this.anchor.setTo(0.5,0.5); game.add.existing(this); }; _sprite.prototype=Object.create(Phaser.Sprite.prototype); // say hello from sprite _sprite.prototype.say_hello=function(){ alert(text); }; //use another prototype but with the previous parameter from _sprite, it's inheritance _super_sprite=function(game,posx,posy,picture,super_power){ //call the first prototype _sprite.call(this,game,posx,posy,picture); this.super_power=super_power; this.scale.setTo(2,2); }; _super_sprite.prototype=Object.create(_sprite.prototype); // add a new characteritic to this prototype _super_sprite.prototype.show_super_power=function(){ alert(this.super_power); }; var boot = { preload: function() { }, create: function() { //to scale the game this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.game.scale.pageAlignHorizontally = true; this.game.scale.pageAlignVertically = true; //red color to see the background of the game itself // you must change the background in the index.html to have the same color in the background game // > change the yellow in red it's only to see how the game is scalling this.game.stage.backgroundColor = '#ff4000'; this.game.scale.refresh(); this.game.state.start('preloader'); }, }; var preloader = { preload: function() { this.load.image('green_circle', 'img/green_circle.png'); this.load.image('white_circle', 'img/white_circle.png'); }, create: function() { this.game.state.start('the_game'); //do not use arrow function like this var some_function=()=>{alert(test)} //it works on webview+ mode but not on canvas mode var some_function=function(){ alert(test); }; some_function(); } }; var the_game = { create: function(){ //to center an object in your game use this: this.green_circle = this.add.sprite(this.game.world.centerX,this.game.world.centerY,'green_circle'); this.green_circle.anchor.setTo(0.5,0.5); this.game.add.existing(this.green_circle); this.game.time.events.add(2000,function(){this.game.state.start('next_screen');},this); //use prototype => sprite with white_circle this.white_circle=new _sprite(game,this.game.world.centerX,1800,'white_circle'); this.game.time.events.add(1000,function(){this.white_circle.say_hello();},this); //use another prototype with inheritance this.super_white_circle=new _super_sprite(game,this.game.world.centerX,1500,'white_circle','i am superman'); this.game.time.events.add(1500,function(){this.super_white_circle.show_super_power();},this); this.game.time.events.add(1800,function(){this.super_white_circle.say_hello();},this); }, }; //for the next screen => next state, the green_circle move to top and alpha is minder var next_screen = { create: function(){ console.log("next"); this.green_circle = this.add.sprite(this.game.world.centerX,300,'green_circle'); this.green_circle.anchor.setTo(0.5,0.5); this.green_circle.alpha=0.5; this.game.add.existing(this.green_circle); }, }; And finally you could download all the template below(template.zip). To launch the app, go to template/www/index.html or upload the file template.zip in cocoon.io and run it. https://docs.cocoon.io/article/developer-app/ Enjoy ! ps liste of tools i use : image editor => https://www.gimp.org/fr/ vector image => https://inkscape.org/fr/ font to image => http://kvazars.com/littera/ convert music to ogg => https://audio.online-convert.com/fr/convertir-en-ogg reduce png => https://tinypng.com/ particle editor => https://phaser-particle-editor.firebaseapp.com/ text editor the best => https://neovim.io/doc/user/nvim.html plugin with nvim : Plug 'scrooloose/nerdtree' Plug 'morhetz/gruvbox' Plug 'Shougo/deoplete.nvim', { 'do': ':UpdateRemotePlugins' } Plug 'Raimondi/delimitMate' Plug 'rhysd/github-complete.vim' Plug 'easymotion/vim-easymotion' Plug 'terryma/vim-multiple-cursors' Plug 'vim-syntastic/syntastic' Plug 'kien/ctrlp.vim' Plug 'majutsushi/tagbar' Plug 'pangloss/vim-javascript' Plug 'vim-scripts/indenthtml.vim' Plug 'walm/jshint.vim' syntax style correct => http://jshint.com/ colorscheme => https://github.com/joshdick/onedark.vim os : awesome wm on linux with zsh an interesting link to review the basis from javascript in 5 minutes > https://learnxinyminutes.com/docs/javascript/ template.zip

I just released Phaser NPM Webpack TypeScript Starter Project (catchy name, isn't it?) GitHub link or my github.io link as a base starting point for creating games with Phaser using TypeScript taking advantage of the Phaser npm module and Webpack for building (which I couldn't find a template for, so I made one). It includes the typical 3 states (boot, preloader, title) to show the flow of a Phaser game. It also includes a watch task that watches the project for any changes and recompiles, and another task to run a live server that refreshes automatically after a build. It only takes a few seconds and a couple commands to get going (after having node.js installed)! It's platform agnostic (I've tested on OSX, Ubuntu running on a Chromebook, and Windows 10 in a VM running on OSX and had zero difference in behaviour). Hopefully someone here will find it useful, or at least take a look and let me know how to improve it (I plan on using this template and it's evolutions for all my future Phaser projects)!

My new game is Crazy Eggs! It's a shuffle items game for the holidays, but can be used as a template for other themes as well (Xmas, Halloween, summer, any holiday or occasion) https://codecanyon.net/item/-crazy-eggs-shuffle-items-game/19667757 Play it live here: https://netgfx.com/trunk/games/crazyeggs/

Let me introduce you to the Phaser Goldilocks Template. It combines everything I wanted during that first week of Phaser. This solves a few things. First, for development all code can be separated into different JS files. For production, all JS files can be combined into a single one for the fastest loading. The second thing this solves is the common scoping pitfalls I see many people encounter. So no need to use prototype as the game variable is available in each file. https://github.com/EddieOne/phaser-goldilocks-template

Hi, i'm looking for best pratices to start a phaser project with TypeScript. Most of the tutorials are not up to date (2013 on the site). What about project's structure (i mean directories, naming convention etc.), which tools etc ? EDIT : you can now download a complete Visual Studio Template for Phaser with TypeScript : (it's up to date and easy to install (VS Extension)) https://visualstudiogallery.msdn.microsoft.com/ee6e6d8c-c837-41fb-886a-6b50ae2d06a2 https://github.com/fairydhwen/PhaserTypeScriptTemplate/blob/master/README.md Regards, Fairy Regards,

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 I created a set of Eclipse Editor Templates with the code completions used by the Phaser sandbox (http://phaser.io/sandbox) You can see instructions to install it on Eclipse here: https://bitbucket.org/boniatillo/phasereditortemplates Screenshot:

Hi there I'm new to this forum and fairly new to gaming, especially mobile gaming. I would like to start developing simple games using Canvas and javascript. The greatest challenge I can see so far and creating a full-screen (or close to fullscreen) experience across different devices. To be honest, I would be happy if I could even guarantee my games would work on all iphones alone. I guess my question is, is there a template or framework that exists that would act as a starting point and at least have most popular devices appearing in fullscreen? I started a game using this tutorial. It's a great tutorial an I learned a lot but it doesn't really address handling different aspect ratios. Any input would be helpful! Thanks

This weekend I've been playing with fullscreening, specifically SHOW_ALL, and had some challenges getting the stock examples and project template to work correctly on both my laptop and phone. After mostly nailing those down, I have a blog post up that may be useful to others: http://www.rocketshipgames.com/blogs/tjkopena/2014/10/fullscreen-scaling-in-phaser/ I've also posted that demo code and the start of a revised boilerplate project template to GitHub: https://github.com/RocketshipGames/phaser-fullscreen I'd be appreciative of any comments, suggestions, and pointers to best practices. In particular, next I'd like to figure out why it gets scaled disproportionately in Firefox. I'm also not sure the orientation prompt (in the larger project) is being handled optimally, it shows flashes of rotated screen in the transition though there may be nothing much to be done about that. The standard project template doesn't show the orientation prompt at all in fullscreen mode because of the div not being contained in the fullscreen element. Thx

Hey everyone, inspired by Nokdu's post about Phaser with Meteor integration I decided to whip up my own little project skeleton and host it on Github. Here's a quick little FAQ: Q: Does it run on Windows too? A: Yes! Even though Meteorite is not supported under windows, you can emulate it's behavior. Instructions to do so are found in my README. With it, both Windows and *nix users shouid be able to build and deploy Phaser with Meteor. Q: Why Meteor? A: Meteor is its own grunt. It automagically bundles, minifies, serves and reloads your project. It has a plugin ecosystem from which Phaser and many other projects can be retrieved. It has support for different JavaScript, HTML and CSS dialects and comes with a reactive pub-sub mechanism that makes authentication, databases and frontend development easier. Fair warning though, Meteor is still pre-1.0 and Windows support is lacking in some areas. Meteorite, the plugin manager, is not directly supported under Windows, although it can be emulated manually. Q: What dependencies does your project have? A: It uses the dependencies CoffeeScript, jQuery, Lo-Dash and PhaserIO. However, jQuery and Lo-Dash aren't used yet, so feel free to remove them if you don't want them. Q: I have suggestions, improvements, criticisms. A: Great! I'm always looking for ways to improve both myself and the projects I work on. Send me a message, a pull request, or even a request via RFC 1149. For my closing remark, I'd like to point out that my Phaser structure was derived/inspired/stolen from the Advanced TypeScript Guide to Phaser. Many thanks for all of the great tutorials!

I'm completely new to JS, and I'm just trying to get my head around the JS in the basic template, few questions. game.state.add('Boot', BasicGame.Boot);In the index.html file, the above is used to add a state, but how can the index file use BasicGame if that is not defined yet? as BasicGame is defined in boot.js which runs after the setting up of the states? BasicGame = {};That creates a function? which basically acts as a class? BasicGame.Boot = function (game) {};What's the point of the above? (in the boot.js file) why does the game var need to be passed to it? does it act as a constructor? What calls the create function in the boot.js file? I'm trying to understand the program flow in the basic example, what calls what and when.

I've been using this forum as a valuable tool along with all the wonderful examples provided to us. I finally have my first simple HTML5 game nearly complete but i'm having an issue with accessing the global variables in the Full Screen Mobile Template. I'll post the code I'm talking about below: Boot.js BasicGame = { // GLOBAL VARIABLES score: 0, // MUSIC THAT PLAYS BETWEEN STATES music: null, // CHECK AGAINST DEVICE ORIENTATION TO DETERMINE BEHAVIOR OF GAME orientated: false };BasicGame.Boot = function (game) {};BasicGame.Boot.prototype = { preload: function () { },Now, first I had noticed that in this template variables don't look like how I would normally declare a variable: var score = 0;In my loop timer I basically have the timer increment the score: Game.js updateCounter: function() { score++; scoreText.setText("Score: " + score); }If I use the above code without first declaring the score variable in this state then I get a variable undeclared error. My concept is that I want to add the score to the MainMenu state but when attempting to do so it states the variable is not declared. How would I access the global variable from another game state when declaring it as has been done in this template? Thanks for any help you can provide!