Search the Community

Showing results for tags 'phaser'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • 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

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 3,345 results

  1. coelacanth

    Cannot read property '2' of undefined

    Here is the code from an example. I have separte tiles images. <!doctype html> <html> <head> <script src="phaser.min.js"></script> </head> <body> <script> var game = new Phaser.Game(1024, 1024, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create }); function preload() { game.load.tilemap('map', 'bsdmap.json', null, Phaser.Tilemap.TILED_JSON); game.load.image('terrain', 'terrain.png'); game.load.image('p1', 'p1.png'); game.load.image('p2', 'p2.png'); game.load.image('bg_tile', 'bg_tile.png') //game.load.image('phaser', 'assets/sprites/arrow.png'); //game.load.spritesheet('coin', 'assets/sprites/coin.png', 32, 32); } var map; var layer; function create() { map = game.add.tilemap('map'); map.addTilesetImage('terrain'); map.addTilesetImage('p1'); map.addTilesetImage('p2'); map.addTilesetImage('bg_tile'); layer = map.createLayer('Tile Layer 1'); layer.resizeWorld(); } </script> </body> </html> Here is a tiled map in json format { "height":32, "infinite":false, "layers":[ { "data":[2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 2, 2, 2, 2, 2, 1, 1, 1, 1, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 1, 1, 0, 0, 0, 1, 1, 1, 1, 4, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 2, 2, 2, 2, 2, 2, 2, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1, 2, 2, 2, 2, 2, 2, 2, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 1, 1, 1, 1, 2, 2, 2, 2, 2, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 4, 3, 0, 0, 0, 0, 0, 0, 0, 0, 3, 2147483652, 1, 1, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 2, 2, 2, 2, 2, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 2, 2, 2, 2, 2, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 2147483652, 1, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 2, 2, 2, 2, 2, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 1, 1, 1, 4, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 4, 3, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 2, 2, 2, 2, 2, 2, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 2147483652, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 4, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 2, 2, 2, 2, 2, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 4, 3, 0, 0, 0, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 3, 2147483652, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2], "height":32, "name":"Tile Layer 1", "opacity":1, "type":"tilelayer", "visible":true, "width":32, "x":0, "y":0 }], "nextobjectid":1, "orientation":"orthogonal", "renderorder":"right-down", "tiledversion":"1.1.2", "tileheight":32, "tilesets":[ { "columns":0, "firstgid":1, "grid": { "height":1, "orientation":"orthogonal", "width":1 }, "margin":0, "name":"tileset", "spacing":0, "tilecount":4, "tileheight":32, "tileproperties": { "0": { "blocked":"" }, "1": { "blocked":"" }, "2": { "platform":"" }, "3": { "platform":"" } }, "tilepropertytypes": { "0": { "blocked":"string" }, "1": { "blocked":"string" }, "2": { "platform":"string" }, "3": { "platform":"string" } }, "tiles": { "0": { "image":"..\/..\/..\/..\/Users\/Andrew\/Desktop\/totem burners assets\/tiles2\/terrain.png", "imageheight":32, "imagewidth":32 }, "1": { "image":"..\/..\/..\/..\/Users\/Andrew\/Desktop\/totem burners assets\/tiles2\/bg_tile.png", "imageheight":32, "imagewidth":32 }, "2": { "image":"..\/..\/..\/..\/Users\/Andrew\/Desktop\/totem burners assets\/tiles2\/p1.png", "imageheight":32, "imagewidth":32 }, "3": { "image":"..\/..\/..\/..\/Users\/Andrew\/Desktop\/totem burners assets\/tiles2\/p2.png", "imageheight":32, "imagewidth":32 } }, "tilewidth":32 }], "tilewidth":32, "type":"map", "version":1, "width":32 } All the tiles are embedded in Tiled. But I got an error: Uncaught TypeError: Cannot read property '2' of undefined at Object.parseTiledJSON (phaser.min.js:3) at Object.parse (phaser.min.js:3) at new i.Tilemap (phaser.min.js:3) at i.GameObjectFactory.tilemap (phaser.min.js:3) at Object.create (index.html:33) at i.StateManager.loadComplete (phaser.min.js:3) at i.Loader.finishedLoading (phaser.min.js:3) at i.Loader.processLoadQueue (phaser.min.js:3) at i.Loader.asyncComplete (phaser.min.js:3) at i.Loader.fileComplete (phaser.min.js:3)
  2. Many 2D even 3D frameworks now support Spine. Even Phaser 2.6.2 has a plugin for Spine, thanks to Orange Games. So do you plan integrating Spine in Phaser 3?
  3. eyo_omat

    Ticking time bomb in a game

    I am trying to create a bomb that only goes off after the player has collides with it but delays for a number of seconds. Currently it goes off immediately I have my collision as below game.physics.arcade.collide(this.player, this.tnts, this.tntCollision, null, this); and the collison handler as below tntCollision: function (player, tnt) { if (player.body.touching.right){ player.body.velocity.x = -200; } else if (player.body.touching.down) { tnt.kill(); var explosionGroup = "explosionSmallGroup"; var explosion = this[explosionGroup].getFirstExists(false); explosion.reset(tnt.x, tnt.y); explosion.animations.play('explode', 30, false, true); } else if (player.body.touching.left) { player.body.velocity.x = 200; } }
  4. I am trying to make an android build via cocoon.io using Canvas+ The game imports json tilemap data generated by Tiled. The game works fine in the browser, it evenr works when I use cocoon.io's webview instead of canvas+ (very slow though, like 1 FPS). I understand that this is probably a cocoon.io issue, but maybe someone else had this problem? Any idea what might be wrong?
  5. Kalablum

    Projected Trajectory

    Hi, could some one point me to right direction on how to do this kind of predicted trajectory?
  6. I'm very new on Phaser, Hope you all can help me This is my fresh code <!doctype html> <html> <head> <meta charset="UTF-8" /> <title>hello phaser!</title> <script src="//cdn.jsdelivr.net/phaser/2.5.0/phaser.min.js"></script> </head> <body> <script type="text/javascript"> window.onload = function() { // Note that this html file is set to pull down Phaser 2.5.0 from the JS Delivr CDN. // Although it will work fine with this tutorial, it's almost certainly not the most current version. // Be sure to replace it with an updated version before you start experimenting with adding your own code. var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create }); function preload () { game.load.spritesheet('courtrecordbtn', 'src/images/court-record.png', 194, 71); game.load.spritesheet('profilesbtn', 'src/images/profiles.png', 194, 71); game.load.spritesheet('nextbtn', 'src/images/next.png', 194, 71); game.load.image('logo', 'phaser.png'); } function create () { var logo = game.add.sprite(game.world.centerX, game.world.centerY, 'logo'); logo.anchor.setTo(0.5, 0.5); // Court-Record Button var courtrecordbtn = game.add.button(606, 0, 'courtrecordbtn', actionOnClick, this, 2, 1, 0); courtrecordbtn.onInputOver.add(over, this); courtrecordbtn.onInputOut.add(out, this); courtrecordbtn.onInputUp.add(up, this); // Profiles Button var profilesbtn = game.add.button(0, 0, 'profilesbtn', actionOnClick, this, 2, 1, 0); profilesbtn.onInputOver.add(over, this); profilesbtn.onInputOut.add(out, this); profilesbtn.onInputUp.add(up, this); // Next Button var nextbtn = game.add.button(game.world.centerX - 97, 529, 'nextbtn', actionOnClick, this, 2, 1, 0); nextbtn.onInputOver.add(over, this); nextbtn.onInputOut.add(out, this); nextbtn.onInputUp.add(up, this); } function up() { console.log('button up', arguments); } function over() { console.log('button over'); } function out() { console.log('button out'); } function actionOnClick () { background.visible =! background.visible; } }; </script> </body> </html> I want to know how to make a button or images will appear if called, and can disappear too. Thankyou Very Much.... Edited : I Figured out i can use "If ", but i want to know another simplier way <!doctype html> <html> <head> <meta charset="UTF-8" /> <title>hello phaser!</title> <script src="//cdn.jsdelivr.net/phaser/2.5.0/phaser.min.js"></script> </head> <body> <script type="text/javascript"> window.onload = function() { // Note that this html file is set to pull down Phaser 2.5.0 from the JS Delivr CDN. // Although it will work fine with this tutorial, it's almost certainly not the most current version. // Be sure to replace it with an updated version before you start experimenting with adding your own code. var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create }); // Variable var courtrecordbtnenable = true; var profilesbtnenable = true; var nextbtnenable = true; function preload () { game.load.spritesheet('courtrecordbtn', 'src/images/court-record.png', 194, 71); game.load.spritesheet('profilesbtn', 'src/images/profiles.png', 194, 71); game.load.spritesheet('nextbtn', 'src/images/next.png', 194, 71); game.load.image('logo', 'phaser.png'); } function create () { var logo = game.add.sprite(game.world.centerX, game.world.centerY, 'logo'); logo.anchor.setTo(0.5, 0.5); // Court-Record Button if (profilesbtnenable == true) { var courtrecordbtn = game.add.button(606, 0, 'courtrecordbtn', delnextbtn, this, 2, 1, 0); courtrecordbtn.onInputOver.add(over, this); courtrecordbtn.onInputOut.add(out, this); courtrecordbtn.onInputUp.add(up, this);} else { } // Profiles Button if (profilesbtnenable == true) { var profilesbtn = game.add.button(0, 0, 'profilesbtn', profilesbtnclicked, this, 2, 1, 0); profilesbtn.onInputOver.add(over, this); profilesbtn.onInputOut.add(out, this); profilesbtn.onInputUp.add(up, this);} else { } // Next Button if (nextbtnenable == true) { var nextbtn = game.add.button(game.world.centerX - 97, 529, 'nextbtn', actionOnClick, this, 2, 1, 0); nextbtn.onInputOver.add(over, this); nextbtn.onInputOut.add(out, this); nextbtn.onInputUp.add(up, this);} else { } } function up() { console.log('button up', arguments); } function over() { console.log('button over'); } function out() { console.log('button out'); } function actionOnClick () { background.visible =! background.visible; } function profilesbtnclicked() { alert('Profiles Button Clicked'); } function delnextbtn() { } }; </script> </body> </html>
  7. I am developing a game where I need to zoom in entire map also I can be able zoom out. I have created a tilemap using tiled software and rendered it using phaser.js. How can I add this function to my game?
  8. jevisan

    Sprite flickering

    Im having an issue with my game. The player sprite flickers when positioning at certain points in the game. My tile maps are made in tiled editor so no risk of misplacing a tile. The flickering is only vertical and the physical body of the sprite is set a little smaller than the actual sprite which is 32 x 32 while the physical body is 16 x 28. I've also noticed that the flickering varies with the setting of the velocity. As an example, when jumping above a certain platform the sprite flickers when the assigned negative velocity of y and y gravity are assigned certain value, but it doesn't flicker when assigned another value. On the other hand, on another part of the game the whole screen/camera flickers at certain height. Any thoughts?
  9. CyborgNachte

    Tween on Click stops after rapid clicks

    Hey there! I'm pretty new to Phaser, but I've been making an idle clicker in it to learn the ropes. I've run into some issues with tweens that I'm not to sure how to fix. I have a sprite, and when you click it, it increments a counter and plays a 'bouncy' tween, to display you clicked on it. This is cookie clicker style, so the user will inevitably rapid fire click it at some point. The issue seems to be that after several rapid fire clicks, the tween just sort of gives up and stops working. My first assumption is that because we're creating a tween each time we get some kind of overload of them because we're not properly destroying them? I'm unsure how to effectively do this in this situation. The ways I attempted to fix it: use game.tween.remove(tweenName) at the end of the function (expecting the next click to create a new one) store tween in variable and if variable != null, clear variable before creating new tween in it. Neither of these had results which makes me think I'm not understanding this correctly. Code: crystal = game.add.sprite(game.world.centerX, game.world.centerY - 5, 'crystal'); crystal.anchor.set(0.5); crystal.inputEnabled = true; crystal.input.pixelPerfectOver = true; crystal.input.useHandCursor = true; //on click event firing crystal.events.onInputDown.add(actionOnclick, this); //this tween is just it moving up and down to 'float' game.add.tween(crystal.position).to( {y: game.world.centerY + 5}, 2200, Phaser.Easing.Linear.InOut, true, 500, 20, true).loop(true); //on click event function function actionOnclick(){ game.add.tween(crystal.scale).to({x: 0.95, y: 0.95}, 300, Phaser.Easing.Bounce.None, true, 300, 0, true); counter++; text.setText('Glamour: ' + counter); } Note: the tween doesn't need to complete if the user clicks again, just start over. It does this, but after so many rapid clicks it stops doing anything.
  10. webdva

    [WIP] Kawaii Ketchup

    I've kinda been developing this game in a vacuum. So, if it wouldn't be too much trouble for you, and if you would like to, could you give me criticism or feedback such as what the game does that appeals to you or what the game does that you don't like? I might be missing something, I think. It's still a work in progress (kinda like an alpha version?) and I hope to have it really polished by the end of the first quarter of 2018. Also, I kinda just wanted to share and promote the game It's like an arcade game where you try to avoid getting hit by flying ketchup bottles and then you eat raisins in order to stay alive. https://webdva.itch.io/kawaii-ketchup And also, you can look at the source code. https://github.com/webDva/Kawaii-Ketchup
  11. Hey guys, I'm new to phaser and I'm not quite sure if this is a bug or a mistake of myself. In this code if the player has a circle as his body and if he is colliding with one of this obstacles he won't get separated as it is described in the phaser documentation. So if you move up and collide with the obstacle the console starts printing out true even if you stop moving. In addition to that if you walk against an edge of the obstacle the player gets stuck on it and can't get away of that. I'm confused because this doesn't happen if the players body is an rectangle. Does anybody have an idea? var game = new Phaser.Game(600, 600, Phaser.AUTO, "", {preload: preload, create: create, update: update}); var player; var cursors; var obstacles; function preload(){ game.load.image("robot", "player.png", 32, 48); game.load.image("obstacle", "box.png"); } function create(){ player = game.add.sprite(game.world.centerX, game.world.centerY + 200, "robot", 5); game.stage.backgroundColor = 'rgb(239, 228, 176)'; game.physics.arcade.enable(player); player.body.setCircle(player.width/2);// player don`t get seperated in the collide function //player.body.setSize(player.width * 0.8, player.height*0.8,player.width * 0.1, player.height*0.1 ); //player get seperated in the collide function player.anchor.set(0.5); player.angle = -90; cursors = game.input.keyboard.createCursorKeys(); obstacles = game.add.group(); game.physics.arcade.enable(obstacles); obstacles.enableBody = true; obstacles.create(game.world.centerX, game.world.centerY - 200, 'obstacle'); obstacles.create(game.world.centerX - 190, game.world.centerY - 200, 'obstacle'); obstacles.create(game.world.centerX + 150, game.world.centerY - 100, 'obstacle'); obstacles.create(game.world.centerX - 130, game.world.centerY, 'obstacle'); obstacles.create(game.world.centerX - 230, game.world.centerY, 'obstacle'); obstacles.setAll('body.immovable', 'true'); obstacles.setAll('anchor.x', '0.5'); obstacles.setAll('anchor.y', '0.5'); } function update(){ game.debug.body(player); obstacles.forEach(function(item) { game.debug.body(item); }); if (cursors.up.isDown) { game.physics.arcade.velocityFromAngle(player.angle, 200, player.body.velocity); } else { player.body.velocity.set(0); } if (cursors.left.isDown) { player.body.angularVelocity = -300; } else { if (cursors.right.isDown) { player.body.angularVelocity = 300; } else { player.body.angularVelocity = 0; } } game.physics.arcade.collide(player,obstacles,(p1,en)=>{ console.log(true); }, null, this); } cheers landa
  12. I have created tilemap using Tiled software of pixel size 1200x1000. While rendering it using phaser I have set width equal to 500 and height equal to 400.After this only map of 500x400 area is loading and remaining part is missing. How can I show the full map in 500x400 area on my webpage?
  13. jevisan

    Sound effects mashed up

    Hi , i'm having a difficulty while trying to play sounds on player input. The character is supposed to move and play a footstep sound while doing so. But the sound is really short and end up restarting the sound every call to update which causes it to sound mashed up. Is there any way i could fix this? The code isn't really that much relevant but still: update: function() { if (this.cursors.left.isDown) { this.player.body.velocity.x = -this.player.speed; this.player.animations.play('walk-left'); this.footstepA.play(); } } Oh and i would also like to reproduce another footstep sound after playing that one. Like so: footstepA, footstepB, footstepA, etc.
  14. In this multiplayer game tutorial series with Node.js server and Phaser client, it goes over room logic, and implementing maximum number of players. http://gojasonyang.com/post/phaserMultiplayerGamePart6.html
  15. Tykrael

    Phaser + vuejs

    Hello peeps, I've been trying for a long time now to make it work, but i can't find any new ideas to test out. My project is a vuejs webpack template project i've been able to initialize phaser make things display changing the game's background color on input etc But i can't for the life of me find the way to make sprite input detect pointer. I've followed this tutorial : https://www.sebastianklier.com/node/vue/phaser/game/2017/06/03/node-vue-phaser-webpack.html Here's the code of my game vue <template> <div id="plano"></div> </template> <style> #plano { position:absolute; top:0; left:0; width:1280px; height:640px; margin: 0 auto; } #plano canvas { display: block; margin: 0 auto; } </style> <script> /* eslint-disable */ /* eslint-disable no-unused-vars */ import 'pixi' import 'p2' import Phaser from 'phaser' /* eslint-enable no-unused-vars */ export default{ name: 'phaser', data: () => ({ game: null, sprites: {}, }), mounted () { this.$on('click', function(){ console.log('click') }) let self = this if (this.game == null) { this.game = new Phaser.Game({ width: 1280, height: 640, renderer: Phaser.AUTO, antialias: true, parent: this.$el, state: { preload: function preload () { self.preload(this) }, create: function create () { self.create(this) }, update: function update () { self.update(this) }, render: function render () { self.render(this) } } }) } }, methods: { preload () { this.game.load.image('block', './static/assets/block.png') }, create (phaser) { let self = this; var sprite = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY, 'block') sprite.anchor.set(0.5) sprite.inputEnabled = true sprite.input.enableDrag() sprite.events.onInputDown.add(function() { console.log('sprite down') }) }, update (phaser) { }, render() { var debug debug = this.game.debug debug.inputInfo(32, 32); debug.pointer( this.game.input.activePointer ); debug.spriteInputInfo(this.game.world.children[0], 32, 150) } }, destroyed () { // this.game.destroy() } } </script> As you can see it's pretty simple i just want to be able to drag the block, the debug.spriteInputInfo shows no signs of life. Of course the code works outside of vue ... If anyone got an idea I'll gladly take it, i'm at my wits end.
  16. I have a global object called "params" that stores a lot of important parameters for my game. I define params in a "main.js" file that initializes the game, defines my states and parameters, and then calls my "bootState". For some reason, when I restart my "gameState" (another state, defined in "gameState.js") it resets my "params" object to the values it was initialized with in "main.js". My goal is to change some parameters via "params" in the console, then restart "gameState" and have it reflect those changed parameters. If needed I can provide some example code.
  17. So i bought the Particle Storm Plugin to get more Particle effects and stuff, pretty awesome... but i'm still a newbie in terms of Particle Emitters and how to produce the best result with them. So many variables and options that by slightly changing them can change the result a lot. I'm trying to add a little smoke/dust trail behind my character when i start running. Sounds simple, huh? So i made a plain squared white 20x20 texture to use it as the particle asset. this.manager = this.game.plugins.add(Phaser.ParticleStorm); let dust = { image: 'dust', blendMode: 'NORMAL', lifespan: { min: 100, max: 200 }, scale: { min: 0.3, max: 2 }, vy: { value: { min: 0, max: 0.1 } }, vx: { value: { min: 0, max: 0.1 } }, rotation: { value: 0, delta: { min: -2.0, max: 2.0 } } }; this.manager.addData('dust', dust); this.emitter = this.manager.createEmitter(); this.emitter.addToWorld(); Then inside the update() function, i track my character's position, is not properly done, though... since it's quite offset. But is just to try it out first. this.emitter.emit('dust', this.x, this.y - 10, { total: 1, frequency: 600 }); The problems i'm encountering is that it feels like particles are going way too fast. I couldn't find a way to slower them down, tried using `frequency`, but emits soo many particles per second that is unrealistic for this specific scenario. I would like to emit for instance, 3 to 5 particles at once, make them rotate a little and change their size (scale) ... with ofc short lifespan otherwise trail will be huge. Another good idea (probably) would be if they kinda fadeOut while lifespan is about to finish. Any help is appreciated.
  18. Hello for 2 years now I have been developing games mostly using Java`s and libGDX or/and openGL, but now im very interested in Phaser for web-based game development and I think that is a very powerful tool. I have no problems with game logic but when i come up with render logic in Phaser I need to know if there are possibilities for: 1 Pixel to World unit conversion. ex: In libGDX I can work in 8x6 world units game instead of using pixels units (640*360 for exmaple) , that helps me to write a lot better logic 2 Multiple cameras in the same scene 1 camera for game and more than one for the HUD .
  19. anskotid

    Using Phaser together with React

    I am trying to understand how I could use React for rendering all the UI elements and Phaser for rendering a game (using Canvas or WebGL) within the React application. One way would be to use React's componentDidMount, so after I have my HTML ready I can use a div id to render the Phaser content. But in this case React does the game rendering too. Is there any way to achieve the desired result?
  20. madmarcel

    Phaser + Spriter - collision boxes

    Hi, Been trying to get Spriter Pro collision boxes to work in Phaser - has anyone had any luck in getting this to work? I'm close...but not quite there... This is using this plugin by the way: https://github.com/SBCGames/Spriter-Player-for-Phaser
  21. Hi, i'm having a problem with the collisions in my game. I'm using tilemap layers the character can jump as long as it's not touching the ground, but the moment it touches the tiles that are set for check for collision, it just seems unable to move upwards. Can move sideways tho. Everything else is loaded and displayed just fine. BasicGame.Game = function (game) {}; BasicGame.Game.prototype = { create: function () { this.game.physics.startSystem(Phaser.Physics.ARCADE); this.setUpInput(); this.setUpMap(); this.setUpPlayer(); }, update: function () { this.processPlayerInput(); this.processCollisions(); }, /*==========================CREATE ASSOCIATED FUNCTIONS==========================*/ setUpInput: function() { // arrow keys this.cursors = this.input.keyboard.createCursorKeys(); }, setUpPlayer: function() { this.player = this.add.sprite(BasicGame.PLAYER_SPAWN_X, BasicGame.PLAYER_SPAWN_Y, 'player'); this.player.anchor.setTo(0.5, 0.5); this.game.physics.arcade.enable(this.player); this.camera.follow(this.player); this.player.speed = BasicGame.PLAYER_SPEED; this.player.jump_speed = BasicGame.PLAYER_JUMP_SPEED; this.player.body.collideWorldBounds = true; this.player.body.gravity.y = 1000; }, setUpMap: function() { this.map = this.game.add.tilemap('testLevel'); this.map.addTilesetImage('lvl_1_tiles', 'level1_tiles'); // collisionable layer this.collisionLayer = this.map.createLayer('collisionable'); this.map.setCollisionBetween(1, 2000, true, this.collisionLayer); this.collisionLayer.resizeWorld(); }, /*==========================UPDATE ASSOCIATED FUNCTIONS==========================*/ processCollisions: function() { this.game.physics.arcade.collide(this.player, this.collisionLayer); }, processPlayerInput: function() { // reset movement this.player.body.velocity.x = 0; ... // jumping <== it should jump but it doesnt!!! if (this.cursors.up.isDown) { this.player.body.velocity.y = -this.player.jump_speed; this.player.frame = 2; } } }; { "height":10, "infinite":false, "layers":[ { "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 9, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 14, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 16, 17, 18, 0, 0, 9, 0, 14, 0, 0, 0, 0, 0, 0, 0, 16, 17, 17, 18, 0, 0, 0, 0, 0, 0, 14, 0, 14, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 14, 0, 14, 0, 0, 0, 0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2], "height":10, "name":"collisionable", "opacity":1, "type":"tilelayer", "visible":true, "width":20, "x":0, "y":0 }], "nextobjectid":1, "orientation":"orthogonal", "renderorder":"right-down", "templategroups":[], "tiledversion":"2017.10.31", "tileheight":32, "tilesets":[ { "columns":5, "firstgid":1, "image":"..\/tilesets\/lvl_1_tiles.png", "imageheight":256, "imagewidth":160, "margin":0, "name":"lvl_1_tiles", "spacing":0, "tilecount":40, "tileheight":32, "tilewidth":32 }], "tilewidth":32, "type":"map", "version":1, "width":20 }
  22. Hello! I'm new to Phaser and HTML5 game development (but not to JS), and have been going through a few free tutorials online. I've already done the mobile toddler's game tutorial, and a simple sidescroller game tutorial, great fun so far! Today I tried to follow an infinite scolling game tutorial (not the same author and not as well written as the first two I followed), but I can't get it to work... The dog falls through the ground on collision with the fleas, and stays stuck down there while the game keeps scrolling. The dog also falls through the ground also after the digging animation... I compared my game.js code to the author's Game.js code, line by line, and didn't see anything missing – I even went so far as to reorder everything the same way she did (the other files were quasi-identical). This is what I found: If I only paste the author's code in place of mine: the game still doesn't work as expected. If I only use the phaser.js v2.1.3 file (from the downloadable source files), instead of the phaser.js v2.6.2 file I use: the game still doesn't work as expected. If I use both the author's Game.js file and phaser.js v2.1.3: the game works! I think that the article must be missing something that can be found in the author's code, because I followed the tutorial exactly. But given that swapping her code for mine still doesn't fix the game, does anyone have any idea what might be causing the player to fall through the ground on collision/overlap? Might it have something to do with gravity, or other physics in Phaser 2.1.3 vs 2.6.2? Thanks in advance!
  23. Play Cool Math

    1024 Math

    1024 Math Remix on classic game 2048. 1024 Math reminds a game of 2048 from Gabriele Cirulli. There are 18 levels in this game. You need to complete all the goals when you get at each level. https://playcoolmath.com/en/math-games/1024-math Play 1024 Math
  24. Hello guys, I wanted to know how to use the phaser in visual studio 2017? I know you have this tutorial: https://phaser.io/tutorials/how-to-use-phaser-with-typescript Only that from 2013 until 2017 much has changed, If someone could update the tutorial, it would help a lot. Also if someone can teach you how to add syntaxes to the autocomplete, it would help. The syntaxes in auto completer are missing a lot, especially for those who are starting!!
  25. lucasdavidferrero

    The Canvas doesn't show sprites

    Hi community, I'm having a problem with canvas and sprites. I'm new in this matter and I hope that you could help me The problem, as the title says, is that I can't see the sprites on canvas. I've tried to call the functions preload() and create() manually in the browser's console and I get a warning that says: Phaser.Cache.getImage: Key "bg" not found in Cache. The warning appears for every Key that I'm using for. There is my code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Cat Catcher</title> <script src="./js/phaser.min.js"></script> <script> var game = new Phaser.Game(800, 600, Phaser.CANVAS, {preload: preload, create: create, update: update}); var cat, catcher, cursors, txtScore, score; function preload() { // load assets game.load.image('cat', '/img/cat.png'); game.load.image('catcher', '/img/cat.png'); game.load.image('bg', '/img/bg.png') } function create() { //setup game game.add.sprite(0, 0, 'bg'); catcher = game.add.sprite(400, 300, 'catcher'); catcher.anchor.setTo(.5,0); game.physics.enable(catcher, Phaser.Physics.ARCADE); cat = game.add.sprite( Math.random() * game.width, Math.random() * game.height, 'cat' ); game.physics.enable(cat, Phaser.Physics.ARCADE); score = 0; var style = { font: '20px Arial', fill: '#FFF' }; txtScore = game.add.text(10, 10, score.toString(), style); cursors = game.input.keyboard.createCursorKeys(); } function update() { //game loop code if(cursors.left.isDown){ catcher.x -= 5; catcher.scale.x = 1; } if(cursors.right.isDown) { catcher.x += 5; catcher.scale.x = -1; } if(cursors.up.isDown) { catcher.y -= 5; } if(cursors.down.isDown) { catcher.y += 5; } game.physics.arcade.overlap(catcher, cat, catHitHandler); } </script> </head> <body> </body> </html> I'm using Phaser v2.10.0 I wish you could tell me where the problem is, Thanks!