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,969 results

  2. Creature Dragon example is not working.

    The main.html file. <!doctype html> <html> <head> <meta charset="utf-8" /> <link href="{{ root }}/app.css" rel="stylesheet" type="text/css"> </head> <body> <div class="flex-basic flex-row"> <div class="flex-1"></div> <div class="flex-basic flex-column"> <div class="flex-1"></div> <div id="phaser"></div> <div class="flex-1"></div> </div> <div class="flex-1"></div> </div> <script src="{{ node_modules_root }}/node_modules/phaser-ce/build/phaser.js"></script> <script src="{{ node_modules_root }}/node_modules/phaser-ce/build/custom/creature.js"></script> <script src="{{ node_modules_root }}/node_modules/phaser-ce/build/custom/p2.js"></script> <script src="{{ node_modules_root }}/node_modules/phaser-ce/build/custom/phaser-arcade-physics.js"></script> <script src="{{ node_modules_root }}/node_modules/phaser-ce/build/custom/phaser-creature.js"></script> <script src="{{ node_modules_root }}/node_modules/phaser-ce/build/custom/phaser-minimum.js"></script> <script src="{{ node_modules_root }}/node_modules/phaser-ce/build/custom/phaser-no-physics.js"></script> <script src="{{ node_modules_root }}/node_modules/phaser-ce/build/custom/phaser-split.js"></script> <script src="{{ node_modules_root }}/node_modules/phaser-ce/build/custom/pixi.js"></script> <script src="{{ root }}/bunch_of_functions.js"></script> <script src="{{ root }}/decorators.js"></script> <script src="./app.js"></script> </body> </html> The app.js. var game = new Phaser.Game(800, 600, Phaser.WEBGL, 'phaser-example', { preload: preload, create: create }); function preload() { game.load.image('sky', 'assets/background.png'); game.load.image('dragonTexture', 'assets/dragon_character_texture.png'); game.load.json('dragonMesh', 'assets/dragon_character_mesh.json'); } var dragon = null; function create() { game.add.image(0, 0, 'sky'); dragon = game.add.creature(450, 350, 'dragonTexture', 'dragonMesh'); dragon.scale.set(25.0);; // true = loop } Error: pixi.js:76 Uncaught TypeError: PIXI.Point is not a constructor at Phaser.Stage.PIXI.DisplayObject (pixi.js:76) at Phaser.Stage.PIXI.DisplayObjectContainer (pixi.js:904) at new Phaser.Stage (phaser-split.js:9193) at Phaser.Game.boot (phaser-split.js:13780) at Phaser.Device._readyCheck (phaser-split.js:40872)
  3. Confusion with multipler Timers

    From what I can understand there is only one global 'timer' in phaser. This has presented a problem for my game which involves several one-shot timers for the intro. I would like to iterate over a block of text with a timer, based on the one I found in the examples for multi-timer. Then I would like to spawn additional one-shot timers for objects. The problem is, having timers outside of functions appears to be impossible. Meaning timers can only modify and existing timer within a function. The end result is tons of nested timers launching timers and duplicating content, which is a mess. What I would like is: 1) First timer controls the text 2) Second timer controls the images 3) Additional images/text controlled by specific timers. 4) Destroy all timers and blank the canvas, begin the game. Here's what I have so far, which duplicates each function so much it causes my alpha background to turn into a solid! Source: Clearly I am lacking an understanding of phaser timer logic, so I've resorted to posting here in hopes someone understands. I've already researched the API and the forums, still don't get it...
  4. Hi, I am currently having an issue where my alpha tween on my game isn't working as I expected. I set the tween to happen over 5 seconds however it seems to only take a fraction of the time and ignores the time. Here is my code: var box =,0); box.alpha = 0.1; box.moveTo(0, 0); box.beginFill(0x000000); box.drawRect(borderSide, borderTop, ( - borderSide * 2),; box.endFill(); var fadeTween ={ alpha: 1 }, 5000, "Linear", true); fadeTween.onComplete.add(this._end_game, this); You can see my video attached below for an example of this in action. Thanks, Jamie alpha.mp4
  5. Hello everybody. Need your help with Tiled Map Editor. I had a set of tiles, I updated it with another one in which there is a new tile, but when I add it to the map, another one is displayed instead, and so with some tiles. tried all tiles and a new one was not found Who faced the similar? how to fix the problem?
  6. Create a game

    Hello, I appeal to you because I run out of time. I'm following a course and I need to create a game (simple) that makes use of device accelerometer, the course is done with Phonegap, created with HTML, CSS, JAVASCRIPT and use PHASER, preferably the physics engine. If you can help me. Thank you very much
  7. Set positions of elements of array

    Hi. I'm new at programming and Phaser and i need a bit of help. Im having array of sprites, and i need to set each one of the elements on different position on my game. Can you tell me how can i do that with some short example pls?
  8. Let say, with `sprite.animations.add("run");` I add an animation to an AnimationManager object. How can I see what animations are already there? Looking through, it is actually in `sprite.animations._anims` but it is listed as an object that cannot be read systematically (for example, `sprite.animations._anims[0]`).
  9. Hello, I'm following a course with Phonegap and I have almost no time to study, if I do not do the project, I lose everything I invested. The problem is that I have to create a game (simple) created in javascript and make use of accelerometer, Phaser with its physics engine. If you can help me with a simple example. Thank you very much to all. a greeting
  10. const ASSETS:string = "./assets"; // Simple game. class SimpleGame { phaser_game:Phaser.Game; constructor () { this.phaser_game = new Phaser.Game( 800, 600, Phaser.AUTO, "phaser", { create: this.create, preload: this.preload } ); } create () { let piplup_sprite:Phaser.Sprite = this.phaser_game.add.sprite(,, "logo" ); piplup_sprite.anchor.setTo(0.5, 0.5); } preload () { let piplup_sprite_path:string = ASSETS + "/piplup.png"; console.log(this.phaser_game); // Undefined? this.phaser_game.load.image("logo", piplup_sprite_path); } } window.onload = () => { let simple_game:SimpleGame = new SimpleGame(); }; I suppose the title is self-explanatory. I used Phaser with vanilla JavaScript before. Decided to learn TS but I got stuck why the `this.phaser_game` is undefined, while it is clearly defined in `constructor`?
  11. Generally when you click or tap a button on mobile devices and then don't do mouse-up or lift touch on the same button and do it elsewhere the action is cancelled. But the Phaser buttons don't behave like that. Do the mouse-down on the button, drag and do the mouse-up outside the button, the button-click is still triggered. Is there a way to fix/change that behaviour? PS: I just tested that when you use the event.onInputUp on sprite etc, it is still fired when the onInputUp happens outside the object.
  12. Phaser/Cordova/Webpack(ES6)

    I created a quickstart application that I hope would be useful to some of you. It is a Phaser 2.8.8 quick start application that incorporates Webpack (ES6), and Cordova. It supports iOS and Android out of the box, along with all default Phaser supported web browsers. The code is on Github and is licensed under Apache V2. Enjoy!
  13. Game object within a game object

    Two classmates and I are trying to build a Tetris RPG in which clearing a row gives you mana, which can be used to cast damaging spells at the enemy. Basically, your typical puzzle RPG mobile game, except you get to choose your attacks and when to do them. We started out by building a vanilla Tetris game in the main game state file. Once that was finished, we tried creating a Tetris class to put all of that logic into. Then, we ran into a problem: we can't use the Phaser methods (e.g., creating sprites, detecting key presses) in the Tetris class, so we had to leave some functions behind in the game state file. What is the most elegant solution to this? Could we have a Tetris game object running within a more general 'battle' game that would also handle the enemy and player logic? Or is there some other way to use Phaser methods in a JS class?
  14. I got stuck. I need to inherit Phaser.Game to extend the game class functionality. class Game extends Phaser.Game { constructor() { super(arguments); } getSomeLogic() { // new game method } } Then within Boot state i scale the game. class Boot { preload() { this.load.image('background', 'assets/background.jpg'); } create() { = Phaser.ScaleManager.SHOW_ALL; this.add.sprite(0, 0, 'background'); } } For this point all works as expected. But, when i add new sprite it scales wrong. Sprite is cropped by scaled game bounds. ( look at example screen ) Guys, what i am doing wrong?
  15. I've just released a huge update to Infinite Japanese, a little game I made a few months ago about learning Japanese while playing games in space! This update added 18 more categories, 5 more difficulties, and completely changed the gameplay, making learning easier. Japanese: Also available in Korean:
  16. I'm trying to port my game to mobile using ludei's cocoonjs. When playing my game in a browser, (in chrome, Edge, FF), the audio in the game works fine. Opening the game in the Cocoon Developer App (using the Cavas+ option), none of audio is found. I get errorr such as: Phaser.Cache.getSound: Key "Orcs" not found in Cache. All the audio files are in my preload state i.e."Orcs", ["assets/sounds/Orcs.mp3"]); And again, all the audio works fine in a regular browser. Anyone else run into this issue and have a solution? One more note - the audio does work when using the Webview option in the Cocoon Dev App. However, I'd rather use the Canvas+ since everything I read said that's the better option for html5 games all contained within a canvas. Thanks!
  17. Hi there, I'm Alexander the CEO of SOFTGAMES. Based in Berlin, the creative capital of Europe, SOFTGAMES is the world’s largest producer and distributor of HTML5 games. We’re delivering fun to millions of users every month across 6 continents on the device of their choosing. Our vision is to help users to instantly discover and engage with games they like, while helping brands to reach their target audiences. We're Facebook Instant Games launch partner (plus several other messengers and social networks) and are now looking for a super-talented, self-motivated and passionate Senior Game Developer to join us. At SOFTGAMES you have the chance to join a small team of super talented people to build awesome HTML5 games using Phaser that will entertain millions of people. The position is full-time and based in our Berlin office. The Senior Game Developer role is responsible for building great games from beginning (prototyping) to the end (launch). You will work closely with artists and game producers to deliver a great player experience and with other Game Developers to share learning and best practices. The successful candidate will ship robust and high performance code, is proactive, and act as a fount of knowledge when it comes to game development. As part of a small game team you will enjoy a creative, challenging and collaborative environment and are expected to have the entrepreneurial spirit with a “getting things done” attitude. Interested? Then I'm looking forward to your application ( or PM me your CV! Best, Alexander
  18. Resize method not firing? At all?

    Hey, I'm kind of stuck trying to work out what's happening with my game. I've been having issues getting my game responsive, so I tried... well, everything I can think of, really. I've brought my game all the way down to four near-empty files; boot.js, preload.js, menu.js and app.js, and I'm getting nothing on resize events. I'm using Phaser 2.6.2, I've got "this.scale.setMode = Phaser.ScaleManager.RESIZE" in my boot.js's init function, I've got a resize handler in my menu just titled 'resize' with nothing but "console.log('resize')" inside of it, and nothing happens on resize. I don't understand at all. I found a guide someone put together that has really similar architecture to my project ( and even looking at that person's game.js in dev tools and comparing against my game, I can't see how we differ (outside of me keeping my various methods in separate files) or how I've screwed up. Resize just plain doesn't fire on my project, even when it's as simple as logging something to console. Note: I'm able to get other things to log to console just fine, it's just that the resize method doesn't do what it's supposed to do. I'd like to be able to show the whole code for my project if possible, but I fully understand why that's not - if it helps, I can stick all my barebones stuff into a single file and huck it up on jsbin or something similar. Still - does anyone have any clue where I could start looking as to why setting my ScaleManager to RESIZE doesn't fire my resize command?
  19. I'm trying to port my game to mobile using ludei's cocoonjs. When playing my game in a browser, (in chrome, or Edge), the audio in the game works fine. Opening the game in the Cocoon Developer App (using the Cavas+ option), none of audio is found. I get errorr such as: Phaser.Cache.getSound: Key "Orcs" not found in Cache. All the audio files are in my preload state i.e."Orcs", ["assets/sounds/Orcs.mp3"]); And again, all the audio works fine in a regular browser. Anyone else run into this issue and have a solution? Thanks!
  20. Hi guys! First time poster here. I wanted to share my upcoming HTML5 mobile game, Pocket City. Screenshot: Animated Gfycat link: - Thanks so much to PhotonStorm for creating Phaser! I've been using it for a year and a half on this game and it has been a blast to work with. My goal is to create a mobile city building game that has the depth and gameplay of traditional desktop city builders, but with a modern mobile interface. My plan is to release for iOS and Android, then if things go well, perhaps PC. Here's some links if you guys want to stay updated: Blog: Twitter: Facebook: Instagram: Youtube: Thanks for taking a look!
  21. I'm working on a game that switches through various states for the menu, main game and game-over screens. for the most part I'm happy for antialiasing to be used on my sprites and particularly my text, as forcing a crisp pixelated render on the whole game can lead to some of the text & sprites looking a little janky. I'm instantiating my game pretty simply: ` = new Phaser.Game(800, 600, Phaser.AUTO, 'game');` I'm not setting any scale modes or special rendering prior to playing the game. In the Game Over state I'm loading a small pixel image I created, and adding some bitmapText to the top of the screen. I'm scaling the pixel image up by a factor of 6, and the bitmap text is set at 32px. On both of these, I set `smoothed = false`, because I wanted both the text and the sprite to appear pixel-perfect, and because I use FF by default (which uses WebGL by default), it will usually smooth out sprites unless explicitly told otherwise. It looks like this: var gameOverText =, 0, 'FFF', 'GAME OVER', 32); gameOverText.anchor.setTo(0.5); gameOverText.x = Math.floor( / 2); gameOverText.smoothed = false; var skull =, 0, 'atlas-sprite', 'skull'); skull.scale.setTo(6); skull.anchor.setTo(0.5); skull.x = Math.floor( / 2); skull.y = Math.floor( / 2); skull.smoothed = false; Here's where it gets weird: if I jump straight from my BootState (which is always loaded before everything else) to my GameOver state, it works perfectly - text and sprite look nice and crisp. However, if I actually go through the game (so, go from BootState to GameState to GameOver state), it doesn't work at all - text is blurry and the sprite looks awful. I've managed to narrow it down to the point at which I start adding sprites: // this.levelData is a previously-loaded JSON map this.parallax =; this.levelData.parallax.clips.forEach(function(element) { var parallax = this.parallax.create(element.x, element.y, 'atlas-sprite',; }, this); (it's worth noting that these loops create sprites way outside of the camera's viewport, as the game is scrolling) If I add `this.state.start('GameOverState')` and return out of the function prior to this loop, my text & sprite in the GameOver state remain perfectly pixelated; if I move `this.state.start('GameOverState')` to after that first loop (or at any point after this), it's as if all of the smoothing arguments are ignored. I've tried a LOT of different methods to try to fix this, but nothing is working. I figured it might be something to do with the world bounds, or the camera position, or the game antialiasing, but nothing seems to work. Any ideas on why this might be happening and how to get around it?
  22. Found some unnecessary calculations

    Not sure if here's the best place for this but since it is not a bug etc I avoided opening an issue on github I stumbled upon some odd rotation code in phaser while reading From src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js and src/pixi/display/Sprite.js // Rotate matrix by 90 degrees // We use precalculated values for sine and cosine of rad(90) a = a0 * 6.123233995736766e-17 + -c0; b = b0 * 6.123233995736766e-17 + -d0; c = a0 + c0 * 6.123233995736766e-17; d = b0 + d0 * 6.123233995736766e-17; Ok. Some rotationcode with fancy precalculated values. But: the value given in e-notation is 0.00000000000000006123233995736766 and therefore effectively zero. Which makes sense since this was meant to be the precalculation of cos(rad(90)) - which equals exactly to zero. I suppose the literal resulted from a rounding error when someone typed Math.cos(Math.radians(90)) into a console So a better version would be: // Rotate matrix by 90 degrees a = -c0; b = -d0; c = a0; d = b0; Maybe someone sees this and is willing to fix it on the side...
  23. I've finished porting my Snake Slider puzzle game using Phaser. >> Snake Slider playable demo << It's a unique sliding puzzle game. The goal is to move the green snake to the exit. You can slide any snake by dragging them by their head or tail. Use as few moves as possible to earn all three coins. There also are apples and mushrooms that will make the snakes longer or shorter, blocks to push around and locks to unlock. The game also features hand-drawn graphics and multi-language support. It's based on an older iPhone/Android game, this is the JavaScript version which is completely re-written. It's powered by Phaser and it's slightly improved compared to the older version; it has an animated tutorial hand, a visible cursor, sound effect when moving, and overall more animations (menus, buttons etc). Let me know what you think. Can you can solve all levels?
  24. My player will not move

    Every time i put the create cursor in it gives this eror: Uncaught TypeError: Cannot read property 'index' of undefined at c.Animation.updateCurrentFrame (phaser.min.js:19) at (phaser.min.js:19) at (phaser.min.js:19) This is the code i'm using: var game = new Phaser.Game(1200, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); function preload() { game.load.image('sky', 'asset/sky.png'); game.load.image('ground', 'asset/ground.png'); game.load.image('burger', 'asset/burger.png'); game.load.spritesheet('dude', 'asset/dude.png'); } var player; var platforms; var cursors; function create() { game.physics.startSystem(Phaser.Physics.ARCADE); game.add.sprite(0, 0, 'sky'); platforms =; platforms.enableBody = true; var ground = platforms.create(0, - 50, 'ground'); ground.scale.setTo(5, 5); ground.body.immovable = true; var ledge = platforms.create(700, 400, 'ground'); ledge.body.immovable = true; ledge = platforms.create(-100, 250, 'ground'); ledge.body.immovable = true; player = game.add.sprite(32, - 150, 'dude'); game.physics.arcade.enable(player); player.body.bounce.y = 0.2; player.body.gravity.y = 300; player.body.collideWorldBounds = true; player.animations.add('left', [0, 1, 2, 3], 10, true); player.animations.add('right', [5, 6, 7, 8], 10, true); cursors = game.input.keyboard.createCursorKeys(); } function update() { game.physics.arcade.collide(player, platforms); player.body.velocity.x = 0; if (cursors.left.isDown) { player.body.velocity.x = -150;'left'); } else if (cursors.right.isDown) { player.body.velocity.x = 150;'right'); } else { player.animations.stop(); player.frame = 4; } if (cursors.up.isDown && player.body.touching.down) { player.body.velocity.y = -350; } }
  25. Uncaught TypeError in my first app.

    Hello everybody I write my first application, add physics for my player, add cursors , input keyboards. En error you will see on the screenshots. var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'gameDiv'); var spacefield; var backgroundv; var player; var cursors; var mainState = { preload: function(){ game.load.image('starfield', "assets/starfield.png"); game.load.image('player', "assets/player.png"); }, create: function(){ spacefield = game.add.tileSprite(0, 0, 800, 600, 'starfield'); backgroundv = 5; game.add.sprite(, + 200, 'player'); game.physics.enable(player, Phaser.Physics.ARCADE); cursors = game.input.keyboard.createCursorKeys(); }, update: function(){ spacefield.tilePosition.y += backgroundv; if(cursors.left.isDown){ player.body.velocity.x = -350; } if(cursors.right.isDown){ player.body.velocity.x = 350; } } }; game.state.add('mainState', mainState); game.state.start('mainState'); Whats wrong?