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. wusiquan

    spirte bounds position wrong

    // ... { // GameScene preload: function() { this.load.spritesheet('bird', 'bird.png', { frameWidth: 34, frameHeight: 24, endFrame: 3 }) this.load.spritesheet('pipe', 'pipes.png', { frameWidth: 54, frameHeight: 320, endFrame: 2}) }, create: function() { let topPipe = this.pipes.create(200, -80, 'pipe', 0).setOrigin(0) let bototomPipe = this.pipes.create(200, 300, 'pipe', 1).setOrigin(0) } } let config = { type: Phaser.AUTO, parent: 'flappy-container', width: 320, height: 505, physics: { default: 'arcade', arcade: { gravity: { y: 100 }, debug: true } }, scene: [GameScene] } let game = new Phaser.Game(config) I found there is some offset from the sprite to its bounds。。。It seems need call setSize() by hand ?
  2. Hi, I'm very new to game programming and Phaser and been sitting on this problem for days now. Any help or hint (or improvement to what I got so far) is greatly appreciated! What I wanna do: I basically want to create a "2D point and click physic". So far it works as excepted and perfectly fine if I set the tween duration to a fixed value, but that makes my sprite go faster the further you click away from it's current position: function create() { this.input.on('pointerdown', moveSprite, this); } function moveSprite (pointer) { var tween = this.tweens.add({ targets: player, x: pointer.x, onStart: function () { if (point.x < player.x) { player.flipX = true;'right', true); } else if (point.x > player.x) { player.flipX = false;'right', true); } }, duration: 500, onComplete: animStopCallback, onUpdate: tweenOnUpdate }); } I tried adding some math to the function which I found here, to have the movement speed of the character at same rate no matter the position and it works the way I want it: function moveSprite (pointer) { var distance = player.x - point.x; var speed = 200; var duration = (Math.sqrt(distance*distance) / speed) * 1000; var tween = this.tweens.add({ ... duration: duration, ... }); } But now the problem is, when the pointer event happens before the other one is finished it causes all kinds of weird glitches, making the character jump around. For example, I click 300 pixel to the right of the character, and while it's moving I click in between the way it's walking right now but it doesn't stop there where I clicked last, instead goes to the pointer.x position I clicked first. Apologies if my english is rather confusing. I'd be glad to serve more examples of what I mean or post screenshots if needed.
  3. // Scene { create: function() { // I add a group let titleGroup = // add something... let title = titleGroup.create(0, 100, 'title') let bird = titleGroup.create(100, 100, 'bird') // now I need adjust the group to appropriate position // compile Error! titleGroup.getChildren.forEach(child => { child.setPosition(50, 20) }) // comment last few lines! // ok~~ titleGroup.getChildren.forEach((child: Phaser.GameObjects.Sprite)=> { child.setPosition(50, 20) }) } } So, getChildren seems return something like <T> extends GameObjects would be better??
  4. ismaPC95


    Hello guys, how can I control the download event with a gamepad? I just want an action while pressing the button. To do the same action, I'm going to press the button again. I need this action, but with a gamepadd button. Tahnk you all (Phaser.Input.Keyboard.JustDown(cursors.up) //the gamepad pad = this.input.gamepad.getPad(0);
  5. Hi all, I'm trying to build a demo keeping it simple with ES5, and I'm trying to add a custom method to a scene, in a way similar to how it was done on Phaser 2. I realized this is not possible and was wondering if there is any recommended way to do this (without using ES6 to extend the Scene class, and without adding functions in the global scope either): var GameScene = { preload: ... create: ... update: function() { // custom logic if(...) { // if something happens, game over (doesn't work). this.gameOver is undefined this.time.delayedCall(500, this.gameOver, [], this); } }, // adding this custom method like in Phaser 2 - doesn't work on Phaser 3 gameOver: function() { console.log("game over"); } } var config = { type: Phaser.AUTO, width: 640, height: 360, scene: GameScene }; var game = new Phaser.Game(config);
  6. supersushi

    Game dimensions in Typescript

    Hi! I have been looking for 2 days how to get the full width and height of the game in Typescript. For example, I want to place a gameobject randomly but within the visible bounds. In javascript I have seen solutions mentioning ``, or `` etc. But nothing in TS. Thanks for your help, A super-novice
  7. Hello developers, I just start using phaser 3, and I bump into a question with the animation. Here is my code. var characterAnimConfig = { key: 'key-name', frames: scene.anims.generateFrameNumbers('spritenamehere', { start: 0, end: 7 }), repeat: -1, frameRate: 10, }; this means the animation will keep repeating from the first(frame 0) to the end(frame 7), my question is is there a way to let the animation only repeat the last two frame? expected frame goes like this: (0,1,2,3,4,5,6,7,6,7,6,7,6,7...). Thanks.
  8. Catrin

    loadTexture help

    Hello, I am new at this and I need help. I am using v3 to make a small game in which a sprite has to change appearance upon an event. I was trying to use the Phaser 2 example below: var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create }); function preload() { game.load.atlasJSONHash('bot', 'assets/sprites/running_bot.png', 'assets/sprites/running_bot.json'); game.load.spritesheet('mummy', 'assets/sprites/metalslug_mummy37x45.png', 37, 45, 18); } var bot; function create() { bot = game.add.sprite(200, 200, 'bot'); bot.animations.add('run');'run', 15, true); game.input.onDown.addOnce(changeMummy, this); } function changeMummy() { bot.loadTexture('mummy', 0); bot.animations.add('walk');'walk', 30, true); } But I keep getting "player.loadTexture is not a function" error. I assume the equivalent of in Phaser 3 is different, but I can't find it. Any help will be appreciated.
  9. NUGA

    Playing GIFs in Phaser 3

    Is it possible, and if so how, to play GIFs in phaser 3?
  10. wkd-aine

    Tilemap Resize

    Hi, I am updating a game from Phaser2 to 3, and was hoping someone can help! The game is a platformer game, somewhat similar to the Mario demo game, but the tilemap needs to resize on smaller screens to allow a range of browsers to be used to play the game. In Phaser2 the following code worked layer = map.createLayer( 'tiles' ); layer.setScale( scale_y ) layer.resizeWorld(); if( scale_y != 1) layer.resize(tile_width, tile_height); I have tried multiple approaches to getting the tiles to resize in Phaser 3 and realise that we don't have the same scaling functionality as before, but was hoping someone has some ideas on how this can be achieved. I have managed to resize the actual tiles, but then the extra tiles that are then displayed aren't rendered, see print screen below. You can see that the physics body is being added correctly, not sure if it makes any difference but am using matterJS, see code below if( utils.DEBUG ) { = true } let size = utils.TILE_SIZE * utils.scale_y var map = scene.make.tilemap({ key: 'map_level' }) var tiles = map.addTilesetImage('world_tiles') var layer = map.createStaticLayer( 'tiles', tiles, 0, 0 ) .setScale( utils.scale_y ) .setScrollFactor( 0 ) .setCollisionByProperty({ collides: true }) // if( utils.scale_y != 1 ) layer.resizeWorld( utils.TILE_WIDTH, utils.TILE_HEIGHT ) size, utils.TILE_HEIGHT ) layer ) If you need anything clarified please let me know. Many thanks in advance Áine
  11. Doug

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

  12. LordLants

    Angular 5 CLI Integration

    Hi there. I am very partial to Angular, I use it for basically all of my personal projects and know that, in the long run, I would want to wrap any game that I make in an Angular shell eventually. Unfortunately, as far as I can tell, it is currently quite difficult to get Phaser 3 working with the Angular CLI due to two simple things: 1) if bundling with webpack (which Angular does by default) the .frag and .vert files need a raw-loader configuration, 2) the CANVAS_RENDERER and WEBGL_RENDERER need to be initialized. The Angular CLI does allow for these things by calling "ng eject" at the command line, adding module: { rules: [ { test: [ /\.vert$/, /\.frag$/ ], use: 'raw-loader' } ] }, plugins: [ new webpack.DefinePlugin({ 'CANVAS_RENDERER': JSON.stringify(true), 'WEBGL_RENDERER': JSON.stringify(true) }) ] but calling "ng eject" has its own set of adverse side effects that are not very ideal (you lose a lot of the CLI). Is there any way that these two small things can be handled so that Phaser 3 can easily be built and run in Angular without needing to use "ng eject"? Does anyone know of a way to currently use Phaser 3 with Angular without having to eject? Currently at any point if phaser.min.js is included as a script the bundler blows up, from all that I can tell. I know that part of the underlying problem is how the Angular CLI handles its webpack.config.js file in the first place, and how the CLI team doesn't want to allow more customization in the .angular-cli.json file, but that just kind of is what it is right now. Any feedback would be appreciated, thanks!
  13. Hello, I'm new here, so firstly I want to greet with all of you. Regarding my question, or maybe problem - some background here: I want to create minimal for My 2D space shooter. I check tutorials on labs.phaser where I saw example with creating MiniMap with second camera - it sounds good. So I created class for My MiniMap: import Phaser from 'phaser' export default class MiniMap extends Phaser.Cameras.Scene2D.Camera { constructor ({ scene, x = 10, y = 10, width = 192, height = 192, zoom = 0.1, scroll = { x: 960, y: 960 } }) { super(x, y, width, height) this.scene = scene this.zoom = zoom this.scroll = scroll } init () { this.scene.cameras.cameras.push(this) this.scene.cameras.addExisting(this) this.setZoom(this.zoom) this.setScroll(this.scroll.x, this.scroll.y) return this } } And I'm creating it in My GameScene in create() function: create () { this.bgImage = new BackgroundImage({ scene: this }).init() this.miniMap = new MiniMap({ scene: this }).init() this.miniMap.setBackgroundColor('black') this.player = new Spaceship({ scene: this, x: 0, y: 0 }).init() } About My sizing, BackgroundImage and Bounds are 1920 x 1920 px, so in MiniMap we had 192 x 192 and also zoom as 0.1 (1/10 of real game world). It should create Map with the whole world, but it is cut on left and top and have free space at right and bottom (attachment). How to fix it? Also, maybe you can give me some tips how to change Spaceship sprite on MiniMap (second camera) as for example dot? Thanks for advance! Best, DaaV
  14. theNeedle

    Audio Format Compatibility

    I know we can pass different sound formats in phaser3 to let browser choose the compatible format. 1. According to this this and this mp3 is supported in most of the major browsers. So is it wise choice to use only mp3 format? if not then which format should be used with mp3 to support wide range of browsers? 2. Does this issue with ios 9 that required user engagement to start audio playback is handled by Phaser 3? From documentation it looks like WebAudioSoundManager has unlock method to resolve this issue but I'm not quite sure.
  15. ddabrahim

    BUG:animationFrame is undefined

    Hi I get the following error message with Phaser 3.1.2 when trying to run the project from this tutorial:
  16. mat89c

    Set anchor in Phaser 3

    Hello, How can i set anchor point in Phaser 3? setOrigins not working for me. For example: Phaser2 Phaser 3 Sprite is "jumping" on resize. How can i fix it?
  17. alliell

    Looping background image

    Hello, is there any way haw to loop background image in Phaser 3? I tried to something like this : function preload() { game.load.image("background", "background.png"); }, function create() { var background = game.add.tileSprite(0, 0, 500, 500, "background"); }, function update() { background.tilePosition.x += 0.5; }, but this isn't working. Thanks for any help
  18. I'm making small turn based game tic-tac-toe using phaser 3. Is it possible to cache assets and all the files needed to run game so that game can be played offline so that no internet connection is needed and every file is loaded from cache (providing native like experience)? Does service worker would do the trick? What are the common approaches to speed up the loading process and caching in HTML5 games?
  19. arkaghosh024

    Detecting doubleTap in PhaserJS

    I am a complete newbie in PhaserJS. I am trying to develop a game in PhaserJS where tapping the screen once should make the user avatar move on the screen and double-tapping should make it jump. However, I am not being able to figure out how to detect the double tap event. I have seen this tutorial in their official documentation, but that didn't work. When I am putting this line game.input.onTap.add(onTap, this); in the function create(){ ..... } function, it is showing this error Uncaught TypeError: Cannot read property 'add' of undefined I am being able to detect single tap events using this code: if(game.input.onTap && player.body.touching.down){ player.setVelocity(-530); } I've read another thread where the members have commented that to detect double click, one should start a timer and check if both the clicks are coming within a threshold value. However, I think this is not a foolproof method and there must be a better way of doing it. Can anyone please help?
  20. Doug

    Video game object

    Hi All Forgive me if I've missed this, but I can't seem to find any examples or reference to being able to create video game objects / textures. Is this possible please? I am thinking of mp4 or ogg video playing on a game object within the game. Mainly for use in things like interactive product tours etc. I note that the Phaser.Device namespace has a "video" member. I also note that Rich mentioned the video.OnComplete event handler in one of his posts too. So I am wondering if there is support for actual playback too? Thanks very much!
  21. AdamRyanGameDev

    Coding Train Tutorial

    Found this and was curious if it-d be Phas3r or not.... unfortunately this doesn't state that it is actually Phas3r... but yeah it is! Anyways posting because there are not that many video tutorials out there
  22. In phaser3, it is possible to add scene at runtime, but how to destroy and free a scene instance? Or should scene instance be kept always?
  23. Lightnet

    nodejs project templates

    Hello! I am sharing my project template builds which tends to try out if worth trying out to develop game projects for prototyping things. I made a Nodjes project build script for easy way to setup the project on local pc build develop. The build is babel es5/6 javascript. I used gulp task build for auto scripts. Gulp default task will build the files and start a server. Just need to install nodejs and run command line. If you have Visual Studio Code that is setup by the project. Those projects are build to compile into bundle.js to put everything in to one file for client since loading and creating each scripts is time consuming. Here the simple project test build work folder. Simple Example game. I made another project that is multiplayer network but still a bit buggy and few messy code script that will try to clean up later. It base on lance-gg client and server. I ported the spaaace game github to used Phaser 3.x to render the game. There are links references and credits in the file. It just a space ship shooter game. As 2D physics for phaser 3.4.0 server side it doesn't have it. 2D physics is very simple collision using lance-gg package.
  24. Hemanthraj

    How to smooth tween animation

    How to smooth the tween animation in the android devices.
  25. 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.