Search the Community

Showing results for tags 'phaser'.

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 2,858 results

  1. [Phaser] Copter Rescue

    Hello fellow game devs, I have made this game Copter Rescue in the recent few weeks, you can check it out on the this link: Also contacted a few HTML5 game publisher and hoping that I will get a few offers for exclusive or non-exclusive licence, what do you think would be a fair price for a game like that? Thanks for your answers and your time. Feel free to discuss the game and what you like/dislike, I'm open to any kind of criticsm. Regards!
  2. Issues making my first snake game

    Hi, I have been working on my first full game and decided to try a snake clone. I haven't followed any kind of tutorial and have just been trying to get to grips with the framework. I am however having a few issues and have been stuck for a couple of hours to try and fix a couple of annoying bugs. The first main issue I have with my game is that collisions don't seem to be firing correctly. I have tried to set one up when the head of the snake collides with any of the tail elements which just restarts the game state for testing purposes. This seems to however try to trigger another function which should only happen when a player collides with food. I am guessing I need to setup my collision handlers differently in order to fix this. The other bug is that when a bit of food has been eaten a new sprite it created but just before it does it gets added randomly to somewhere on the screen then disappears but I can't work out why that would be. I setup a git repo of my project so far on github and it can be found here: If someone could offer some advice as to what I can do to fix this I would be very grateful. Thanks
  3. This is the phaser multiplayer game series continuation. In this tutorial, we manage food in the server and generate them in the client like many other io games.
  4. Hi guys, I am trying to create a Game with Ionic 2 (=> Typescript) and Phaser and so far it was fine... until that I tried to add the plugin Virtual Joystick. The line this.pad =; return an error about undefined "game" But the comment above this line works fine ... It's maybe that I don't use the correct syntax to call a plugin ... Please Help me import { Component } from '@angular/core'; import { NavController, NavParams } from 'ionic-angular'; import { Platform,AlertController } from 'ionic-angular'; import { Storage } from '@ionic/storage'; import { HomePage } from '../home/home'; /* Generated class for the Play page. See for more info on Ionic pages and navigation. */ ///<reference path="js/phaser-virtual-joystick.min.js"/> @Component({ selector: 'page-play', templateUrl: 'play.html' }) export class PlayPage { score: any; scoreObj: Number; game: Phaser.Game; map: Phaser.Tilemap; balloon: Phaser.Sprite; bg: Phaser.TilemapLayer; start: Phaser.TilemapLayer; hit: Phaser.TilemapLayer; cursors: Phaser.CursorKeys; pad; stick; test; constructor(public navCtrl: NavController, public navParams: NavParams,platform: Platform,public storage:Storage,public alertCtrl: AlertController) { platform.ready().then(() => { storage.get('scores'); storage.get('level'); }); } ionViewDidEnter(){ this.score = 0; this.scoreObj = 100; var innerWidth = window.innerWidth; var innerHeight = window.innerHeight; = new Phaser.Game(innerWidth, innerHeight, Phaser.AUTO, 'myGame', {create: this.create, preload: this.preload,update:this.update, render: this.render}, true); } preload(){'balloon', 'img/balloon-01.png',112,150);'lest','img/sac.png');'target','img/hole.png');'level1', 'img/bg-test.json', null, Phaser.Tilemap.TILED_JSON);'bg-test', 'img/bg-test.png');'arcade', 'img/arcade-joystick.png', 'img/arcade-joystick.json'); } update = () =>{, this.hit,() => { this.balloon.kill(); this.score = this.score + 3; console.log("hit"); });, this.start);,,() => { this.balloon.kill(); console.log("bg"); this.score = this.score - 1; });; if (this.cursors.left.isDown) { this.balloon.position.x -= 5; } else if (this.cursors.right.isDown) { this.balloon.position.x += 5; } } render = () =>{; } create = () =>{ /*var plugins = new Phaser.PluginManager(; console.log(plugins);*/ this.pad =;; this.cursors =;, 0, 9600,800); //MAP var map ='level1',9600,800,9600,800); map.addTilesetImage('bg-test'); this.hit = map.createLayer('hit'); this.start = map.createLayer('start'); = map.createLayer('bg'); //BALLOON this.balloon = new Phaser.Sprite(, 192, 490, 'balloon'); this.balloon.debug = true;, 3);, Phaser.Physics.ARCADE); this.balloon.body.gravity.y = 15; this.balloon.body.collideWorldBounds = true; this.balloon.inputEnabled = true;, Phaser.Camera.FOLLOW_LOCKON, 0.1, 0.1); this.balloon.animations.add('fly', [ 0, 1, 2, 3, 4, 5], 20, true); this.balloon.body.velocity.y = 10; // GAME map.setCollision([1,2,4,5],true,,true); map.setCollision([6],true,this.hit.index,true); map.setCollision([3],true,this.start.index,true); } }
  5. Hi there How can I have fancy particlestorm trails coming out of by sprite bullets and do collision detection? I've managed to get the basic PS emitter example working. But there is no way of getting the emitter position or doing collision detection between the emitter and another object (that I know of) I've tried to put a sprite over the emitter but it's hard to match the velocities and stop the emitter when I want to kill the bullet. I've tried to create a sprite with a render texture but nothing happens. Also tried adding the emitter as a child. I presume I need to create a sprite and attach the emitter to it but am now stuck. Any help is much appreciated and code below. Thanks! var game = new Phaser.Game(400, 300, Phaser.AUTO, 'Particles', { preload: preload, create: create, update: update, render: render }); var manager = null; var emitter = null; var object; var bullet = { image: 'bullet', anchorX : 0.8, anchorY : 0.5, vy: -8.0, scale: 0.5, rotation: -90.0, emit: { name: 'data', value: 0.07 } }; var data = { lifespan: 6000, image: 'white', scale: 0.5, blendMode: 'ADD', hsv: { initial: 0, value: 359, control: 'linear' }, vx: { min: -0.5, max: 0.5 }, vy: { min: -1, max: -2 } }; var player; function preload() { game.load.script('particlestorm', './assets/particle-storm.min.js'); // game.forceSingleUpdate = true; game.load.image('bullet', './assets/bullet.png'); game.load.image('white', './assets/white.png'); game.load.image('player', './assets/turret.png'); } function create() { manager =; manager.addData('bullet', bullet); manager.addData('data', data); //emitter = manager.createEmitter(); emitter = manager.createEmitter(Phaser.ParticleStorm.RENDERTEXTURE); emitter.addToWorld(); //player = game.add.sprite ( 100, 100,emitter.renderer.renderTexture); player = game.add.sprite ( 100, 100, 'player'); game.physics.enable(player, Phaser.Physics.ARCADE); player.enableBody = true; //player.addChild(emitter); } function fire(pointer) { emitter.renderer.display.visible = true; console.log ("PointerX= "+pointer.x); player.reset (pointer.x,300); player.body.velocity.y = -500; emitter.emit('bullet', pointer.x, 300); } function update(){ game.input.onDown.add(fire, this); if (player.body.y < 50 ){ player.kill(); emitter.renderer.display.visible = false; } } function render() { game.debug.text('Click to fire', 32, 32); }
  6. Tilemap issue

    Hey guys I'm new to Phaser, I looked on Youtube and phaser examples for answers but didn't find any helpful one. I get this error on the console TypeError: location is undefined[Learn More] phaser.js:97736:25 getIndex getTilesetIndex addTilesetImage create loadComplete finishedLoading processLoadQueue asyncComplete fileComplete loadImageTag/ Here is my code: var game = new Phaser.Game(500, 400, Phaser.AUTO, "", { preload: preload, create: create, update: update }); function preload() { game.load.spritesheet( "marioSmall", "assets/images/marioSmall.png", 34, 34, 6, 1 ); game.load.image("ground", "assets/images/ground.png"); game.load.tilemap( "map_01", "assets/tileset_json.json", null, Phaser.Tilemap.TILED_JSON ); game.load.image("tiles", "/assets/items.png"); } var mario; var ground; var map; var layer; function create() { // ground = game.add.sprite(0, 370, "ground"); // game.physics.arcade.enable(ground); // ground.body.immovable = true; // mario = new Mario(100, 100, 2000, 800, 200); map = game.add.tilemap("map_01"); map.addTilesetImage("items", "tiles"); layer = map.createLayer("Tile Layer 1"); } function update() { // game.physics.arcade.collide(ground, mario.sprite); // mario.checkInput(); }
  7. Web font not shown correctly

    I added text into a sprite as child. My text could not show font correctly. Anybody could help me? My code is as follows: = { font: "30px Arial", fill: "#000", boundsAlignH: "center", boundsAlignV: "top" }; ... this.textContent = this.add.text( -30, -60, "test content",; ... However, what I got on test webpage was not Arial font, but as shown in attached image. Why is that?
  8. Hello, I wonder if anyone knows how to record sound from microphone input with phaser? In my project, I have to add a record button, and when user click on it, the program needs to start receiving audio stream from a microphone. After user finishes recording, by clicking on a stop button, the audio should be encoded and stored as an MP3 or other acceptable audio format file. Anyone can give a helping hand?
  9. Visual Novel Engine RenJS

    Hi! I'm a developer from Argentina and I just released a visual novel engine based on Phaser and inspired by Ren'Py, called RenJS. The stories are written in yaml on a list of actions, and then interpreted and executed with Javascript and Phaser. It's easy to use by non programmers and it's super easy to extend and modify for anyone that knows a bit of phaser. I invite you to check the tutorial game I made with the engine itself in, you can also get the code from, download it, play it locally and grab the files to make your own visual novels. There's no official documentation of it yet, but I'm working on it. I hope to get some feedback from you all, thank you!
  10. I've dabbled in developing Flash games back in the day using frameworks like Flashpunk, but haven't done much in terms of game development in recent years. I kept developing concepts though, one of which I'd like to develop further using modern tools - but I'm completely lost in the current world of 2D game architectures. One option I'd really like to have is being able to export to console (PS4/XBone). Consequently I've tried out Unity and Game Maker Studio (I've bought a 1.4 version license some time ago). Both seem very cumbersome to me and I'm struggling to get a decent workflow established. I've liked ActionScript based frameworks like Flashpunk for being "code only" - without any weird GUIs that (in my apparently old mind) seem clunky and unintuitive. If I need further dev tools, I like to code them myself or use stuff like that I can write import methods for. As a result I've stumbled over Phaser (and other HTML5 based frameworks) and they seem to offer the exact style of game development I like - but I couldn't find much about bundling games made with Phaser into native applications. Sure, there are things like, but those seem to be aimed at creating windows executables aimed for platforms like Steam. While I obviously want the option to release on PC/Steam, I don't really need mobile nor web - I'd rather have console instead. (I know about the difficulties related to releasing anything on console marketplaces and dealing with Sony etc. But my game would work quite nicely on consoles and I'd like to use an engine/framework that has the possibility for a largely pain-free porting process to consoles) tl:dr; So, my question is this: Is there any proven way to get a Phaser game (or some similiar HTML5 framework) ported to console? Or is there something else I'm missing that would satisfy my needs? thx guys
  11. My image will not load

    Hello guys, I'm trying to get an image in my game, but it simply will not load. There's nothing wrong with my assets. this is the error i'm getting : Uncaught DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at file:///C:/Users/Gebruiker/Documents/school/jaar%202/kwartiel%201/project%20creative%20technology/phaser/assets/images/background.jpg may not be loaded. at PIXI.WebGLRenderer.updateTexture. Could it be the size of the image?
  12. I'm making a game using Phaser, P2 physics and webpack. When it comes to P2 I can not use custom physic shapes because they won't collide with world bounds. I'm using Phaser webpack example template ( Templates/Webpack) and an example from the website ( The point is that when using custom colision shapes, entities won't collide. But they do if I use the default squared shapes or the circle ones that Phaser provide. The game code is simple and you can check it here: /** * Import Phaser dependencies using `expose-loader`. * This makes then available globally and it's something required by Phaser. * The order matters since Phaser needs them available before it is imported. */ import PIXI from 'expose-loader?PIXI!phaser-ce/build/custom/pixi.js'; import p2 from 'expose-loader?p2!phaser-ce/build/custom/p2.js'; import Phaser from 'expose-loader?Phaser!phaser-ce/build/custom/phaser-split.js'; var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); function preload() { game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.load.image('tetrisblock1', 'assets/sprites/tetrisblock1.png'); game.load.image('tetrisblock2', 'assets/sprites/tetrisblock2.png'); game.load.image('tetrisblock3', 'assets/sprites/tetrisblock3.png'); game.load.physics('physicsData', 'assets/physics/sprites.json'); } var tetris1; var tetris2; var tetris3; var mouseBody; var mouseConstraint; function create() { // Enable p2 physics game.physics.startSystem(Phaser.Physics.P2JS); game.physics.p2.gravity.y = 1000; tetris1 = game.add.sprite(300, 100, 'tetrisblock1'); tetris2 = game.add.sprite(375, 200, 'tetrisblock2'); tetris3 = game.add.sprite(450, 300, 'tetrisblock3'); // Create collision group for the blocks var blockCollisionGroup = game.physics.p2.createCollisionGroup(); // This part is vital if you want the objects with their own collision groups to still collide with the world bounds // (which we do) - what this does is adjust the bounds to use its own collision group. game.physics.p2.updateBoundsCollisionGroup(); // Enable the physics bodies on all the sprites game.physics.p2.enable([ tetris1, tetris2, tetris3 ], false); tetris1.body.clearShapes(); tetris1.body.loadPolygon('physicsData', 'tetrisblock1'); tetris1.body.setCollisionGroup(blockCollisionGroup); tetris1.body.collides([blockCollisionGroup]); tetris2.body.clearShapes(); tetris2.body.loadPolygon('physicsData', 'tetrisblock2'); tetris2.body.setCollisionGroup(blockCollisionGroup); tetris2.body.collides([blockCollisionGroup]); tetris3.body.clearShapes(); tetris3.body.loadPolygon('physicsData', 'tetrisblock3'); tetris3.body.setCollisionGroup(blockCollisionGroup); tetris3.body.collides([blockCollisionGroup]); // create physics body for mouse which we will use for dragging clicked bodies mouseBody = new p2.Body();; // attach pointer events game.input.onDown.add(click, this); game.input.onUp.add(release, this); game.input.addMoveCallback(move, this); } function click(pointer) { var bodies = game.physics.p2.hitTest(pointer.position, [ tetris1.body, tetris2.body, tetris3.body ]); // p2 uses different coordinate system, so convert the pointer position to p2's coordinate system var physicsPos = [game.physics.p2.pxmi(pointer.position.x), game.physics.p2.pxmi(pointer.position.y)]; if (bodies.length) { var clickedBody = bodies[0]; var localPointInBody = [0, 0]; // this function takes physicsPos and coverts it to the body's local coordinate system clickedBody.toLocalFrame(localPointInBody, physicsPos); // use a revoluteContraint to attach mouseBody to the clicked body mouseConstraint =, [0, 0], clickedBody, [game.physics.p2.mpxi(localPointInBody[0]), game.physics.p2.mpxi(localPointInBody[1]) ]); } } function release() { // remove constraint from object's body game.physics.p2.removeConstraint(mouseConstraint); } function move(pointer) { // p2 uses different coordinate system, so convert the pointer position to p2's coordinate system mouseBody.position[0] = game.physics.p2.pxmi(pointer.position.x); mouseBody.position[1] = game.physics.p2.pxmi(pointer.position.y); } function update() { } function render() { // game.debug.text(result, 32, 32); } If you need to have a look at the project, you can check it here: Any toughts about why the collisions are not working when using custom collision shapes? Thanks in advance, Alex
  13. WildCowboy

    Hello, game devs I created my first game WildCowboy with Phaser.js. This game is interpretation classic Sokoban. Game include 60 classic levels. I will be glad to hear your opinion and comments links: Web: Android: Google Play Regards.
  14. Facebook Messenger Inspired Basketball game

    Hi, this is my first HTML5 game using Phaser, I found this gem because I have a project to create a basketball game and it is very similar from what I needed. My concern is how can I remove the frame drop. Because every time I play the frame drops ridiculously. Both in Desktop Chrome and Smartphone Chrome. All the assets are in low resolution. I can't find a fix why this happens. I hope someone can help me. Thanks!
  15. Flappy Rock, My first game in phaser:)

    Play the game
  16. I want to check how much of my second sprite is overlapped with first sprite in callback function,so that i can determine if the overlap is enough for(% of overlapping) for further process.But when i check that with overlapY/overlapX .i am getting 0 always .Please help.
  17. Hi I have a zip file that I tested on cocoon dev launcher and is working fine but not after compiling on the cloud. Any ideas thanks
  18. This is a continuation of Phaser multiplayer game tutorial with Node.js server and This is part 3 and we're implementing some simple game mechanics with authoritative server. Part 3:
  19. Hello to everyone, I'm currently developing a fan-made, retro-style and non-profit game with Phaser based on the TV show Stranger Things. The main idea is to do a Point and Click game like old classics (Monkey Island saga, Indiana Jones and the fate of atlantis, etc...) with retro pixel-art graphics and chiptune music. I'm looking for GFX and Music artists If you are interested to collaborate with this project please contact with me and I'll send you a link to see the work in progress. (Sorry if there are some grammar errors, I'm Spanish).
  20. Can't load images by any means.

    Im attempting to make a game with Phaser and nodeJS. I was doing my character as a graphic (game.add.graphic) but couldn't figure out how to remove the graphic so I figured I'd make a sprite and load it. var Game = { preload: function(){ game.load.image("snakeBody", "../../assets/snakeBody.png"); game.load.image("apple", "../../assets/apple.png"); }, my folder structure is like so: -assets -static -scripts -game.js But it tells me that it can't find both files. I've also tried to add this line app.use(express.static('assets')); and then var Game = { preload: function(){ game.load.image("snakeBody", "localhost:3000/assets/snakeBody.png"); game.load.image("apple", "localhost:3000/assets/apple.png"); }, But same error occurs. EDIT: Solved it, tursn out I had to set the path as just "/snakeBody.png". I still dont understand why, but this worked.
  21. Common Phaser + CocoonJS issues

    Last update of this information was 13 August 2014. Note: As of this writing, CocoonJS (2.0.*) comes in a total of three modes. [system] WebView creates an instance of the default browser for a platform, loads its own API, and then hands off the code execution. In most cases, it is the same as running the code in a mobile platform's default browser. WebView+ is often the same as WebView, but adds in Chromium-based libraries. For Canvas+ mode (previously accelerated, "Canvas 2D/WEBGL") it strips out things like XML and most DOM and CSS support to make running the canvas as fast as possible. Because of this, most common things like getElementById and createElement in JavaScript have reduced functionality. It is designed purely for Canvas-based projects. (For the 2.0 branch, see the changelog from 1.4.7.) Since there is limited DOM support, make sure to use an empty string for the parent element during the creation of a game object when using the accelerated/Canvas+ mode. (This is to make sure the created canvas element is appended to the document.body object, and not some other element the getElementById function cannot find.) var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.CANVAS, '', {preload: preload, create: create, update: update});Issues with Phaser <= 2.0.7 and CocoonJS <= 2.0.2 (Canvas+) Images Use of multiple images may introduce disappearing or flickering results. Text Single-line text printing works. However, using the newline character will not produce the correct results. Setting anchor.y values do not work correctly.Shadows do not work. XML CocoonJS does not have native support for XML. Its XHR does not return responseXML and it does not have a window.DOMParser object. Scaling Generally, you can use window.innerWidth and window.innerHeight to compute the size of the screen in CocoonJS. However, if you know there might be a device pixel ratio issue, the following code works for that. var width = window.innerWidth * window.devicePixelRatio;var height = window.innerHeight * window.devicePixelRatio;Depending on your needs, Phaser's built-in scaling manager will often be enough. However, the following code suggested by Starnut should be helpful for accounting for odd screen sizes as well. var w = window.innerWidth * window.devicePixelRatio,h = window.innerHeight * window.devicePixelRatio,width = (h > w) ? h : w,height = (h > w) ? w : h;// Hack to avoid iPad Retina and large Android devices. Tell it to scale up.if (window.innerWidth >= 1024 && window.devicePixelRatio >= 2){width = Math.round(width / 2);height = Math.round(height / 2);}// reduce screen size by one 3rd on devices like Nexus 5if (window.devicePixelRatio === 3){width = Math.round(width / 3) * 2;height = Math.round(height / 3) * 2;}var game = new Phaser.Game(width, height, Phaser.CANVAS, '');BitmapFonts Because of the lack of XML support, one solution for BitmapFonts is to convert the XML into JSON and use an alternative loader. This post covers the code needed and what to use to convert the XML into JSON. Audio Most often, audio problems are related to the device itself, not CocoonJS or Phaser. If you are running on an Android device, make sure you have OGG or WAV (16-bit ONLY) files. Apple devices support MP4, OGG, MP3, WAV (16-bit ONLY), or MPEG. (Remember too that MP3 decoding, depending on the device, can often be slow.) On some platforms, a user-activated event (like touch) is needed to enable sound. This specifically affects iOS devices, but is not uncommon on other platforms too. Using something like a "Tap to Continue" button or an initial menu works well to signal to the player to tap to enable both the game and sounds. Filters Filters don't work currently. (As reported here.) Buttons There is currently a problem where image-based buttons can sometimes disappear. It is under investigation. It is HIGHLY recommended to update to newer versions of Phaser ( >=2.0.7) and CocoonJS ( >=2.0.2). Issues between older versions of both libraries are no longer being actively tracked.
  22. Hello , I'm super new to Typescript , html5 , and I'm looking for some direction, so I started my first "hello world" game and I would like to know how to host it(web host). I have windows hosting through Arvixe... not sure what is required I'm using visual studio 2015 and typescript Thank you in advance Jimmy
  23. How to restart a Game.

    Hello Everyone, I am trying to develop a breakout type game. But can't restart the game. Is there any easy way to do that? Thanks in advance.
  24. [Phaser] Space Blaze

    Hi! This is my second html5 game! It's a arcadey space "exploration" where the player jumps from planet to planet. The goal is to reach the wormholes that lead you to your ultimate destination. All feedback is welcome! Have fun!
  25. Show FPS

    Hi all, Quick question, I'm sure I've seen this in the examples but can't seem to be able to find it. How do you show the current FPS when debugging? Cheers.