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 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 3,004 results

  1. Help with Game States

    Hello there, I have 3 files for a phaser game an html, cs and javascript file(excluding phaser.js). I would really appreciate if someone who understands the this.blank format would help me convert to a game where I have a boot state, menu state and play state of the game. I honestly don't know how to do this, this would help me learn more and also help progress me a bit because I haven't been able to successfully transit into this.blank format although I have been given examples which I would say are way more complicated than my game and those examples were missing some parts that would have helped me that I couldn't find. code.js index.html style.css
  2. Phaser mask is a bully

    Good morning everyone! I've created my mask to let my group "symbols" drawn only if inside the mask. mask =, 0); mask.beginFill(0xffffff); mask.alpha = 0; mask.drawRect(x, y, xx - x, yy - y) mask.endFill(); symbols.mask = mask; The images who can be drawned everywhere are in the "images" group. The images in the behind the mask and the symbols in the mask are correctly rendered. The images that I want OVER the mask are still rendered behind the mask. Any ideas why or how can I fix it?
  3. Resize game for smaller screens

    I am fairly new to Phaser and have found these forums an excellent resource. I am building a game the was originally only for desktop, however now I am trying to get this working on tablets as well. The game is landscape only and is pretty much complete. It is made to run on a canvas of width 1200 x 740. I have added the below to the preload which works fine if the game loads on a resolution larger than the config width and is scaled smaller. (browser resized) However when loading on a device/browser with the screen under 1200 wide, sections of the sprites are chopped off, resizing the browser works the same but sections are still cut off. const docElement = document.documentElement const width = docElement.clientWidth > config.gameWidth ? config.gameWidth : docElement.clientWidth const height = docElement.clientHeight > config.gameHeight ? config.gameHeight : docElement.clientHeight = Phaser.ScaleManager.SHOW_ALL; = height; = width; Any help would be greatly appreciated.
  4. How to check for certain touching.down

    Hi, i'm currently woriking on a litle Phaser side scroller. My problem is, my player can jump on items such as stars, and other things. I tried it with arcade.overlap like this: if (cursors.up.isDown && player1.body.touching.down && !game.physics.arcade.overlap(player1, stars)) { player1.body.velocity.y = -700; } But it didn't work for some reason... I didn't get any errors, but I can still jump on the stars. Does somebody have a solution for this?
  5. loading a text file in phaser with typescript is trival with a simple:"reference", "url") however attempting to write or modify external text files appears to be way more complicated. I'm guessing this is for security reasons, but still don't see why there can't be a "game.write.text()" method or something similar?
  6. (posted in phaser 3 instead of the phaser forum by mistake) Hi I'm hoping someone can hep me, I'm trying to create basic map using an array with 2 different images, one is a wall, the other is a floor. I've created twp groups but when i use, this.blocks, null, this.hitBlock, this); I've used the collide function before on other games with no issues - this is my first time using a 2d array but I can't see where the issue is happening code below : cursor controls to move link example : var GameHipster = GameHipster || {}; GameHipster.GameState = { init : function() { //keyboard controls this.cursors =; this.upKey =; this.downKey =; this.leftKey =; this.rightKey =; this.actionKey =; this.PLAYER_SPEED = 400; this.BULLET_SPEED = 500; this.score = 0; }, // end init preload : function() { },//end preload //executed after everything is loaded create: function() { blockdata = [ [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,1,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], ]; this.blocks =; this.blocks.enableBody = true; this.floors =; this.floors.enableBody = true; var floor, block, i, j, col; var ROWS = blockdata.length; var COLS = blockdata[0].length; //console.log('R : ' + ROWS + ' C : ' + COLS); //console.log(blockdata[2][3]); for (i =0; i < COLS; i++) { for (j =0; j < ROWS; j++){ //col =1; col = (blockdata[j]); if (col ==0){ floor = this.floors.create( 1 + (i*64),1 +(j*64), 'block' + col); floor.anchor.setTo(0.5); } if (col ==1){ block = this.blocks.create( 1 + (i*64),1 +(j*64), 'block' + col); block.anchor.setTo(0.5); block.body.immovable =true; } } }; this.player = this.add.sprite( / 2, / 2, 'player'); this.player.anchor.setTo(0.5); this.player.scale.setTo(0.2);; this.player.body.immovable = true; //ui this.uiBlocked = false; //text var style = {font : '20pt Arial', fill : '#fff'}; this.scoreLabel = this.add.text(10,10, 'SCORE : ', style); this.scoreText = this.add.text(130,10, '0', style); this.refreshStats(); }, //executed multiple times per second update: function() { this.player.body.velocity.x = 0; this.player.body.velocity.y = 0;, this.blocks, null, this.hitBlock, this); this.keyboardControls(); }, // end update keyboardControls : function(){ //init keyboard controls if (this.cursors.left.isDown|| this.leftKey.isDown){ //this.player.angle += 5; this.player.body.velocity.x = -this.PLAYER_SPEED; } else if (this.cursors.right.isDown || this.rightKey.isDown){ //this.player.angle -= 5; this.player.body.velocity.x = this.PLAYER_SPEED; } if (this.cursors.up.isDown || this.upKey.isDown){ //thrust this.player.body.velocity.y = -this.PLAYER_SPEED; } if (this.cursors.down.isDown || this.downKey.isDown){ //thrust this.player.body.velocity.y = this.PLAYER_SPEED; } if (this.actionKey.isDown){ this.fireBullet(); } },// end function hitBlock : function(player, block){ console.log('hit'); }, endGame : function(player, enemy){'GameState'); }, refreshStats : function(){ this.scoreText.text = this.score; } }; Any help is appreciated Eric
  7. Hi, I've been learning Elixir + Phoenix for fun, after using Ruby + Sinatra for a group project. I'd like to set up a web based game, and i'm interested in using Phaser inside an Elixir + Phoenix setup. I was wondering if anyone could give me a quick debrief; I'm assuming it's possible but is it better to use Phoenix simply for launching the app? (so any calculations should be done within Javascript), or is it possible to set up most of the logic inside Elixir and be done server side (which I think would be better for avoiding hacks)?
  8. Arkham Investigator

    Hello! This is my entry for the interactive fiction horror jam Ectocomp 2017 A game made with Phaser and Ink. It ranked 1st at the Spanish Grand Guignol Ectocomp 2017 a few days ago! The game is a version of the tabletop game of the same name created by Hal Eccles in 2011. The mechanics are similar to the Sherlock Holmes Detective Consulting. It is a narrative game where you interpret an investigator who must solve eldritch cases following the clues on the locations of the map. Play the game:
  9. GoldenQuest by CodingPark

    GoldenQuest is an educational game for learning the principles of coding while having fun. Play online: The game canvas is made with Phaser. The code editor is made with and integrated in the game. Here you can see screenshots of one level, the level selector and the level editor. GoldenQuest is a much more advanced version of "the adventures of the pirate robot" that we already showcased here some months ago! Enjoy! Comments and feedback will be appreciated!
  10. Ball genius [android]

    Hello everybody! I'm proud to showcase the first game of my new compagny from france. you need accuracy and reflexion to complete all levels, each chapter brings a new element of gameplay. You can hope for gold medal if you do the less bounces possible. gold medals = new skins. i've made a website with a demo of the game: and you can download the full game for free on the play store: Ball Genius thank's in advance for playing you can mail me at:
  11. Hello, I have 2 sprite animations. Once first one is played, via below function I'm checking frame index (which frame is currently playing). When current frame is my desired frame, I want to play another sprite. animations.currentAnim.onUpdate Below is my full code: firstSprite.visible = true; firstSprite.animations.currentAnim.enableUpdate = true;'firstSprite', 14, false); firstSprite.animations.currentAnim.speed = 80; firstSprite.animations.currentAnim.onUpdate.add(function () { if(firstSprite.animations.currentAnim.frame > 5){ secondSprite.visible = true;'secondSprite', 30, false); secondSprite.animations.currentAnim.speed = 60; } }, this); On desktop in a browser it works perfectly, but on mobile devices it is being stucked and once frame is greater than 5 (if(firstSprite.animations.currentAnim.frame > 5){...}), then it stops at that frame and doesn't continue to play first sprite. Is there something I'm missing. Thanks
  12. update: function() { // game.physics.arcade.collide(turnip, background); if ( > planttime) { sprite=game.add.sprite(game.rnd.integerInRange(1000, 1000)+100, game.rnd.integerInRange(500, 600), 'atlas', "BG" + game.rnd.integerInRange(0, 2)); game.physics.enable(sprite, Phaser.Physics.ARCADE); sprite.body.immovable = true; sprite.body.velocity.x=-500; planttime=planttime+3500; game.physics.arcade.collide(turnip, background,self.collisionHandler,null,this); } }, collisionHandler:function () { console.log("collide"); },
  13. [Phaser] Santa Rush

    Hello again fellow game devs, I'm back with another game, christmas themed single button game. Check it out on the link below: Feel free to discuss the game and what you like/dislike, I'm open to any kind of criticsm. Regards!
  14. Hi, please check our new game Cyber tank. Ready to sell non-exclusive
  15. Hey guys, for all Vim users , check out my tutorial on how to use phaser with vim (includes auto-completion)
  16. [Phaser] Gumdrop Popper

    Hey all! Knocking the rust off old hobbies, including making mobile-friendly mini games, and gradually building up steam while learning new things. Here's one for the holiday seasons. Gumdrop Popper Compete against your best performance as you try to pop all the sliding gumdrops with precision in your fastest time.
  17. Hi guys! I'm developing a game with Phaser 2.6.2 and it properly works on PC desktop (every browser) and on Mac (every browser). On a 2009 Mac laptop with Safari it struggle. On iPhone SE with Safari it give an (for me) inexplicable blank page. I've connected the iPhone to the Mac and launched the web inspector... but it give me nothing, nor the message "Phaser v2.6.2 | Pixi.js v2.2.9 | WebGL | WebAudio |". I've tought that maybe a let game: Phaser.Game = new Phaser.Game(1280, 720, Phaser.AUTO, 'content', { preload: this.preload, create: this.create, update: this.update, render: this.updateRender }); was to big, so I've tried let game: Phaser.Game = new Phaser.Game(800, 600, Phaser.AUTO, 'content', { preload: this.preload, create: this.create, update: this.update, render: this.updateRender }); but I've always the blank page. Any suggestion on what can go wrong with Phaser & iPhone?
  18. We have been building an interactive, game-based test for a client of ours, and we need a developer to pick it up - starting pretty much immediately. The vast majority of the groundwork and design has been completed, and what we have is a SCORM compliant package (built within Articulate Storyline) with a traditional multiple choice course option, and then the same questions as a set of interactive games that have been developed using the Phaser framework. Knowledge of SCORM is essential for this project. Please get in touch with me if this project matches your skillset and you are available for the next 2. 5 weeks. We are based in London, UK, and our ideal scenario is that the dev would work on site, but accept that due to the short notice this may not be possible. Needs to be someone in the UK or somewhere where there is not too much of a time difference (we have a very tight schedule for this project)
  19. Hi all! Winter Sprinter is a simple Christmas themed casual endless dodging game - made with Phaser, as a Christmas promotion for Dodge icicles, collect PC parts, don't die. My top score is about 800... have at it.
  20. Habbo WebGL Game Engine

    This is strictly for educational purposes only Since Flash is pretty much being deprecated in most browsers so is Habbo. Since there's retro versions, most of Habbo's assets are available on the internet. I've been using Pixi for now to create a 2D loading screen, which I did successfully. Then it occurred to me that Pixi is mostly just a renderer, and doesn't support 3D the same way as Three or Babylon does. Problem is that, I found coding of 2D UI elements in both Three and Babylon really difficult compared to Pixi. In Habbo it's really minimal what is going to be 2.5D / 3D as only the rooms, avatars and furni are, the rest is basically 2D GUI. So this is how I've done it for now Some questions: Is Habbo; 2D with projecting, 2.5D or 3D, and would it be enough to use Pixi only? If no: Would it be possible to extend Pixi with Three or Babylon when there's going to be rendered 2.5D /3D objects? If it's truly 2D with projecting, should I just use Phaser instead? What would be best to do?
  21. In my platformer, the player has a number of different weapons (gun, energy blast, homing missile) and there may be a number of enemies (up to maybe 6) who will have one of the same weapons. From my understanding of the weapon plugin and tutorials, I should then be making a different weapon object for each of the players weapons and for each enemy. As I am wanting to attach a particle emitter to missiles I'm then going to extend the bullet class to make a missile. Question 1: I want autofire from enemies to fireAtSprite rather than just fire, I'm assuming the best way to do this is to extend the weapon class and overwrite the fire() method to call fireAtSprite() instead? Or is there a better way? Question 2: Where do I put the collision checks for the bullets? I can see a couple of options but would really like to know the performance implications as to which would be better. 1) Put an arcade collision call in the extended bullet update method to handle hitting scenery and hitting enemies - this seems neat in some ways as the code for the bullet hitting something sits with the bullet itself, however it feels like I'm going to end up with a lot of separate collision calls. 2) Put an arcade collision call in the state update along the lines of: this.enemies.forEach(function(enemy){, this.collisionLayer, this.shotCollisionLayer, null, this);, this.player, this.shotPlayer, null, this); }, this); 3) In the custom bullet constructor, add all enemy bullets to an enemyBulletsArray and collide this in the state update method, this.collisionLayer, this.shotCollisionLayer, null, this);, this.player, this.shotPlayer, null, this); Many thanks, Gordon
  22. Animation working when he want

    Hi, I use phaser 2.6.1. I have created an animation. This work fine but sometimes this not starting. I dont know why. In create() function i add animations for my spritesheet: = game.add.sprite(,500, 'car');'mover',[0,1,2,3],1000, true); = true; When overlap i start the function for animate this game.physics.arcade.overlap(, this.borders, this.canMove, null, this); This is my function },canMove: function(car, objet){ if(crash == 0){ crash = 1;"mover"); console.log("fire") setTimeout(function(){; = 0; crash = 0; },1000) } } When the car overlap a border, this function is start. The console.log() show but the animation suddenly not start. I can restart a lot of time my page, suddenly the animation not starting but the console.log() is show. Thanks for your help
  23. I am making a platformer game with Phaser 2.9.2 where the map is loaded from a JSON file and am having difficulty trying to make interactive tiles which are replaced by a new tile with a collision from a single-direction. I have found a function which allows me to control the direction of collision direction of tiles, so I am hoping to find out how to activate a function and replace individual tiles when there is the sprite and tile are overlapping. I have been thinking of adding the tiles individually in JSON with unique properties and using the .createFromObjects method, but I want every tile to have the same properties and the potential to make multiple stages. So I am hoping there is way to activate a function when the players sprite overlaps with the tile, and in the function it replaces that individual tile with another tile from the tilemap.
  24. Hello I am new to phaser and I'm having a problem with my player who seems to not be able to jump left and right but can jump up and down when I just press the jump button. Can somebody help me? //-------------------player rendering------------------------------------- this.player =, 282, 'exitar');, Phaser.Physics.ARCADE); this.player.body.gravity.y = 300; this.player.body.collideWorldBounds = true; this.player.anchor.setTo(0, 0); this.player.body.setSize(50, 100, 20, 0);; this.player.animations.add('right', [13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25], 10, true); this.player.animations.add('left', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12], 10, true); this.player.animations.add('jump_left', [26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36], 7, true); this.player.animations.add('jump_right', [37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47], 8, true); this.player.animations.add('win', [48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65], 17, false); this.player.animations.add('still', [48, 49], 2, true); //-------------------cursor settings--------------------------------------- this.cursors =; jumpButton =; left =; right =; }, update: function () {, this.groundLayer);, this.stairsLayer);, this.trash); //this.my_time(); if (state_direction) { if (left.isDown && this.player.body.blocked.down) { this.player.body.velocity.x = -100;'left'); } else if (right.isDown && this.player.body.blocked.down) { this.player.body.velocity.x = 100;'right'); } else if (jumpButton.isDown && left.isDown && this.player.body.blocked.down) { this.jumpLeft(); } else if (jumpButton.isDown && right.isDown && this.player.body.blocked.down) { this.jumpRight(); } else if (jumpButton.isDown && this.player.body.blocked.down) { this.jump(); } else if (, 744, 510) < 92) { this.player.alpha = 0;'close'), this.go, this); } else {'still'); this.player.body.velocity.x = 0; } } }, jumpLeft: function () { state_direction = false; this.player.body.velocity.y = -200; this.player.body.velocity.x = -100, this.my_time, this);'jump_left'); //state_direction = true; }, jumpRight: function () { state_direction = false; this.player.body.velocity.y = -200; this.player.body.velocity.x = 100;, this.my_time, this);'jump_right'); //state_direction = true; }, jump: function () { state_direction = false; this.player.body.velocity.y = -150;, this.my_time, this); //'jump_right'); },
  25. [PHASER] Rendering player (CANVAS)

    Hi, I'm a actually making a game using PHASER. On this game, player have to jump to escape balls rolling on the ground, like on an infinite runner. Actually, everything is working fine but the player is showed using a spritesheet divided on 128*128 resolution. The character animation running doesn't use 128 pixels on width causing the ball to collide with the player even if the player doesn't hit the ball. The player hitbox is actually configured to 128*128 but I know that in previous versions of PHASER, it was possible to render player to make his hitbox scale his skin. I didn't find this function in the actual version of PHASER. Can someone help ? Thanx in advance. For information : Phaser example on previous versions :