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

  1. ExcitedBeginner

    Running into trouble making my first game

    Hello! I'm a total beginner (both with this forum, and Phaser), so please forgive me for any mistakes. I am trying to combine two examples I found on the website. This one, and this one. I want to pause the game when pressing the 'pause' button. I'm getting the error "Uncaught TypeError: Cannot read property 'onInputUp' of undefined" in the console. I'm using Phaser 3.2.0, and I understand that the examples I found are from an earlier version, so maybe that's why it's not working? Please help! This is my code: var config = { type: Phaser.AUTO, width: 800, height: 600, parent: 'game_2', physics: { default: 'arcade', arcade: { gravity: { y: 300 }, debug: false } }, scene: { preload: preload, create: create, update: update } }; var player; var stars; var bombs; var platforms; var cursors; var score = 0; var gameOver = false; var scoreText; var game = new Phaser.Game(config); function preload (){ this.load.image('sky', 'game_2/assets/sky.png'); this.load.image('ground', 'game_2/assets/platform.png'); this.load.image('star', 'game_2/assets/star.png'); this.load.image('bomb', 'game_2/assets/bomb.png'); this.load.spritesheet('dude', 'game_2/assets/dude.png', { frameWidth: 32, frameHeight: 48 }); } function create (){ // A simple background for our game this.add.image(400, 300, 'sky'); // The platforms group contains the ground and the 2 ledges we can jump on platforms = this.physics.add.staticGroup(); // Here we create the ground. // Scale it to fit the width of the game (the original sprite is 400x32 in size) platforms.create(400, 568, 'ground').setScale(2).refreshBody(); // Now let's create some ledges platforms.create(600, 400, 'ground'); platforms.create(50, 250, 'ground'); platforms.create(750, 220, 'ground'); // The player and its settings player = this.physics.add.sprite(100, 450, 'dude'); // Player physics properties. Give the little guy a slight bounce. player.setBounce(0.1); player.setCollideWorldBounds(true); // Our player animations, turning, walking left and walking right. this.anims.create({ key: 'left', frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }), frameRate: 10, repeat: -1 }); this.anims.create({ key: 'turn', frames: [ { key: 'dude', frame: 4 } ], frameRate: 20 }); this.anims.create({ key: 'right', frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }), frameRate: 10, repeat: -1 }); // Input Events cursors = this.input.keyboard.createCursorKeys(); // Some stars to collect, 12 in total, evenly spaced 70 pixels apart along the x axis stars ={ key: 'star', repeat: 11, setXY: { x: 12, y: 0, stepX: 70 } }); stars.children.iterate(function (child) { // Give each star a slightly different bounce child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8)); }); bombs =; // The score scoreText = this.add.text(16, 16, 'score: 0', { font: '24px Arial', fill: '#fff' }); // Collide the player and the stars with the platforms this.physics.add.collider(player, platforms); this.physics.add.collider(stars, platforms); this.physics.add.collider(bombs, platforms); // Checks to see if the player overlaps with any of the stars, if he does call the collectStar function this.physics.add.overlap(player, stars, collectStar, null, this); this.physics.add.collider(player, bombs, hitBomb, null, this); /* Code for the pause menu */ var w = 800; var h = 600; // Create a label to use as a button pause_label = this.add.text(w - 100, 20, 'Pause', { font: '24px Arial', fill: '#fff' }); pause_label.inputEnabled = true; () { // When the pause button is pressed, we pause the game game.paused = true; // Then add the menu menu = game.add.sprite(w/2, h/2, 'menu'); menu.anchor.setTo(0.5, 0.5); // And a label to illustrate which menu item was chosen choiceLabel = game.add.text(w/2, h-150, 'Click outside menu to continue', { font: '30px Arial', fill: '#fff' }); choiceLabel.anchor.setTo(0.5, 0.5); }); // Add a input listener that can help us return from being paused game.input.onDown.add(unpause, self); // And finally the method that handels the pause menu function unpause(event){ // Only act if paused if(game.paused){ // Calculate the corners of the menu var x1 = w/2 - 270/2, x2 = w/2 + 270/2, y1 = h/2 - 180/2, y2 = h/2 + 180/2; // Check if the click was inside the menu if(event.x > x1 && event.x < x2 && event.y > y1 && event.y < y2 ){ // The choicemap is an array that will help us see which item was clicked var choicemap = ['one', 'two', 'three', 'four', 'five', 'six']; // Get menu local coordinates for the click var x = event.x - x1, y = event.y - y1; // Calculate the choice var choice = Math.floor(x / 90) + 3*Math.floor(y / 90); // Display the choice choiceLabel.text = 'You chose menu item: ' + choicemap[choice]; } else{ // Remove the menu and the label menu.destroy(); choiceLabel.destroy(); // Unpause the game game.paused = false; } } } } function update (){ if (gameOver) { return; } if (cursors.left.isDown) { player.setVelocityX(-160);'left', true); } else if (cursors.right.isDown) { player.setVelocityX(160);'right', true); } else { player.setVelocityX(0);'turn'); } if (cursors.up.isDown && player.body.touching.down) { player.setVelocityY(-330); } } function collectStar (player, star){ star.disableBody(true, true); // Add and update the score score += 10; scoreText.setText('Score: ' + score); if (stars.countActive(true) === 0) { // A new batch of stars to collect stars.children.iterate(function (child) { child.enableBody(true, child.x, 0, true, true); }); var x = (player.x < 400) ? Phaser.Math.Between(400, 800) : Phaser.Math.Between(0, 400); var bomb = bombs.create(x, 16, 'bomb'); bomb.setBounce(1); bomb.setCollideWorldBounds(true); bomb.setVelocity(Phaser.Math.Between(-200, 200), 20); bomb.allowGravity = false; } } function hitBomb (player, bomb){ this.physics.pause(); player.setTint(0xff0000);'turn'); gameOver = true; }
  2. newbie11

    How to add a text value

    Hi! can anyone tell me how to put some value on my "score" i already use if (playState.score <= 3){ game.add.text(20, 20, "practice more",{font: '50px Sports World', fill: '#b7e2fe'}); but it doenst work var winState = { create: function () { game.add.tileSprite( 0, 0, 1000, 490, "background3") if (playState.score >= loadState.hiscore) { loadState.hiscore = playState.score; } var hiscoreLabel = game.add.text(473, 155, loadState.hiscore, {font: '50px Sports World', fill: '#fdf59e'}); var scoreLabel = game.add.text(473, 243, playState.score, {font: '50px Sports World', fill: '#b7e2fe'});; var spaceKey = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); spaceKey.onDown.addOnce (this.restart, this); var escKey = game.input.keyboard.addKey(Phaser.Keyboard.ESC) escKey.onDown.addOnce (this.menus, this); }, restart: function (){ game.state.start('play'); }, menus: function (){ game.state.start('menu'); }, } thats my code pls help me thank you!
  3. altruist

    Issue with physics

    Hello everyone, I have the same problem like in this topic I don't understand how to set P2 Physic mode or solve this problem in other way. Please help.
  4. I'm trying to build a real-time MMO game. I'm using Phaser for FE and Node.js + for BE. I have read all the tutorials like and so on. Different players might have different FPS, this is how I update position on the client (phaser): const data = { down: this.cursors.down.isDown, timestamp: }; var deltaTime = (data.timestamp - this.lastTimestamp) / 1000; if (data.down) { player.position.y += speed * deltaTime; socket.emit('input', data); } This ensures speed is FPS independent (every player is moving with the same speed). The server is running a tick() at 60 FPS. This method is processing saved inputs from players. How should the server correct player positions? It doesn't know their delta times. It also can't use server's delta time since it would be always around 0.016 and it doesn't reflect player's update interval. tick() { var now =; var serverDelta = (now - this.prevTimestamp) / 1000; this.prevTimestamp = now; for (var player of players) { player.update(); } } player.update() { for (input in savedInputs) { player.y += input.down * speed; } }
  5. Hemanthraj

    how to load custom font

    How to load custom font i need to use daft lowercase font instead of down below, var tiles =, this.tileHeight); tiles.ctx.font = '30px Arial';
  6. newbie11

    how to loop

    how can i loop my background and make it like it move going to left??? thank you!
  7. Barak Inbal

    Create Simple Multiplayer

    Hey I want to create a simple Tic Toe Multiplayer Mobile game using phaser 2. The game need to support the following modes: Multiplayer between 2 anonymous players Multiplayer between 2 google account players Multiplayer between 2 facebook account players I have the following questions: How can I implement this? using websockets or pooling? Do I have to use inroder to implement websocket communication between 2 mobile players? Which other libraries do I can use for creating moblie multiplayers between 2 players? Thanks in advance Barak Inbal
  8. I am developing a game where my player has to look to see forward when I am pressing right arrow key. But how can I make it look reverse after pressing left arrow? I can create a sprite of reverse look but how can load that while pressing left and at the same time forward player should be destroyed?
  9. real2412

    Kid Rat, Game platform clasic

    Hi guys, I share a litle game that I did in my free time the link is the following: I also converted it into apk with cordova, although it is a version in Spanish and I have no idea how to remove the cordova icon. In case you want to see it look for it in google play as "KidRat". It is open source you can check it in the following link: Greetings.
  10. I'm trying to create platforms for my player to jump onto and also make collectible stars. I can create these sprites using functions, but I don't know how to make physics work on them so that the character can jump on the platforms and overlap with the stars. The problem is that the physics portion doesn't work when I call it in the update function. I am also not using tilesprites, so it can't work that way. create: function() { addStar(star1); }, update: function() { removeStar(star1); } addStar(name) { name = game.add.sprite(1700, 550, 'star'); name.anchor.setTo(0.5, 0.5);, Phaser.Physics.ARCADE); name.body.collideWorldBounds = false; name.enableBody = true; name.body.immovable = true; } removeStar(name) { if (game.physics.arcade.overlap(character, name) == true) { name.destroy(); updateScore(); } }
  11. maninduw

    Using Phaser for FB Instant Games

    Hi, I am planning to develop a game for Facebook Instant Games platform using Phaser. Should I choose Phaser 3? or should I continue with Phaser 2 ? Is there a huge difference in the APIs of both version? . I would highly appreciate your opinion on this. Best Regards
  12. Does anyone know how to pass data into the game scene in Phaser 3 as you could do in Phaser 2 when started a state? game.state.start('Game', true, true, { data: 'this is some initial config' }); Phaser 3 Scene was Phaser 2 State, which you could provide parameters, the 2-3rd was as i remember caching, the 4th could be and data, which became available in the State's init() {} method as init({data}). In Phaser 3 a Scene has a second, data param, but it is not clear how it is used, the init method is not getting it, and the documentation is not ready for that as far as i know.
  13. Hemanthraj

    how to make bingo game using phaser

    Hello everyone Im new to phaser, i need to make bingo game So please share your knowledge.
  14. As the opportunity to submit an HTML5 game to instant games is open now, I want to convert some of my most interesting HTML5 games to be played in messener. Facebook published a very good sample, I wonder, is there Phaser 3 or Phaser 2 specific instant game sample?
  15. MrBalling

    Mr. Balling

    Hi Everyone, I just released a game made with Phaser 2 called Mr. Balling. Used cordova to deploy it to Android and iOS. It is a simple arcade game that is supposed to be a throwback/retro arcade game. You bounce around on the screen and when you hit a ball you orbit it, once you tap on the screen you fly off. The objective is to stay alive in the middle of the screen bouncing from ball to ball, while avoiding red balls and the left and right sides of the screen. Feel free to leave feedback or thoughts about the game, I'm new to game development, but hope to keep doing it. Apple iOS App Store: Android Google Play Store: More info on the game. I came up with this idea about 10 years ago and had actually made working copies in python a few times, using pygame and kivy, but once I got into phaser I fell in love, it was super easy to get stuff working right away. As mentioned I packaged it up with cordova. I'm a Mechanical Engineer, not a software engineer, so sites like this were instrumental in figuring out how to get phaser to do what I wanted it to do. I used Piskelapp to do all of the assets. I used beepbox to make the music. It was fun having do figure out everything that goes into releasing something like this. Obviously as you can see it is a pretty simple premise for a game. However, I plan to make a sequel extending the game mechanic more. Also tried to make a pseudo dev-log, still under construction, but you can find more info at Screenshots of the game, title screen and several screenshots during the game as well as gameover screen. I did high score tracking using firebase.
  16. Balamurugan

    Create Roulette game

    This is the Demp - Hai, Am a beginner for phaser, i want to create a phaser roulette game. it is possible to create game like us. (physics, animation, tween) These option are there in phaser. but still i don't know where to begin this game. which one is best. Please share your instruction, I need lots of instruction, for spin wheel like demo. Please share your knowledge. Thanks lot..
  17. Loonride

    Coding in One Week

    Check out my new video about my one week project with JavaScript and Phaser!
  18. I had a problem, wanted to ask for help here, solved it and thought to post it here for future reference and help others. I found this solution through trial and error while browsing older topics on the subject on html5gamedevs (thanks to all the guys who posted them) and some other sources. PROBLEM: How to load a custom font in Phaser without using bitmap fonts and how to make it display Cyrillic, Turkish, French and other "non-english languages". SOLUTION: 1)Create the required folders. I'm using an Assets folder next to index.html and that's where everything should be. Create a Css folder and a Fonts folder inside Assets folder (Assets/Css and Assets/Fonts). 2)Create a css file inside the Css folder called "fontLoader.css" and use the following settings (obviously use your preferred font and name it accordingly but be careful at the url path - it's one of the reasons I struggled to get it working in the first place) @font-face { font-family: "peace_sans"; font-style: normal; font-weight: 400; src: url("../Fonts/peace_sans.otf"); } 3)Place your .ttf or .otf font inside the Fonts folder. Make sure the name from the code above coresponds to the name of the font. In my case I've put the file peace_sans.otf inside the Fonts folder. 4)Open the index.html file inside your favourite text editor and add a link rel line pointing to your css file <!DOCTYPE html> <html> <head> <link rel="stylesheet" type = "text/css" href = "Assets/Css/fontLoader.css"> <title>My Game</title> <script type="text/javascript" src = "Assets/Scripts/phaser.js"></script> <script type="text/javascript" src = "Assets/Scripts/boot.js"></script> <script type="text/javascript" src = "Assets/Scripts/play.js"></script> </head> <body> </body> </html> 5)Now you're all set but if you try using the font in your game it won't work because it will have to be preloaded in some way. There are 2 well known hacks - first it's to create an html element using the custom font and put it somewhere out of sight. I do prefer the second approach because it involves less html/css tinkering. Here it is (thanks html5gamedevs user who's name I cant remember): Add text in in a game state that happens before your play game state - in my case I've used the boot game state. Notice the line containing - it creates a 1px text using the custom font I need and it doesn't matter because it won't be visible and the boot phase it's very quick anyway: var bootGame = function(game){}; bootGame.prototype.create = function(){ console.log("Booting game"); game.physics.startSystem(Phaser.Physics.ARCADE); game.state.start("loadGame"); game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; //, -651, 900, 1131); game.stage.backgroundColor = "#007f5f"; //fps game.time.advancedTiming = true; //HACK TO PRELOAD A CUSTOM FONT, 0, "hack", {font:"1px peace_sans", fill:"#FFFFFF"}); } bootGame.prototype.preload = function(){ } Now I can simply call in my play game state the following and it will work using my custom font: var style = {font: "55px peace_sans", fill: "#eeeeee"};,0,"My Custom Font Works", style); 6)Now the final issue - displaying characters that are not english - like cyrillic, turkish etc. First you'll have to check if the font supports them - you can see this from the website where you download it (Font Squirrel has a nice feature to search fonts by supported languages) - in my case Peace Sans (the custom font I'm using) supports russian. Let's try and change the text to "игра" - which means game in russian. var style = {font: "55px peace_sans", fill: "#eeeeee"};,0,"игра", style); But the text will show some mumbo jumbo characters like this: Why oh why? You won't believe it but it's because of the encoding of the .js file where you're calling your code from. On my system changing the encoding of the .js file to Unicode will display the russian text correctly There are a couple of ways to do this. First you can simply open the .js file in Notepad (yup, the good old windows notepad) and Save As - then choose an encoding from the encoding drop down menu - Unicode in my case. In case you're wondering why is it grey it's because I'm using a custom Windows Theme. The second way it's addressed specifically to Sublime Text 3 users. So sublime text will save text files by default in UTF8 which will display bad characters. To correct this you'll have to choose File > Save with Encoding > UTF 16 LE with BOM - it's the one that works and displays characters correctly.
  19. NicoA

    [WIP] Bugs with GUNS

    Hello! I want to show the first 5 lvls of my second phaser game (v2.6.2), here is a picture of it: And the link: It work in PC and cell phones. It is a little laggy in some android devices. I will be great if you can test it and tell my what you think. Thanks!
  20. Hello all, My name is Alexander and I am a professional HTML5 game developer from St Petersburg.I'd like to present you my new HTML5 game HyperDiver: It is a dungeon crawler game in a minesweeper style with role-playing elements (collect loot and upgrades system) in a space setting. The game is also available on Google Play, in popular Russian social network and on some online games portals. The game was developed with Phaser framework. Server side was implemented as REST API with PHP+MySQL: leaderboards, ratings, registration, authorization There are lots of game-design ideas still not implemented because of the lack of resources. And I learned a lot while working on this project. I've improved my skills as a game-designer and as a programmer also. There were lots of difficulties in the working process and the current minimalistic and simple version means that more than 50% of the implemented features were removed at all. I'm novice in a game marketing and I don't exactly know how to promote my game so I don't monetize it now. If you are publisher and you think that this game has future, I will be glad if you help me to publish and promote it together as partners. I can modify the game in accordance with your request: add more features or implement any possible API. Making a game even so simple like mine is a great journey and I wish everybody to have this kind of experience! Good luck to all! Regards, Alexander
  21. Am using phaser 3 es6. i don't know how to use smartfox server api. How to import sfs api. Please share your knowledge. Thank you..
  22. rhysperry111

    Destroying characters

    I have a game and am trying to destroy a character. When I use it just says
  23. Amberalex

    Fire weapon via loop

    Hello. I am using phaser weapon plugin and want fire in forEach loop: var weapon = game.add.weapon(10, 'bullet'); enemies.forEachAlive(function(enemy){ if( == 'p1'){ player.rotation = game.physics.arcade.angleBetween(player, ednemy); weapon.fireAtSprite(enemy); } }); If I have 5 enemies in a row, and only 3 if them have name = p1, after executing this code, player sprite is rotate to the last enemy, but there is only one bullet. What can I do here?
  24. Amberalex

    Set bullet property

    Hello. I am using function and I want to set special property for bullet, that apear after calling this function. I tried to use forEach: weapon.bullets.forEach(function(bullet){ if( == undefined){ bullet.taget = 'prop1'; return; } });; but this does not work.
  25. I started working on game, which I would like to publish on Android and ios market. How I can set resolution or scale game to most popular devices? I found on google that the most popular resolution is (480, 320) var game = new Phaser.Game(480, 320, Phaser.CANVAS); I test my game (sample asstes) on Asus Zenphone GO (resolution: 720 x 1280 pixels) and this is how it looks (white space on top and sides). How developers scale their games to fit all phones?