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
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 3,149 results

  1. Hi everyone, I have problem with scalling to mobile devices in phaser. I mean, every graphic in my app on PC is scalling correct on mobile devices and everything look perfect, but hitArea on sprites that have inputEnabled = true stay on the old positions and when I want to interact with sprite on my phone I have to click a little bit below and to the right from the sprite position. I use this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; to scale the game to mobile devices. Have anyone idea what is wrong?
  2. I have 2 sprite groups each representing a hand of cards. Each group has its own scale, rotation and position; same for each sprite (card) in each group. I'm trying to create a smooth animation of the card moving from one hand to the other. I can calculate the local parameters (scale, rotation and position) of where the card should be in the new group, but I can't seem to find an easy way to create a tween between 2 sets of local parameters. The only route I could think of at the moment is something along the lines of: store 'sprite.world', 'sprite.worldScale' and 'sprite.worldRotation' => remove sprite from group => add sprite to temporary group => set temporary group's parameters to the stored world parameters => calculate the world parameters in the new group => tween to new world parameters => add sprite to new group and set it to its local parameters. The becomes even more difficult if the destination could potentially change during the tween. Is there an easier or a more robust way of achieving that?
  3. I have simple game that I had working fine on localhost from Visual Code. Decided to try it out on Cloud9. Configured Cloud9 user and permissions (separate from Admin group) I downloaded the phaser-master from github. The file contains hidden .github folder and .gitignore file. Then there are v2, v2-community, and v3 folders. To use Phaser in cloud9 I'm asuming I have to upload the files in the v2 folder. I did that into the cloud9 root. The html file is: <html> <head> <meta charset="UTF-8" /> <title>Coin Game!</title> <style> html { background: black; } canvas { margin:auto; } </style> </head> <body> <script src="phaser.js"></script> <script src="game.js"></script> </body> </html It is located in the cloud9 root folder. I rand npm install experss from the terminal in the cloud9 instance root. Then I ran npm init --save. I'm not sure if I have to do this, but I ran a simple install of node.js server from a terminal window in the cloud9 root. The command I used was: npm install node server When I try to run my game.js file from cloud9 editor window, it errors at this line: // setup game when the web page loads window.onload = function () { game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update, render: render }); What is says is "window is not defined" It ran so easily on my local node server. I did all the local work from Visual Code. It set up and ran the server. It was using an extension called live server. I'm not sure exactly what it does; but if I just open up the local files directory, check node, then run node game.js, I get the same error of window not defined. I'd like to get this to work on cloud9 for learning purposes. I'd appreciate any help, please.
  4. Animating Sprites

    I'm trying to add some new animations by adding a new "if" section in my "update:function" code. All of my "walking" and "sprinting" animations following the first "if" section play as they should. However, when I attempt to animate my crutch attacks under the second "if" section, only the first frame of those animations is played. I'm using the same attack button because it's the same attack being animated in all directions. I combo'd with my arrow keys so that I could use the same attack key. When I change them to all to "else if" statements under my first "if" section they don't play because it is my understanding that once a key is used in an "if" statement all other attempts to use that key under that section will be ignored. My code is listed below. Solution? if(cursors.left.isDown) { player.body.velocity.x = -200; player.scale.setTo(.7, .7); player.play('walking'); } else if(cursors.right.isDown) { player.body.velocity.x = 200; player.scale.setTo(-.7, .7); player.play('walking'); } else if(cursors.down.isDown) { player.body.velocity.y = 200; player.scale.setTo(.7, .7); player.play('forward'); } else if(cursors.up.isDown) { player.body.velocity.y = -200; player.scale.setTo(.7, .7); player.play('backward'); } else if(sprintl.isDown) { player.body.velocity.x = -400; player.scale.setTo(.7, .7); player.play('sprinting'); } else if(sprintr.isDown) { player.body.velocity.x = 400; player.scale.setTo(-.7, .7); player.play('sprinting'); } else if(sprintu.isDown) { player.body.velocity.y = -400; player.scale.setTo(.7, .7); player.play('backsprint'); } else if(sprintd.isDown) { player.body.velocity.y = 400; player.scale.setTo(.7, .7); player.play('forwardsprint'); } else{ player.animations.stop(); player.frame = 29 player.body.velocity.y = 0; } if(cursors.left.isDown && fireButton.isDown) { player.body.velocity.x = -50; player.play('sidecrutch'); } else if(cursors.right.isDown && fireButton.isDown) { player.body.velocity.x = 50; player.play('sidecrutch'); } else if(cursors.down.isDown && fireButton.isDown) { player.body.velocity.y = 50; player.play('frontcrutch'); } else if(cursors.up.isDown && fireButton.isDown) { player.body.velocity.y = -50; player.play('backcrutch'); }
  5. Posted 2 hours ago Is there a way to create sprite from multiple files ? Like creating a sprite : Knight in 'knight.js' and creating his movement in 'movement.js' is this possible : // knight.js import Phaser from 'phaser' import Movement from './movement' export default class extends Phaser.Sprite { constructor ({ game, x, y, asset }) { super(game, x, y, asset) } movement(){ // Here Ill call Movement } } // movement.js import Phaser from 'phaser' export default class extends Phaser.Sprite { // Here ill make a function that will move the sprite // and start the animation }
  6. Is there a way to create sprite from multiple files ? Like creating a sprite : Knight in 'knight.js' and creating his movement in 'movement.js' is this possible : // knight.js import Phaser from 'phaser' import Movement from './movement' export default class extends Phaser.Sprite { constructor ({ game, x, y, asset }) { super(game, x, y, asset) } movement(){ // Here Ill call Movement } } // movement.js import Phaser from 'phaser' export default class extends Phaser.Sprite { // Here ill make a function that will move the sprite // and start the animation }
  7. Hey there! I am using the latest Phaser.js from the official website. I am creating a game that is supposed to be 640x480 in size. var game = new Phaser.Game(640, 480, Phaser.AUTO, '', { preload: preload, create: create, update: update }); But the final canvas that is being rendered is 800x600 in size, which would be correct according to my Windows DPI settings of 125% (640*1.25=800, 480*1.25=600). A resolution of 1280x720 will get scaled up to 1600x900 and as a result, everything will look blurred. The website itself is not zoomed in or enlarged in any way using Chrome. How do I disable this "feature"? I want to be able to control the size of the game.
  8. Pixi v4 filters in Phaser

    I would like to use Pixi v4 filters in Phaser node application. I´ve read this tutorial: http://phaser.io/examples/v2/filters/pixi-filter and all posts about this that I´ve found, but I still don´t know, how am I supposed to load the filter script. For example the outline filter: https://github.com/pixijs/pixi-filters/tree/master/filters/outline game.load.script('filter', 'outline/src/OutlineFilter.js'); However, this is not working and I just can't figure out, how to load it correctly. (The path is correct.) Thank you
  9. Gopherjs and Phaser

    Hi, I've recently started to experiment with Gopherjs ( https://github.com/gopherjs/gopherjs/ ) for Phaser games. Idea was to write backend and frontend in same lang (I use go on backends I create for clients). Managed to recreate http://phaser.io/examples/v2/games/starstruck example in go without much trouble, but now I'm creating game template with states and can't properly add multiple states. When I console log the game.state.states object I see all my states, but it always starts last one no mater which key I use in game.state.start(). Anyone here with experience in Phaser and Gopherjs?
  10. Shoot a rope

    Hi, I started recreating an arcade game called Pang and have a javascript version (1st level) here I'd like to use Phaser to continue the development but am stuck on how to animate the weapon (a metal rope with a spearhead). I'd tried using the Phaser.Rope class but am struggling to understand how to do the following: Add a spearhead to the end of the rope Animate the rope from the player's position to the top of the screen Start the animation when the user presses fire (spacebar) if anyone could give me any pointers, I'd be eternally grateful!
  11. Sprite Animations

    I'm trying to add some new animations by adding a new "if" section in my "update:function" code. All of my "walking" and "sprinting" animations following the first "if" section play as they should. However, when I attempt to animate my crutch attacks under the second "if" section, only the first frame of those animations is played. I'm using the same attack button because it's the same attack being animated in all directions. I combo'd with my arrow keys so that I could use the same attack key. When I change them to all to "else if" statements under my first "if" section they don't play because it is my understanding that once a key is used in an "if" statement all other attempts to use that key under that section will be ignored. My code is listed below. Solution? if(cursors.left.isDown) { player.body.velocity.x = -200; player.scale.setTo(.7, .7); player.play('walking'); } else if(cursors.right.isDown) { player.body.velocity.x = 200; player.scale.setTo(-.7, .7); player.play('walking'); } else if(cursors.down.isDown) { player.body.velocity.y = 200; player.scale.setTo(.7, .7); player.play('forward'); } else if(cursors.up.isDown) { player.body.velocity.y = -200; player.scale.setTo(.7, .7); player.play('backward'); } else if(sprintl.isDown) { player.body.velocity.x = -400; player.scale.setTo(.7, .7); player.play('sprinting'); } else if(sprintr.isDown) { player.body.velocity.x = 400; player.scale.setTo(-.7, .7); player.play('sprinting'); } else if(sprintu.isDown) { player.body.velocity.y = -400; player.scale.setTo(.7, .7); player.play('backsprint'); } else if(sprintd.isDown) { player.body.velocity.y = 400; player.scale.setTo(.7, .7); player.play('forwardsprint'); } else{ player.animations.stop(); player.frame = 29 player.body.velocity.y = 0; } if(cursors.left.isDown && fireButton.isDown) { player.body.velocity.x = -50; player.play('sidecrutch'); } else if(cursors.right.isDown && fireButton.isDown) { player.body.velocity.x = 50; player.play('sidecrutch'); } else if(cursors.down.isDown && fireButton.isDown) { player.body.velocity.y = 50; player.play('frontcrutch'); } else if(cursors.up.isDown && fireButton.isDown) { player.body.velocity.y = -50; player.play('backcrutch'); }
  12. Can I Rotate The Stage?

    Hey guys, I want to make a game which has two layers like the uploaded images. It is a skiing game, there are background elements in the layer1. Also there are game elements in the layer2. I don't know how to create layer in the game. So I think that I can use the phaser.world as the layer1 and the phaser.stage as the layer2. However, I found that I could not rotate the whole stage such as game.stage.rotation=0.1; It doesn't work. So I want to know how can I rotate the stage? Or can you give me some idea for this game? Thanks.
  13. Phaser Blank White Screen

    I am trying to create my first game with phaser but Im running into the issue of a blank white screen. I dont see any issue with my code and Im running a local server with wamp. Their isnt any errors in the console, but no matter what I change the code nothing will appear on the screen. Thank you for your help. main.js index.html
  14. Make tilemap/world fit in game?

    Hi, I just learned some basics of using tilemaps. I created a tilemap using Tiled, containing 32x32px tiles. The problem is, I can't resize the entire tilemap to fit the entire canvas. I need the layer in the tilemap or the world itself to fit the canvas. scale.setTo() works, but that's relative and I want to set the width and height to that of the game's canvas. Changing displayWidth and width doesn't seem to have any effects. The tilemap still appears small in the upper left corner of the canvas. Any suggestions guys? Code: var playLevel = { create: function() { this.map = this.game.add.tilemap('tilemap'); this.map.addTilesetImage('sewer', 'sewerTileset'); //Need to make this layer larger by a specified amount this.groundLayer = this.map.createLayer('Ground'); this.map.setCollisionBetween(1, 200, true, 'Ground'); this.groundLayer.resizeWorld(); }, update: function() { } } EDIT: I just found out that changing width and height DOES work. But for some reason, instead of the tilemap's width being 32 * 20 = 640, it returned 940, which is the width of the canvas. But the tilemap itself looks to be 640 pixels wide, so I don't know why the width and height properties don't correspond to the actual ones. So I guess I can't use it?
  15. [WIP][Phaser] Xmas delivery game

    Merry Christmas, everyone I am working on a christmas themed single button game. The player drops gifts to house chimneys. Player gets points (+10) if a good boy receives a gift (for now this means hitting the chimney once of a one-storied or two-storied beige house) and 0 otherwise. Game time is limited. Current version is here: https://indra-uolles.github.io/games/ In the future I plan to: - add the ability to drop 2 gifts at one house (you can drop one for now); - add 2 more house types (e.g. a house where 2 good boys live); - make the appearance of different house types more clear, so the player could decide more quickly whether it’s good for him to drop gifts at the forthcoming house and how many (1 or 2); - disable gifts throw for a while if the player makes mistakes (e.g. hits a roof or throws 2 gifts to bad boys); - add extra points for sharpshooting, e.g. +30 for 3 subsequent throws to a good boy; - add levels, levels will differ by house types quantities and player speed; - add roof break animation; - change font, change the way ttf fonts load; - rewrite all modules to ES-2015, build assets with some task runner, optimize assets load, make game work on mobile devices. Any feedback will be appreciated, maybe you have some suggestions about game art, instructions text, game mechanics, or performance.
  16. I've follow the example in phaser.io but my star didn't appear. Does in my codes have mystake? Can you help me find the problem? Thaanks This my Code... main.js
  17. Collision mask in Phaser

    hi guys, Why there is no collision mask (like in construct 2d) in phaser.I think that will be a good feature.
  18. Phaser-CE + AngularCLI boilerplate

    https://github.com/GrindheadGames/phaser-ce-angular-cli-boilerplate This is a super bare bones, hello world app using Angular-CLI and phaser-ce. Thought someone might find it useful
  19. emmmm, how can I stretch part of an image(or a sprite)? As you can see, from 1.png to 2.png, just stretch the mid part. Thank you all.
  20. Basic Phaser Game Example - ECMA2015

    I've been updating my base projects in-line with ECMA2015 standard. There is a lot of good stuff I really enjoy in this. I think the use of classes really makes code more easy on the eyes and easier to manager. I've created a base project using the Basic Game example tutorial using some of the new stuff. BasicPhaserGameECMA2015 I've not setup the menu or gameover states, but that should be simple enough. Hope you guys get some use out of it.
  21. retry level button not working

    hi, I've been using phaser for some time now but am having some issue with my game when I press the restart button. My game goes into an infinite loop and my player can't jump as high as he used to before. Its like as if gravity increased on the stage. and other objects disappear too like they go all the way down to the screen Can somebody tell me whats wrong here retry: function () { //this.clearCurrentState() this.levelSong.pause() this.winSong.pause() this.gameOverSong.pause() this.shutdown() this.game.state.start('Level2') }, shutdown:function() { this.game.world.removeAll() }, here is the link to my game (My problem is in level 2): https://exit-exitar.firebaseapp.com
  22. Angle towards Velocity

    Hi all, I am having a little trouble trying to get my sprite to angle itself towards its current velocity. At the moment the zombies in my game are pointing to the top. They have a random velocity set in the code below. Is it possible to rotate these depending on the direction is it moving? Here is the code I am currently using. The enemies are spawning fine and moving in random directions, just trying to get the lads to rotate to their velocity is a pain. createEnemies: function() { for (var x = 0; x < startingEnemies; x++) { // Create 5 enemies with random positions var enemy = enemies.create(this.game.rnd.integerInRange(50, 1870), this.game.rnd.integerInRange(50, this.game.world.height - 50), 'enemy'); this.game.physics.enable(enemy, Phaser.Physics.ARCADE); enemy.body.velocity.setTo(this.game.rnd.integerInRange(50, 150), this.game.rnd.integerInRange(50, 150)); enemy.body.bounce.set(1); enemy.body.collideWorldBounds = true; var animationZombie = enemy.animations.add('animationZombie'); enemy.animations.play('animationZombie', 30, true); } enemies.x = 100; enemies.y = 50; } I am using Phaser v2.9.2 and the ARCADE physics. This is my first game and post, so let me know if there is any other information you require. Cheers!
  23. Hi, I am making a snake vs block clone.So obviously the snake and block should collide.When blocks falls on snake collision is working(i mean separation is working).But when i drag snake to a block ,there is no separation when collision happens(only overlapping).Please help me.
  24. Global Variables across states

    Hi I've created a game which is pretty cool ( for me ) but I'm stuck now on the simplest of things. How do I run global variables across the different level states. the variables I want to use are; highscore, score, lives Where in the code do i declare these variables? I've tried a load of things but can't seem to crack it. https://github.com/wamballa/games/tree/master/arcade/category/jetpac3 Any help would be appreciatd and let me know if I need to explain more. Thanks
  25. on receiving signal this.game is null

    Hi, I'm looking for an explanation for the following behaviour: I have a class "Main" extending Phaser.State, a class "Emitter" and a class "Receiver" extending Phaser.Sprite If I dispatch a signal from "Emitter" and listen to it in "Receiver" everything works as expected or to be more precise: "this.game" has the object "App" assigned. If I reload the state and dispatch again the signal two things happen: The listener receives the signal two times. The 1st time "this.game" is null, the 2nd time "this.game" contains again the object "App" (please have a look at the screenshot showing the console output) Does anybody have an explanation for this behaviour? Thanks, Boris The code (TypeScript) export class Game extends Phaser.Game { constructor() { super(480, 640, Phaser.AUTO, 'content', null); this.state.add('Main', Main, true); console.log("Game started"); } } class Main extends Phaser.State { private emitter: Emitter; private receiver: Receiver; preload() { this.load.image('logo', 'assets/logo.png'); } create() { this.emitter = new Emitter(this.game); this.receiver = new Receiver(this.game); const rKey = this.input.keyboard.addKey(Phaser.Keyboard.R); rKey.onDown.add(() => { console.log('reload state Main'); this.game.state.start('Main',true,false); }, this); } } class Emitter { // -- Signals static onEventFromEmitter: Phaser.Signal = new Phaser.Signal(); constructor(private game: Phaser.Game) { const spaceKey = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); spaceKey.onDown.add(() => { Emitter.onEventFromEmitter.dispatch(); }, this); } } class Receiver extends Phaser.Sprite { constructor(game: Phaser.Game) { super(game, 0, 0, 'logo'); this.game.add.existing(this); this.subscribe(); } /** * Subscribe to events */ private subscribe(): void { Emitter.onEventFromEmitter.add(() => { console.log('Game object in Receiver, listening to onEventFromEmitter', this.game); }, this); } }