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
    • Facebook Instant Games
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 3,299 results

  1. Hey everyone, I want to add different buttons with 2 different clickevents. If I add one button it works, if I add another one it doesn't. The Images and sounds are in my Preloader file and i tested them, so they work and aren't the problem. Any Solutions? Thank you! Game.Level0_5 = function(){}; var frido; var back; Game.Level0_5.prototype = { create:function(game){ back = this.add.sprite(,, 'hauptkirche'); back.scale.setTo(1.335,1); back.anchor.setTo(0.75, 0.5); frido = this.add.sprite(,, 'frido2'); frido.scale.setTo(0.5,0.5); frido.anchor.setTo(2.0, 0.67); this.createButton(game, " Das ist die Hauptkirche.\n \n Die Hauptkirche wurde 1085 erbaut.\n Bis zur Reformation war sie katholisch \n und wurde danach \n im Jahr 1560 evangelisch. \n Im Dreißigjährigen Krieg (1618-1648) \n wurde die Kirche zerstört \n und musste neu gebaut werden. \n \n Frage: \n Wann wurde die Hauptkirche zerstört? ", +266, + 155, 268, 900.0,); var button = game.add.button(,, 'aki', function() {'correctanswer'); this.state.start('Level1'); }, this, 0, 1, 2, 3); button.anchor.x = .5; button.anchor.y = .5; button.input.useHandCursor = true; }, var btn = game.add.button(,, 'bki', function() {'correctanswer'); this.state.start('Level1'); }, this, 0, 1, 2, 3); btn.anchor.x = .5; btn.anchor.y = .5; btn.input.useHandCursor = true; }, update: function(){ }, createButton:function(game, string, x, y, w, h, callback) { var button1 = game.add.button(x, y, 'button1', callback, this, 2, 1, 0); button1.anchor.setTo(0.5, 0.6); button1.width = w; button1.height = h; var txt = game.add.text(button1.x, button1.y, string, { font: 'bold 14px palatino linotype', fill: '#0000000', align:'center', wordWrap: true, wordWrapWidth: 600 }); txt.anchor.setTo(0.5, 1.5); } };
  2. The Issue Text object is getting cut-off / cropped at the top and sometimes on the bottom, when using a custom font with a narrow width. (screenshot attached) The fonts in question work correctly in every other environment, and even work with HTML canvas and the regular getContext method of adding text. So i'm fairly positive the issue is isolated to Phaser using HTML canvas. Possible Cause I think issue is most likely happening due to the way Phaser/PIXI calculates the height of text from the width of letters. Possibly using the width of the widest letter and assuming the height? I tried to work out what the source code is doing. Current Workaround The only workaround i've found is rebuilding the font and adding a wide margin to each letter (so the letter boundaries are more 'square'), then in Phaser splitting a Text object into individual Text objects for letters and calculating their position based on letter width, and manually subtracting a value to change the letter spacing. But even splitting and repositioning doesn't work that well (with any font, not just thin fonts) i have to calculate separate margins for even thinner letters like 'I', 'i', or 'l', or wide letters like 'm' and 'w'. I would rather not use BitmapText as i need to use different font sizes. Solutions Has anybody else encountered this issue? Found a solution or a better work-around? Thanks.
  3. So i'm trying to switch scenes when a tween is complete, however i get the titular error 'Cannot read property 'start' of undefined' , and i don't know why this is... Here's the code: class StartScreen extends Phaser.Scene{ constructor(){ super({key: "StartScreen"}); } preload() { this.load.image('Logo', 'assets/Logo.png'); this.load.spritesheet('background', 'assets/backs.png' , { frameWidth: 480, frameHeight: 320 }); } create() { this.anims.create({ key: 'stars', frames: this.anims.generateFrameNames('background', { start: 0, end: 127 }), repeat: -1 }); this.add.sprite(1024/2 , 400, 'background').play('stars', true).setScale(2.5); this.logo = this.add.image(1024/2 , 300, 'Logo').setScale(2); this.text = this.add.text(320, 450, 'Push Enter', { font: '50px NES', fill: '#FFF'}); this.enter = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.ENTER); } update(){ if(this.enter.isDown){ this.text.destroy(); this.enter = ''; this.tweens.add({ targets: this.logo, y: 150, duration: 2000, onComplete: this.onCompleteHandler }); } } onCompleteHandler(){ this.scene.start('MainMenu'); } } class MainMenu extends Phaser.Scene{ constructor(){ super({key: "MainMenu"}); } preload() { this.load.image('Logo', 'assets/Logo.png'); this.load.spritesheet('background', 'assets/backs.png' , { frameWidth: 480, frameHeight: 320 }); this.anims.create({ key: 'stars', frames: this.anims.generateFrameNames('background', { start: 0, end: 127 }), repeat: -1 }); this.add.sprite(1024/2 , 400, 'background').play('stars', true).setScale(2.5); this.add.image(150 , 300, 'Logo').setScale(2); } create() { } }
  4. Doug

    Hi Rich.  @rgk mentioned that you might be able to please add a "patron" badge to my forum profile?  Thanks very much!

  5.;; var wallCollisionGroup =; var playerCollisionGroup =; var doorCollisionGroup =;; // I've created all the necessary collisions as in expamle: and it works perfect. player.body.collides(wallCollisionGroup); player.body.collides(doorCollisionGroup, wrongDoor, this); cursors =; } wrongDoor() { player.body.velocity.x = 0; player.body.velocity.y = 0; //player.body.setZeroVelocity(); //player.body.velocity.x = -20000; //player.body.velocity.y = -20000; //player.body.static = true; result = 'You last hit: The wall :)';'Message', 'text'); } update() { player.body.velocity.x = 0; player.body.velocity.y = 0; if (cursors.left.isDown) { player.body.velocity.x = -300; } else if (cursors.right.isDown) { player.body.velocity.x = 300; } if (cursors.up.isDown) { player.body.velocity.y = -300; } else if (cursors.down.isDown) { player.body.velocity.y = 300; } } Hello. I'm making a game where player have to reach the right door and created all the necessary collisions and it works almost perfect, except the call back function wrongDoor. I want to create a dialog line when player collides wrong door and make his velocity = 0 while dialog line is on screen, but I can't. Every time player colldes the door dialog line displays on screen but the player sprite still moves. How can I make him stop on collision with door? All the //commented stuff I've tried and it didn't help. I tried to add this function in Update function but it triggers wrongDoor all the time and displays dialog line again and again from the start of the game. I've tried set velocity = -20000 but it doesn't set -20000 velocity, like it doesn't see the player. On screenshots I press up and right buttons so character moves up and right after wrongDoor triggers.
  6. kleepklep

    Seamless Audio Loops in Phaser

    I'm working on a game with seamless background music and figured I'd share my findings to help others. I'm just using Phaser's standard'', 0, 1, true) code to play loops. (Have since discovered I can also use sound.loopFull()). I didn't want to mess with outside solutions like seamlessLoop.js, which I'm not sure would work across all browsers anyway. Here's the run down on the file formats: OGG - Good for seamless loops in Firefox and Chrome. M4A - Good for seamless loops in iOS. When I first posted this I thought that I was stuck using the Apple Lossless codec (lossless = huge file sizes) because when I used any other M4A generating codec the resulting audio had blank space added at both ends. I wound up using the fre:ac open source audio converter which adds information for gapless playback according to its developer, who was extremely responsive and helpful (Thanks Robert!). Sure enough, the audio played seamlessly on my iPad with much smaller files. MP3 - Not good for seamless loops, but needed for IE. Even if your MP3 has no silence on either end, when the sound is done playing there will be a small audio gap before it loops. There are some techniques like the ones here that seem promising, so if I can overcome this issue I will post the code. Good for all other use cases because all browsers support it and it has the smallest file size of the three formats when exported with reasonable quality settings. So here's what I'm using to load my seamless loop audio. M4A is in a separate conditional because when I put it as the first option Firefox would load it instead of falling back to OGG and not play the sound. I'm loading all my other sounds as MP3s (in a different code block - not shown) to keep my total file size as low as possible. // load seamless intro audio loadLoop('musicIntro', 'intro_music_loop'); function loadLoop(key, file) { if (game.device.iOS || game.device.macOS) {, ['sounds/' + file + '.m4a']); } else { // Firefox and Chrome will use OGG // IE11 will fall back to MP3, which will have a small gap at the end before replaying, ['sounds/' + file + '.ogg', 'sounds/' + file + '.mp3']); } } Hope someone finds this helpful
  7. Is web camera access is possible in phaser 3? If yes. Any one can, please provide me a sample code. How to use webcam.js plugin with phaser 3 game, To access the system web camera.
  8. Oliver77

    [phaser]Solitaire Jump it!

    Hi, I made a simple logic game, soon as App too. I want to publish it, does anyone have a good tip? The graphics could be better, am I right? Thanks for any feedback! Play it :
  9. Evening Guys Im working on a game for an iso platform that houses several games. This platform handles the loading of assets and sends them back to my game as base64 assets. Im loading in 3 different types of assets: *XML *Sound *TextureAtlas my questions are these: 1) how can i load and play an audio file recieved as a base64 string? 2) how can i load and create a new XML object from a base64 string? 3) how can i create a game.load.atlasXML from base64 strings? any help or notch in the right direction is appreciated. thanks
  10. I would like to show you the game I am working on: It is a multiplayer shooter 2D (platformer) similar to old games like Liero, Soldat or Worms (a little). Game is written in html5 (Phaser 2) and now has not many features now. Playing: - moving soldier: W, A, S, D (can be changed in settings) - aiming & shoting: mouse (mobile playing is not finished yet) It would be great if you could write me what do you thing about it or maybe what problems do you have with the game.
  11. Rock Cat

    Nano Niels - Match 3 game

    Hi guys I just wanted to share a match 3 game i made with phaser last year. There are 40 levels no 'pay to win' and its quite difficult. Kind regards Niels
  12. kenneth12

    [WIP] Phaser Puzzle Bobble

    Hello everyone this is my first post on this forum. I wanted to share the Puzzle Bobble clone (gameboy version) I made with Phaser, ES6, and webpack. I tried to make the stages similar to the original series. Currently there is a total of 50 stages but I plan to add the rest of the stages if I can find them on the internet. I also drew all the sprites in photoshop. Hope you guys enjoy it!
  13. Titus

    Emitter Rotation Question

    Hi, I'm having some trouble with my emitter that is used as spray particles for a fire extinguisher. I've set the emitX and emitY to position relative to the player's front arm and set the emitter.rotation = frontArm.rotation. The problem I'm having is that when the arm rotates the particle's emit location is moved. I've attached some screenshots and code to show what I mean. I'm sure it is something simple that I'm missing but I've searched on the forums for quite a while and can't seem to find a solution. Any help would be appreciated. FireSim.test = { create: function() { = "#d36a6a"; this.waterSpray =, 0);// (x, y, max particles) this.waterSpray.makeParticles('whiteParticle', '', 5000, true, false); this.waterSpray.maxParticleScale = 5; this.waterSpray.minParticleScale = 1; this.waterSpray.flow(1000, 100, 50, -1, false); this.waterSpray.minParticleSpeed.setTo(400); this.waterSpray.maxParticleSpeed.setTo(800); this.waterSpray.setYSpeed(-30, 30); this.waterSpray.gravity = 0; this.frontArm =, 100, 'frontArm5'); }, update: function() { if( < 1) //only move the arms towards the mouse angle if it is less than 1. This prevents erratic movement when the mouse pointer is positioned behind the player { this.frontArm.rotation =; } this.waterSpray.emitX = + 270; this.waterSpray.emitY = + 160; this.waterSpray.rotation = this.frontArm.rotation; if ( { this.waterSpray.on = true; } else { this.waterSpray.on = false; } }, };
  14. Play Cool Math

    Math Number Challenge

    Math Number Challenge In this game, you need be finding figures for speed. It looks quite easy for the first time. However, at every level new tasks appear complicating the search for numbers. In the game, you will learn figures in the decimal system. You will find out how to count to 10 with Roman figures. Moreover, you are going to learn to quickly search for figures matching the sides of the dice. Some figures (in complex levels) are represented as arithmetic expressions and you will have to calculate the amount or difference before to choose the right number. Play Online Version Play iOS Version Play Android Version

    [Phaser] Mondo Hop

    Introducing Mondo Hop, a bouncing side-scrolling platformer. Please try it out. GAME FEATURES: Addictive quick-paced gameplay, beautiful 3d modeled graphics, original sounds and music, and smooth performance on both mobile and desktop. TO PLAY: Use the bottom on-screen buttons or the arrow keys to move. Bounce from platform to platform (some of which are moving) without falling. Jump on the springs for a boost. Make it to the end before time runs out and try to collect all the coins along the way. There are 64 progressively harder levels in all. PLAY AT: All feedback is welcome. Developed with Phaser.
  16. Hi everyone, I just wanted to share a new Phaser Plugin called phaser-tilemap-plus, that extends the tilemap loader and factory to support tile animations defined in the Tiled editor. It also allows you to implement collision detection against the map using polygons and rectangles within an object layer, enabling the use of sloped and curved surfaces. It will eventually also support custom properties and region-based events via the object layer. You can access and build the library from GitHub or install it directly as a Node package via NPM. Please note that it is still a work in progress, with features that are yet to be added and kinks to iron out. Anyhow, let me know what you think!
  17. I have an idea of how I want to spawn obstacles for my endless runner game; what I want to do is spawn them randomly on the right and move them towards the left hand side of the screen. And once they are out of bounds of the screen, I want to kill them. But I need some help figuring out how to write the function that would do this. So far I've made a title screen, and the basic "treadmill" structure of the endless runner with player movement. var game = new Phaser.Game(820, 360, Phaser.AUTO); var mainMenu = function(game) {}; mainMenu.prototype = { preload: function() { //preloading assets game.load.atlas('sprites', 'assets/img/spritesheet.png', 'assets/img/sprites.json'); }, create: function () { // background this.background =, -30,, 390, 'sprites', 'background'); this.background.autoScroll(-100, 0); // ground this.background =, 310,, 60, 'sprites', 'ground'); this.background.autoScroll(-200, 0); // player this.player = this.add.sprite(30, 253, 'sprites', 'bunny'); this.player.animations.add('run', Phaser.Animation.generateFrameNames('bunny', 4, 5, "", 4), 10, true);'run', 10, true); // logo this.splash = this.add.sprite(, - 40, 'sprites', 'logo'); this.splash.anchor.setTo(0.5); }, update: function () { if ( {'gamePlay'); } } }; var gamePlay = function(game) {}; gamePlay.prototype = { preload: function() { //preloading assets game.load.atlas('sprites', 'assets/img/spritesheet.png', 'assets/img/sprites.json'); }, create: function () { // physics engine; = 2000; // background this.background =, -30,, 390, 'sprites', 'background'); this.background.autoScroll(-100, 0); // ground this.ground =, 310,, 60, 'sprites', 'ground'); this.ground.autoScroll(-200, 0); // player this.player = this.add.sprite(30, 253, 'sprites', 'bunny'); this.player.animations.add('right', Phaser.Animation.generateFrameNames('bunny', 4, 5, '', 4), 10, true);'right', 10, true); // physics on sprites[this.player, this.ground]); this.ground.body.immovable = true; this.ground.body.allowGravity = false; this.player.body.collideWorldBounds = true; //add spacebar for jump this.jumpButton = this.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); }, update: function () { // look for collisions between sprites, this.ground); //add arrow keys for movement var cursors = this.input.keyboard.createCursorKeys(); //reset player velocity this.player.body.velocity.x = 0; //moving right if (cursors.right.isDown) { this.player.body.velocity.x = 90;'right'); } else if (cursors.left.isDown) { this.player.body.velocity.x = -90;'right'); } // jump if (this.jumpButton.isDown && (this.player.body.touching.down)) { this.player.body.velocity.y = -800; } } }; var gameOver = function(game) {}; gameOver.prototype = { preload: function() { //preloading assets game.load.atlas('sprites', 'assets/img/spritesheet.png', 'assets/img/sprites.json'); }, create: function () { console.log('create'); game.stage.backgroundColor = '#4488AA'; //click to start text - 100, + 80, 'Click to return to main menu', { font: "30px Raleway"} ); }, update: function () { if ( {'mainMenu'); } } } game.state.add('mainMenu', mainMenu); game.state.add('gamePlay', gamePlay); game.state.add('gameOver', gameOver); game.state.start('mainMenu'); sprites.json
  18. Hello! I'm glad to present you our new game called "ChopChop" - link It was never published before, so both exclusive and non-exclusive licenses are available.
  19. smdool

    init parameters is undefined

    In Phaser 2.7.5 I'm trying to pass an object as a parameter from one state to another but the object is showing as undefined. Below is the code from GameState whereby I'm looking to pass an object containing a score, time and seconds. "Congratulations", true, false, { score: this.killedGerms, time: this.timeLabel.text, seconds: this.remainingSeconds }); Below is the CongratulationsState where the parameter, "data", is coming through as "undefined". init: function(data) { console.log('data', data); data = data || { score: 0, time: "00:00", seconds: 0 }; } Any ideas on where I have gone wrong would be greatly appreciated.
  20. I recently finished my first game with Phaser in just under 2 months. Its a 2D action / bullet-hell style shooter with a story, made using Phaser. You can play it here: SUPER STARKILLER 3000 I also wrote about what I learned in a retrospective you can read here: Or check out the source GitHub: Thanks for taking a look!
  21. mazoku

    Big Bubble Pop

    Phaser bubble shooter game with specials. Small simple game made in my free time. Play Game: Big Bubble Pop

    [Phaser] Cubxer

    Hello everyone. I'd like to introduce Cubxer, a cube stacking match-3 puzzle game. Please check it out at the link below. GAME FEATURES: Beautiful 3D modeled graphics and animations, cool music and voice effects, and endless ever-challenging levels. Works well on both desktop and mobile. HOW TO PLAY: At each turn you control a dropping column of colored cubes. You can move and reorder the column using either the mouse or keyboard: LEFT/RIGHT-A/D keys or left/right swipe to move cubes left/right UP-W key or up swipe to reorder cubes DOWN-S key or down swipe to move down fast Make color matches with cubes at the bottom. Matches are made when 3 or more colors line up vertically, horizontally or diagonally. Make enough matches and you advance to the next level. Let the cubes stack to the top and the game is over. Try to match as many cubes as possible each turn. PLAY AT: Feedback is greatly appreciated. Developed with Phaser. Music by Eric Matyas.
  23. GideonSam

    Box2D FPS drop in Mobiles

    Hi All, I have been developing a box2D game in Phaser 2, it works fine in the Desktop browsers. When comes to the Mobiles the FPS drops. There are only three sprites in the stage, one static body and a dynamic body. Please kindly help. Thanks, Gideon
  24. Since Phaser is a web framework, we the developers, have a choice between drawing GUI (Menus, inventory screens, buttons etc) on the canvas or use built in browser elements with all the functionality and response and just connecting it to the game engine. What would you recommend? Drawing and handling clicks on canvas is a little harder, but if there are any sound benefits to that I would love to know. Thanks
  25. GideonSam

    Brush tool in Phaser

    Hi All, I have been working on a Simple paint app for kids. I have a problem in implementing the simple brush tool. Im getting small dots and line here there in the screen Unable to draw on free hand movement like a brush. kindly help. playGame.prototype = { preload: function () { }, create: function () { game.stage.backgroundColor = '#222222'; game.input.onDown.add(this.onStageDOwn, this); game.input.onUp.add(this.onStageUP, this); }, onStageUP: function () { game.input.deleteMoveCallback(this.paints, this); }, onStageDOwn: function (pointer, x, y) { graphicsMC =; graphicsMC.lineStyle(2, 0xffd900, 1); graphicsMC.moveTo(pointer.x, pointer.y); game.input.addMoveCallback(this.paints, this); }, paints: function (pointer, x, y) { graphicsMC.lineTo(pointer.x, pointer.y); } };