Search the Community

Showing results for tags 'template'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 13 results

  1. 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 in and run it. 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 : 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,game,this.posx,this.posy,this.picture) this.anchor.setTo(.5,.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,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 = Phaser.ScaleManager.SHOW_ALL; = true; = 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 = '#ff4000''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() {'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(,,'green_circle') this.green_circle.anchor.setTo(.5,.5),function(){'next_screen')},this); //use prototype => sprite with white_circle this.white_circle=new _sprite(game,,1800,'white_circle'),function(){this.white_circle.say_hello()},this); //use another prototype with inheritance this.super_white_circle=new _super_sprite(game,,1500,'white_circle','i am superman'),function(){this.super_white_circle.show_super_power()},this);,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(,300,'green_circle') this.green_circle.anchor.setTo(.5,.5) this.green_circle.alpha=.5 }, }; And finally you could download all the template below( To launch the app, go to template/www/index.html or upload the file in and run it. Enjoy ! ps : an interesting link to review the basis from javascript in 5 minutes >
  2. I just released Phaser NPM Webpack TypeScript Starter Project (catchy name, isn't it?) GitHub link or my 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)!
  3. 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) Play it live here:
  4. The Best Phaser Template

    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.
  5. Enclave Phaser Template

    I've created a starter template for my HTML5 games that I build with Phaser, and shared it on GitHub if anyone would be interested in using it. Here's the GitHub repo: Online demo: My short blog post: I'm writing a tutorial to explain everything, but you can check the source code already and let me know what you think about it, or suggest any upgrades.
  6. TypeScript Best practices

    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)) Regards, Fairy Regards,
  7. Phaser generator for Yeoman

    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 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
  8. Phaser Code Completion for Eclipse

    Hello I created a set of Eclipse Editor Templates with the code completions used by the Phaser sandbox ( You can see instructions to install it on Eclipse here: Screenshot:
  9. 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
  10. Fullscreening

    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: I've also posted that demo code and the start of a revised boilerplate project template to GitHub: 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
  11. 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!
  12. 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.
  13. 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!