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

  1. I have encountered very strange firefox way of multi-line text rendering. Some of the text appears like it has minimal line-height, while other text sprites render normally (see attachment) And if user reloads page - everything start working just fine, but still works wrong if user restarts firefox and then loads page. I can't see any significant difference between right and wrong rendered texts in the way I create text sprites. Had anyone experienced something like this? Any ideas how to fix it? Code for the badly rendered sprite: this.dialogPhrase =, - 110, dialog.text, { font: '18px Russo One', fill: '#222222', wordWrap: true, wordWrapWidth: 820 }); Code for the well rendered sprite: const nextMenuItem =, nextY, item.text, { font: '16px Russo One', fill: '#222222', wordWrap: true, wordWrapWidth: 280 });
  2. Hello, is there any way to complete current tween in the timeline and then remove following tweens? I'm inserting tweens like this: tweens.push({ targets: this.sprite, x: { value: 50, duration: 1000 }, y: { value: 50, duration: 1000 } }); this.tweens.timeline({ tweens }); Then after some event I need to finish current tween and clear all following (if any). This seems to stop tweens: this.tweens.killAll(); but I can't find anything to finish current tween at first. Thanks
  3. angeltrickz

    multiplayer collision

    for (var i in Game.playerMap) { for (var e in Game.weaponMap) { game.physics.arcade.collide(Game.playerMap[i], Game.weaponMap[e].bullets,Game.colision(i), null, this); } }; Game.colision = function(id){ //console.log(id); //Client.socket.emit('colision',"colision"); }; I want to make collisions and send them via socket to the server ... but for now I have a problem because it constantly sends me collisions without detecting between the shot and the enemy .. any ideas?
  4. Hemanthraj

    How to smooth tween animation

    How to smooth the tween animation in the android devices.
  5. 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!
  6. Hello everyone! TLDR; I'm trying to get the plugin 'phaser-input' (made by Orange Games) to be loaded and running properly in a webpack + ES6 style environment. I'm fairly new to the phaser game dev environment, and I really like how someone has created a boilerplate project that has ES6 style coding enabled [ phaser-es6-webpack]. But I think phaser2 by default was never meant to be coded in this style, with importing dependencies from a package manager; you are suppose to load the library and any plugins in the index.html's header area via script tags, so that it can do it's thing with the global namespace. (I didn't realize this until I got too far ahead in development) In my project, I have added to the webpack.config.js file to make the plugin 'phaser-input' ES6 compatible, and importable into my project. // webpack.config.js const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); // Phaser webpack config const phaserModule = path.join(__dirname, '/node_modules/phaser-ce/'); const phaser = path.join(phaserModule, 'build/custom/phaser-split.js'); const pixi = path.join(phaserModule, 'build/custom/pixi.js'); const p2 = path.join(phaserModule, 'build/custom/p2.js'); const phaserInput = path.join(__dirname, '/node_modules/@orange-games/phaser-input/build/phaser-input.js'); module.exports = { mode: 'development', entry: { app: ['babel-polyfill', path.resolve(__dirname, 'client/src/main.js')], vendor: ['pixi', 'p2', 'phaser', 'phaser-input', 'webfontloader'], }, output: { pathinfo: true, path: path.resolve(__dirname, 'client/build/js'), publicPath: './js', filename: '[name].js', }, devServer: { contentBase: path.resolve(__dirname, 'client'), }, watch: true, plugins: [ new HtmlWebpackPlugin({ filename: '../index.html', template: './client/src/index.html', chunks: ['vendor', 'app'], chunksSortMode: 'manual', minify: { removeAttributeQuotes: false, collapseWhitespace: false, html5: false, minifyCSS: false, minifyJS: false, minifyURLs: false, removeComments: false, removeEmptyAttributes: false, }, // hash: false, }), ], module: { rules: [ { test: /\.js$/, use: ['babel-loader'], include: path.join(__dirname, 'client/src') }, { test: /pixi\.js/, use: ['expose-loader?PIXI'] }, { test: /phaser-split\.js$/, use: ['expose-loader?Phaser'] }, { test: /p2\.js/, use: ['expose-loader?p2'] }, { test: /phaser-input\.js$/, use: ['exports-loader?PhaserInput=true'] }, ], }, node: { fs: 'empty', net: 'empty', tls: 'empty', }, resolve: { alias: { phaser, pixi, p2, 'phaser-input': phaserInput, }, }, }; The documentation recommends that the plugin be added using [ game.add.plugin(PhaserInput.Plugin); ] But I've seen other plugins use [ game.plugins.add(PhaserInput.Plugin) ]. I have this snipped added to my game state file. (the other code has been removed for clarity) import Phaser from 'phaser-ce'; import PhaserInput from '@orange-games/phaser-input/build/phaser-input'; export default class Game extends Phaser.State { preload() {; } } The documentation simply shows the use of the plugin using the snipped [ var input = game.add.inputField(10, 90); ]. Where the function 'inputField' has been added to the framework. This is where I get stuck, the plugin function (inputField) that is suppose to be added never actually gets added at all to [ game.add ]. This in results in an error. import Phaser from 'phaser-ce'; export default class FormOverlay extends Phaser.Group { constructor({ game }) { super(game); this.testInput = game.add.inputField(10, 90); } } Is there a proper way of loading plugins in this webpack + ES6 style? I've wasted an afternoon trying to figure out how to get this plugin to work, I must be missing something here. If you know the answer to this issues, I would greatly appreciate if you can share the answer. Thanks for reading!
  7. Hey all, I'm using tween for my game in the android device it is too lacking and slowly working tween, then i tried with physics both too slow how to solve.
  8. angeltrickz

    help problem hitarea

    how can I define the hit area of a single bullet and a sprite
  9. syed samoon

    Remove the layout of physics editor

    Hi Everyone, i'm using physics editor software for apply p2 physic in phaser. i will apply the JSON in phaser game.load.physics('Physics', 'assets/sprites/newSize.json'); but i will get this layour in my png how to hide the marked area of the JSON
  10. Thunderfist

    Property 'width'

    I can't figure this out. My game code keeps saying that it can't read the property 'width' of undefined. There's nothing my code declaring a property width. Most of the locations are different lines in the phaser.js, but two of them are in the game.js: game.js lines 25, and 32. Line 25 is this.loadLevel(); and line 32 is = this.add.tilemap(this.currentLevel); Here's the code: /*global Phaser*/ var RPG = RPG || {}; RPG.GameState = { init: function (currentLevel) { //Needed to keep track of the level this.currentLevel = currentLevel || currentLevel === 'testroom1'; //movement speed constants this.PLAYER_SPEED = 150; //no gravity in top down games = 0; //keyboard cursors for input this.cursors =; }, preload: function () { //'terrain'); }, create: function () { =; this.loadLevel(); }, update: function () { }, loadLevel: function () { //create the tilemap object = this.add.tilemap(this.currentLevel); //Join the tile images to the .json data'terrains', 'terrain'); //create tile layers this.backgroundLayer ='backgroundLayer'); //this.collisionLayer ='collisionLayer'); //set background to the back of screen; //Collision Layer... if only I made it earlier //, 16, true, 'collisionLayer'); //resize the world to fit the layer //this.collisionLayer.resizeWorld(); }, gameOver: function () {'Game', true, false, this.currentLevel); } }; What do I do to fix this issue? I only have a month until my project is due!
  11. SirFizX_ELHS

    Huntin and Fishin

    This is something I put together this afternoon for my students to play with. Live demo.
  12. Hexone

    Black Screen every time.

    Hello, I have start to use phaser 3, i have setup all the basic things and follow some tutorial, but every time i use phaser 3 on my local or my web server, i have this : The code : My local file : If you can help me ^^ I thinks is just a things i don't get or something.. Thanks you.
  13. Infamous Flames

    Fire Hungry About [Fire Hungry] Fire Hungry is a friendly, fun 2d shooter io game. Play as your favourite snack and burn up others with your powerful rapid flames with a simple mouse click. Players must strive to reach the highest score! Have fun! Fire Hungry was created by Infamous Flames How to Play [Fire Hungry] Unlock a character or use the default skin. Type in a name of a choice and click the blue play button to start. Move your player around the mouse. Click to shoot. [Fire Hungry] Strategy Moving your player carefully with the mouse will make dodging fire bullets a lot easier from other players.
  14. Hi all, Could you help how i can stop detecting collision between two sprites after detecting?, this.animal, this.stopanimzwierz, null, this); After collision i have function which is stop moving sprites, but sprites still staying in collision so i am not possible to start next function which is moving those sprites. Could you help me to find solution? In simple way i want to stop sprites, stop collision between them to move it again with automatically function.
  15. Hi, I have built a mini games app in Adobe Air (in iOS and Android). It features lots of swf animations and lots of games. Now since the future of Adobe Air is circumspect. I want to hedge my bets by rebuilding the games in another platform which has a better future outlook. I had a few questions: 1) Which platform is better for building an app- OpenFL or Phaser ? I found OpenFL online which seems to be the best way to port flash games into html5. 2) Can I have a multi platform app in which suppose 100 games are there - 50 made in Phaser and 50 made in OpenFL? 3) I had read in one website that Phaser is not good for resolutions above 600x400 px. Is this true? 4) Since we want to support all resolutions in Android and iOS- we need vector graphics (the core strength of AIR). Do Phaser/CoreFL support Vector? Thanks, Nish
  16. Hemanthraj

    how to make number tiles

    How to make number tiles with colors for example: array[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]; I need to show into these box
  17. 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; }
  18. 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!
  19. Hi there. Does anyone had a pleasure to build a Facebook Instant Game? I've spent two days trying to scale my Phaser game in the Facebook for Android. Currently scaling works nicely on desktop, in a responsive viewport of the dev console, in the mobile Chrome -- namely everywhere, except the Facebook app. Seems like it just ignores my settings, sprites are displayed at full width, despite the canvas (and game) dimensions are correct. Here are my init and boot scripts, the scaling logic is copypasted from a random gist: // init code FBInstant.initializeAsync().then(function() { FBInstant.setLoadingProgress(50); FBInstant.setLoadingProgress(100); FBInstant.startGameAsync().then(function() { /** Config part */ var FIXED_SIZE = 720; var FIXED_MEASURE = 'Width'; /** Name mapping */ var fixedName = FIXED_MEASURE; var resName = fixedName === 'Height' ? 'Width' : 'Height'; var FIXED_NAME = fixedName.toUpperCase(); var RES_NAME = resName.toUpperCase(); /** Measures of document */ var documentElement = document.documentElement; var documentFixed = window['inner' + fixedName]; var documentRes = window['inner' + resName]; var ratio = documentRes / documentFixed; /** Canvas measures */ var canvasFixed = FIXED_SIZE; var canvasRes = FIXED_SIZE * ratio; var screen = {}; screen['CANVAS_' + FIXED_NAME] = canvasFixed; screen['CANVAS_' + RES_NAME] = canvasRes; console.log(screen.CANVAS_WIDTH); console.log(screen.CANVAS_HEIGHT); game = new Phaser.Game(screen.CANVAS_WIDTH, screen.CANVAS_HEIGHT, Phaser.CANVAS); game.state.add('Boot', Boot); game.state.add('Preload', Preload); game.state.add('GameTitle', GameTitle); game.state.add('Main', Main); game.state.add('GameOver', GameOver); //Start the first state game.state.start('Boot'); }); }); // boot code var Boot = function(game) {}; Boot.prototype = { preload: function() { }, create: function() { this.scale.scaleMode = Phaser.ScaleManager.EXACT_FIT; this.scale.pageAlignHorizontally = true; this.scale.pageAlignVertically = true;;"Preload"); } } Would appreciate any help!
  20. 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.
  21. Thunderfist

    Map not appearing

    My game isn't loading the map I made using tiled. The file, testroom1.json, is called properly, but something in my game.js is keeping the game from loading the map itself. var RPG = RPG || {}; RPG.GameState = { init: function (currentLevel) { //Needed to keep track of the level this.currentLevel = currentLevel || currentLevel === 'testroom1'; //movement speed constants this.PLAYER_SPEED = 90; //no gravity in top down games = 0; //keyboard cursors for input this.cursors =; }, create: function () { this.Game.onscreenControls =; this.loadLevel(); }, update: function () { }, loadLevel: function () { //create the tilemap object = this.add.tilemap(this.currentLevel); //Join the tile images to the .json data'tileset', 'tilesheet'); //create tile layers this.backgroundLayer ='backgroundLayer'); //this.collisionLayer ='collisionLayer'); //set background to the back of screen; //Collision Layer... if only I made it earlier //, 16, true, 'collisionLayer'); //resize the world to fit the layer //this.collisionLayer.resizeWorld(); }, gameOver: function () {'Game', true, false, this.currentLevel); } }; I never made the collision layer. I plan on doing that AFTER getting the map to appear first. Does anyone have any advice on how to tackle this?
  22. newbie11

    how to loop

    how can i loop my background and make it like it move going to left??? thank you!
  23. 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';
  24. Hey folks, New version of Phaser CLI is here: Phaser CLI is based on the latest versions of Create React App and vue-cli, and is designed to provide a zero-config setup for your Phaser projects. Getting started: npm install -g @phaser-cli/cli # or yarn global add @phaser-cli/cli phaser create my-project cd my-project npm start # serves your project at localhost:8080 npm run build # builds for production Currently implemented: Basic template with Babel support Linting with Standard Webpack 4 Webpack Dev Server Ability to eject from Phaser CLI Coming soon™️: Support for additional templates (e.g TypeScript, CoffeeScript) Support for multiplayer games via More linting options (e.g ESLint, ESLint + Standard, ESLint + AirBnB) Add some tests into the templates Integrate Travis/AppVeyor for automated testing/deployment of Phaser CLI And likely a few other things yet to be decided. Phaser CLI is still a work in progress (read: bugs!) so please yell if you're having any issues. Any contributions to the code and other suggestions are very much appreciated 🙂
  25. 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.