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. 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.
  2. 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); }
  3. 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?
  4. 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(); }
  5. 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
  6. 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?
  7. 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
  8. 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
  9. 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!
  10. 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?
  11. Flappy Rock, My first game in phaser:)

    Play the game
  12. 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:
  13. 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.
  14. 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.
  15. Same background image in all states

    Hello, I'm new to the Phaser framework and I'm trying to have a single backgound and logo througout all the states in a phaser game. I add the background image in the very first state but when I start the next state using:"State2"); the background image disappears. Do I have to load the background image in every state? Thanks
  16. 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!
  17. 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
  18. [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!
  19. 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
  20. Hi i'm very new to Phaser but i'm struggling with the onFloor and onCeiling events working together - i'm assuming it's syntax or something stopping this working as i want. Basically i'm playing with the sandbox and using code from the examples to familiarize myself with Phaser - my problem is this (code snippet from update below) the player.body.onFloor event works if i comment out the player.body.onCeiling event and a Game over message appears. As it is if i get the player to the top of the screen I get the You win message - but if i hit the floor then the game over message does not appear and the game seems to freeze and Platforms.destroy() does not execute. or is there a better way to implement "top" and "Bottom" of the screen? var text; var message; function update () { emitter.customSort(scaleSort, this); game.physics.arcade.collide(player, platforms); player.body.velocity.x = 0; if (cursors.left.isDown) { player.body.velocity.x = -250; } else if (cursors.right.isDown) { player.body.velocity.x = 250; } if (jumpButton.isDown && (player.body.onFloor() || player.body.touching.down)) { player.body.velocity.y = -400; } // mycode if (player.body.onFloor()) { message ="Game Over!"; GameOver(message); } if (player.body.onCeiling()) { message ="You Win!"; GameOver(message); } } function GameOver() { var bar =; bar.beginFill("#FFFFFF", 1); bar.drawRect(0, 250, 800, 100); var style = { font: "bold 32px Arial", fill: "#fff", boundsAlignH: "center", boundsAlignV: "middle" }; text = game.add.text(0, 0, message, style); text.setShadow(3, 3, 'rgba(0,0,0,0.5)', 2); text.setTextBounds(0, 250, 800, 100); platforms.destroy(); player.destroy(); }
  21. Phaser

    Hey everyone, I have noob questions. I'm creating a platformer game with Phaser, as well as Tiled to create a layered JSON map. So far one of my tile layers is handling all of the inanimate object collisions via, 600, true, this.collisionLayer, false) to which I've passed indices to my entire tileset (only using one). Given that I've done this, does the number of tiles I actually create in that layer via Tiled affect performance? Would it be advisable for me to just use setCollision() or setCollisionBetween and pass only the necessary tiles that I plan on passing to that layer? My tileset is about 1/3 tiles I want to use for collision, and they're not totally organized but I can reasonable get that done if necessary. Also, what's better for performance, bigger tilesets or more, smaller tilesets. What would you consider a sweet spot for this in terms of size and number of tilesets? Note that I've already compressed my images etc and not having any performance issues so far, just taking preventative measures. Thanks for any help in advance.
  22. Phaser Scaling Question

    Hello guys, currently I'm trying to resize my game to the whole window, while centering a fixed aspect ratio game window in the center, and having padding sprites at the side, but without success. Can you tell me what I should do? Cheers
  23. Hello, Just finished my new game "Ball&Roll". It's my first attempt to use 3D assets with 2D engine. Playable link: The game is still open for exclusive licensing.
  24. 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.
  25. Development of games for Android?

    Who knows examples of successful games for android and suitable phaser framework for this?