Search the Community

Showing results for tags 'phaser3'.

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 121 results

  1. Hexone

    Black Screen every where

    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.
  2. Hemanthraj

    How to detect if tab is not active

    How to detect if current window tab is not active in the phaser
  3. 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
  4. hey all, I have a question about separation of logic I hope someone can answer. simple scenario: I have a scene called "level1" and another one "level2", for obvious reasons I wouldn't want to write all the player logic in both of these ( jumping, animation, audio etc) What is the suggested way in Phaser 3 to pass in the player class in to let's say Level1? importing it? using the scene manager? Help is appreciated, thanks
  5. Hello there! I recently published a very simple game called Coin Runner on my repository. It is written in Typescript and uses the newest version of Phaser 3 (3.3.0). Coin Runner It might be helpful for the ones who are new to Phaser 3 and want to learn the basics. In the future I will write a small tutorial for it and more games will come. Feedback is very welcome! Greetings,WizaEric
  6. blackhawx

    Getting Started with Phaser 3

    Hello! I am absolutely new to Phaser. I would like to get grounded in Phaser 3 sense its the new movement. With that said, would anyone have any recommendations on where to get started in building my very first Phaser 3 game? I really want to get my feet wet with Phaser 3 best practices, coding for my first game, and best environment setups I should take advantage off. Any resources you recommend will be appreciative. Thanks!
  7. 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.
  8. I do not find the error in this code anyone help me please. I'm doing a topdown game but I can not get the camera to follow the sprite player.... Sorry if I'm doing something wrong! this.Camera.follow (player, Phaser.Camera.FOLLOW_TOPDOWN); this does not work ! do not open anything; When I remove it everything works normal var config = { type: Phaser.CANVAS, width: 1920, height: 1080, physics: { default: 'arcade', acarde:{ //gravity:{ } debug: false } }, scene: { preload: preload, create: create, update: update } }; var game = new Phaser.Game(config); function preload () { this.load.image('ground', 'images/ground-smart.png'); //pedras this.load.image('stone1', 'images/stone-1.png'); this.load.image('stone5', 'images/stone-5.png'); //flores this.load.image('flor1', 'images/flor1.png'); this.load.image('flor2', 'images/flor2.png'); this.load.image('flor3', 'images/flor3.png'); //player this.load.spritesheet('player1', 'images/p-anim.png', { frameWidth: 128, frameHeight: 90 }); } function create () { this.add.image(960, 540, 'ground'); this.add.image(64, 430, 'stone1'); this.add.image(650, 80, 'stone5'); flores = this.physics.add.staticGroup(); flores.create(400, 350, 'flor1'); flores.create(220, 90, 'flor3'); player = this.physics.add.sprite(400, 300, 'player1'); this.Camera.follow(player, Phaser.Camera.FOLLOW_TOPDOWN); this.anims.create({ key: 'left', frames: this.anims.generateFrameNumbers('player1', { start: 1, end: 7 }), frameRate: 6, repeat: -1 }); this.anims.create({ key: 'turn', frames: [ { key: 'player1', frame: 0 } ], frameRate: 20 }); this.anims.create({ key: 'right', frames: this.anims.generateFrameNumbers('player1', { start: 1, end: 7 }), frameRate: 10, repeat: -1 }); cursors = this.input.keyboard.createCursorKeys(); this.physics.add.collider (player, flores); } function update () { if (cursors.up.isDown) { player.setVelocityY(-160);'left', true); } else if (cursors.down.isDown) { player.setVelocityY(160);'right', true); } else { player.setVelocityX(0);'turn'); } if (cursors.up.isDown && player.body.touching.down) { player.setVelocityY(-330); } }
  9. In Phaser 2, there was a simple parameter you could set to disable antialiasing/smoothing, but i cannot disable it in Phaser 3. I assumed it should be in the config object like this, but it did not work: const config = { width: window.innerWidth, height: window.innerHeight, parent: 'canvas', type: Phaser.AUTO, physics: { default: 'arcade', arcade: { gravity: {y: 0}, debug: true } }, scene: [ Preloader, Game ], antialias: false }; const game = new Phaser.Game(config); Is there another way to disable it? I found "game.config.antialias" in the phaser.js file, but i tried with "false" and "0", nothing worked. I also found it in the WebGLRenderer.js file and it looks like it should be a boolean - but still, it did not work. I tested it with <canvaselement>.getContext('webgl').getContextAttributes().antialias and the value is always true.
  10. Pau


    Hello! How do you check if an object is out of the world bound using Phaser3? I am looking for this Phaser3 equivalent code: block.checkWorldBounds = true;, this); block is an image: block = this.physics.add.image(dropPos, 100, 'c'+aleatorio).setInteractive(); block.setVelocity(0, 200); Thanks!
  11. AdamRyanGameDev

    Feedback on Mobile Performance

    After seeing this recent post I just wanted to ask how others are fairing with mobile browser performance. Also wondered if Phaser3DevTeam would benefit from hearing good and bad news from a variety of devices/browsers/OS's, because it is particularly difficult to test on multiple scenarios....
  12. Hi all I'm using Angular4 with Phaser 3 beta 20. I need to have separate classes for the Game Scenes so that I can use different game scenes any time I wish. I need to be able to call a function in the parent component that affects the parent component variables. This is probably a totally newbie question so please forgive me, but it's stumped me for the moment on how the scope works. Please see the following code: import { Component } from '@angular/core'; import Phaser from 'phaser'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { phaserGame: Phaser.Game; carrot: any; preloadStatus: string = "Preloading"; config: any; gameScene: Phaser.Class; getScene() : any{ return { Extends: Phaser.Scene, initialize: function GameScene(config) {, config); }, preload: function () { this.load.image('carrot', 'assets/carrot.png'); console.log("Phaser game loading done"); this.FromInGame(); }, create: function () { this.carrot = this.add.image(400, 300, 'carrot'); }, update: function () { this.carrot.x += .2; } } } constructor() { let theScene = this.getScene(); theScene.FromInGame = this.FromInGame; this.gameScene = new Phaser.Class(theScene); this.config = { type: Phaser.CANVAS, parent: 'phaser-example', scene: this.gameScene }; this.phaserGame = new Phaser.Game(this.config); } FromInGame() : void{ console.log("called from in game"); this.preloadStatus = "Preload DONE!"; } } I need the FromInGame() function to be fired from the Scene's preload() function, which it is. However, in the FromInGame() function "this" clearly references the Scene because "theScene.FromInGame = this.FromInGame;" is setting it as a function on the Scene. Therefore when executing "this.preloadStatus = "Preload DONE!";" it adds a property preloadStatus with a value "Preload DONE!" to the Scene and rather than updating the this.preloadStatus in the Angular component. Any ideas how I would achieve this please? Thank you very much in advance. D
  13. Hi everyone, I'm running into a weird bug. I'm working on a very tiny display game (128*100) with a tiny 4x4 tilemap (with 8x8 tiles in it, I don't know if it could be the problem) and a small 16x16 sprite with some tiny bounds on it , and this is the heart of my problem. Also, I'm on a retina mac, maybe the resolution is a problem here. here is my full code: var config = { type: Phaser.CANVAS, width: 128, height: 100, zoom: 5, backgroundColor: '#2d2d2d', parent: 'phaser-example', pixelArt: true, physics: { default: 'arcade', arcade: { gravity: { y: 250 }, debug: true } }, scene: { preload: preload, create: create, update: update } }; new Phaser.Game(config); let map; let cursors; let player; let floorLayer; function preload () { this.load.spritesheet('rick-stand', 'gfx/rick_Stand.png', { frameWidth: 16, frameHeight: 16 }); this.load.image('lev1_8x8', 'levels/one/8x8.png'); this.load.tilemapTiledJSON('level1-1', 'levels/one/level1-1.json'); } function create () { cursors = this.input.keyboard.createCursorKeys(); map = this.add.tilemap('level1-1'); const smallTiles = map.addTilesetImage('lev1_8x8'); floorLayer = map.createStaticLayer('floor', smallTiles); floorLayer.setCollisionByExclusion([ -1 ]); player = this.physics.add.sprite(15, 41, 'rick-stand'); this.physics.add.collider(player, floorLayer); this.cameras.main.startFollow(player); player.setSize(8, 12, false); player.setOffset(5, 4); } function update (time, delta) { player.body.setVelocityX(0); if (cursors.left.isDown) { player.body.setVelocityX(-22); } else if (cursors.right.isDown) { player.body.setVelocityX(22); } if (( || cursors.up.isDown) && player.body.onFloor()) { player.body.setVelocityY(-100); } } nothing fancy I guess, not the setSize command, which causes a bug. Here, the width of the body of my sprite is 8 (because I want my 16x16 sprite to 'fall' into small 8px width hole) Here is the bug, the sprite "jump" backward randomly you can test that here (the game is zoomed 5x, but with no zoom, the bug is the same) If I change to player.setSize(9, 12, false); (9 instead of 8) there's no more bug (see that here Using values below 8 causes bug too... Is that a known bug? I'm not afraid to look at it closely, but I even don't know what to check first... Is that a physics problem? a tilemap problem? a Sprite problem?
  14. hugoruscitti

    How to know the current fps in phaser 3?

    Hi!, i working in a proof of concept with phaser 3, and i see that is working very fine ! but i want to access to the current frame rate to show it in the game screen. i don't find any examples or documentation about it, there is any way to get the current frame rate in phaser 3? Thanks!!
  15. Quinten


    Hi there, I have been tinkering with phaser 3 this last month and made a puzzle game i want to share with you all. Check it out at It's a match 3 game based on the Wisconsin card sorting test. Properties (color, shape and count) must either completely match or be completely different. For example three red tiles with different shapes but 2 shapes on each tile. Or three different colors, 1 tile with one triangle, 1 tile with 2 triangles and 1 tile with 3 triangles. It may seem difficult, but the tutorial levels will make it clear. After the 3 tutorial levels you unlock a level editor and you can beat your own score. Feedback == welcome
  16. Hey guys, I'm trying to recreate the example code in Phaser 3 from this sample code as it seems Matter.js is much better suited for what I'm trying to achieve than Arcade and wanted to just get an example working locally.\physics\matterjs\attractors.js When I run this in my own project I get ` this.matter is undefined ` Is there a separate script I'm meant to include like there was in the dist folder for 'phaser-arcade-physics.js' on the repo
  17. Scramble JS is A 2D combat flight simulator for desktop browsers, made in Phaser 3. I started this project in early 2017 (using Phaser 2), which evolved from pure experimentation and love for flight sims. I decided to log the progress about 5 months ago. The features and modeling steps are described in detail within each log: Ultimately and ideally, the first release should have: - Different weather conditions, time, location(carrier, airbase). - Mission editor, ground targets (tanks, SAM, scenery objects) and air targets (aircraft, balloons). - A free flight mode. - Scramble mode (random scramble mission: interception of an unknown aircraft, leading to different actions). - Training mode (take-off, landing, basic manoeuvring, combat manoeuvre, combat training) If you would like to receive the dev logs regularly, please subscribe via the form found in the dev log or click here! :^: | | |O| | | /| |\ / | | \ / | | \ /___| |___\ ||| /|||\ |/`+'\|
  18. I've started writing a generator for Phaser 3 typescript definitions using Richard's JSDoc annotations. If anyone is interested in helping:
  19. Maxli

    Very slow rendering

    Hello everyone, I just upgraded my project from Phaser CE to Phaser 3 (latest beta) and I noticed that framerate has dropped down dramatically. I know that version 3 is using custom renderer and not Pixi, but as I understand, the WebGL version should have similar performance as the original Pixi renderer. I have just a single isometric scene with 64x64 tile sprites, every sprite is 80x40 and there are 128 single textures. Before upgrade, I got solid 50-60 FPS, now I can barely move the camera without FPS dropping under 15 FPS. Has anyone actually tested the rendering performance of Phaser 3? Thank you for any hint, Have a nice day, Max.
  20. Hi there, I'm playing around with the v3 API and wondered how to collide with a layer of a tilemap. Here is what I've already tried: 1) Get tiles data (there is probably a better way / API helper for that like forEachTile) and then use setCollision. let tilesData = (, true, false, this.platformLayer) 2) Do the opposite by excluding an empty array.[], true, false, this.platformLayer) 3) API v2 style. this.physics.arcade.collide(this.player, this.platformLayer); Here is my game config, if someone have the time to spot what I'm doing wrong. Thanks! let config = { type: Phaser.AUTO, parent: 'content', width: 800, height: 600, pixelArt: true, backgroundColor: '#2d2d2d', physics: { default: 'impact', impact: { setBounds: true, debug: true }, }, scene: [ Boot, Preload, TileMapTest ] } let game = new Phaser.Game(config) And here is my Scene /* globals __DEV__ */ class TileMapTest extends Phaser.Scene { constructor () { super({ key: 'TileMapTest' }) if (__DEV__) { console.log('TileMapTest scene created.') } = null this.player = null this.cursors = null this.rockLayer = null this.waterLayer = null this.platformLayer = null this.stuffLayer = null } preload () { // Hero this.load.image('hero', './assets/sprites/hero.png') // Tilemap this.load.image('kenny_platformer_64x64', './assets/tilemaps/tiles/kenny_platformer_64x64.png') this.load.tilemapJSON('multiple-layers-map', './assets/tilemaps/maps/multiple-layers.json') } create () { if (__DEV__) { console.log('TileMapTest scene entered.') } this.createTileMapLayers() this.createPlayer() this.cameras.main.startFollow(this.player) this.cameras.main.setBounds(0, 0,,, 0,, // ---> @todo collide with platformLayer } update (time, delta) { this.updatePlayer(time, delta) } createPlayer () { this.player = this.physics.add.sprite(200, 200, 'hero', 4).setOrigin(0, 0.15) this.player.setActive() this.player.setMaxVelocity(500) this.player.setFriction(1000, 100) this.player.body.accelGround = 1200 this.player.body.accelAir = 600 this.player.body.jumpSpeed = 500 // this.player.body.collideWorldBounds = true this.cursors = this.input.keyboard.createCursorKeys() } createTileMapLayers () { = this.make.tilemap({ key: 'multiple-layers-map' }) let tiles ='kenny_platformer_64x64') this.rockLayer ='Rock Layer', tiles, 0, 0) this.waterLayer ='Water Layer', tiles, 0, 0) this.platformLayer ='Platform Layer', tiles, 0, 0) this.stuffLayer ='Stuff Layer', tiles, 0, 0) } updatePlayer (time, delta) { let accel = this.player.body.standing ? this.player.body.accelGround : this.player.body.accelAir if (this.cursors.left.isDown) { this.player.setAccelerationX(-accel) } else if (this.cursors.right.isDown) { this.player.setAccelerationX(accel) } else { this.player.setAccelerationX(0) } // Jump if (this.cursors.up.isDown && this.player.body.standing) { this.player.setVelocityY(-this.player.body.jumpSpeed) } } } export default TileMapTest
  21. var graphics =; var color = 0xffff00; var thickness = 2; var alpha = 1; graphics.lineStyle(thickness, color, alpha); graphics.strokeRect(32, 32, 256, 256);