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

  1. Move world position on canvas

    Hi I have a newbie question that I feel silly asking but I couldn't find an example that demonstrated this yet. I have set the size of the canvas using the following code: var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'new-phaser-game', { preload: preload, create: create, update: update, render: render }); I have added a sprite that sits at the bottom of the screen full width (as expected) using the following: shapeMenu = game.add.sprite(0, 500, 'shapeMenu'); Now I would like to resize the world so that it sits inside this area with a margin around it (but inside the canvas). I have done this, but the world is sitting in the top left corner: game.world.setBounds(0, 0, 400, 400); Could any one advise on how I move this to the center of the screen (without moving the shapeMenu sprite as well)? Thanks!
  2. Animating other players

    Hello, I am creating realtime game using node + socket.io. At the moment I'm trying to figure out how could I animate other players movements. This is how I put other players on map: socket.on('showPlayers', (data) => { for (var key in data.players) { if(key != data.id) players[key] = game.add.sprite(data.players[key].position.x, data.players[key].position.y, 'player', 1); } }); And Updating their positions: socket.on('updatePlayers', (data) => { players[data.id].position = data.position; }); To animate my own player I am simply using: // Player player = game.add.sprite(48, 48, 'player', 1); player.animations.add('left', [3,5], 5, true); player.animations.add('right', [6,8], 5, true); player.animations.add('up', [9,11], 5, true); player.animations.add('down', [0,2], 5, true); Best Regards!
  3. If I have multiple states (say, 30) that are somewhat resource heavy (audio, background graphic, graphics), is it better to run a single preloader at the start and preload everything I'm going to need in the game, or preload the next state ahead in each state? So if I'm in a room, and can travel to 3 other rooms from my current room, should I be preloading those 3 rooms in my current state while the player is there, etc. or preloading them all in advance?
  4. Game seems slow when jumping.

    Hey, Still fairly new to game developing. Trying my hand at it. I've got most of a game created and have figured out a bunch of things. There are two glaring issues I can't seem to get past. My player has gravity applied. If he falls from a certain height and the gravity is high, he falls through the floor tiles. If I turn down the gravity so this doesn't happen, the game seems slow. You can check out a working version of the game at http://gf-game.herokuapp.com/ . I looked into switching to P2 Physics but it just seemed way more complicated than I needed it to be for this type of game. Any help will do.
  5. Hi I'm new to phaser and have been trying to use some of the examples as a starting point. I'm planning on using the "Pick Up Object" example, but restrict the area that the tetris shapes are placed in - so that they land on a solid platform. I would then add 3 x buttons to add more of the shapes onto the screen. Example here: https://phaser.io/examples/v2/p2-physics/pick-up-object Would the best way to achieve this be to build the solid platform using a kinematic sprite as documented here: http://phaser.io/examples/v2/p2-physics/kinematic-body If not, what is the best way define the area that the shapes are placed in - so they do not fall behind or in front of the platform and buttons? Thanks! Tom
  6. Hey! This is my first thread, I'm new here, so hello everyone! I started last week with phaser, and I am trying to test some features like extend the world, adding other sprites to background, adding a camera, all of this in the "game" that you make in this tutorial. So now, I want to learn how friction works in platforms or ground. game.physics.startSystem(Phaser.Physics.ARCADE); platforms = game.add.group(); platforms.enableBody = true; var ground = platforms.create(0, game.world.height - 64, 'ground'); ground.scale.setTo(4, 2); ground.body.immovable = true; ground.body.friction.x = 0; I want to set my ground like ice and that the player can slide, but it didn't work and I don't know why. If there is no other code that involves "ground", maybe the problem is with the player sprite? :S The version of phaser i am using is 2.9.4 btw.
  7. Hey guys, I had related topics before, but let me give a short summary: I am working on a time-based game, roughly similar to guitar hero. For that, I use deltaTime and PhysicsElapsed like this: update: function() { deltaTime = (this.time.elapsedMS)/(1000/60) this.time.physicsElapsed = this.time.elapsedMS*0.001; } So if the framerate drops to 30, deltaTime = 2 and physicsElapsed will also be double the value it is normally (1/60 as in 1/desiredFPS). It always seemed to work perfectly fine. Sure, it leads to a loss of accuracy whith lower framerates or bigger lags, but that's another story. I've tested it with 30fps (forced with a screen capture tool) and it was running at the same speed as it would with 60, so everything is alright. Just yesterday, I found out that when played on a 144hz monitor, the game runs in slow motion. I've checked all the vars above, and I could not find a problem. The game runs at 144 fps, deltaTime is around 0.42 as it should be and physicsElapsed naturally also has the value I expected (0.006999999999999999 for example). But all the motions are at half speed. Or more like 0.42x speed. The spawns, which are also tied to the game time are correct, so no problems there, but everything just moves too slow. The big mistery is: if somebody has a 30hz display, will it run at double speed which wouldn't be playable at all? I just can't think of a reason why this would happen as everything works fine with software caused differences in fps and especially since all the values seem to be in check. Maybe I am overlooking something? Maybe the hardware has some other effect that takes place outside of my code logic? I read that there are issues with other refresh rates, but I was under the impression my code would take care of that. Please help D:
  8. p2js prismatic springs

    Hi. Prismatic and Spring joints in p2js seem pretty straightforward. I was wondering why using constant rest length, stiffness and damping for a spring would change its behavior when a body's local anchor is changed. Fiddle: http://jsfiddle.net/gauravdixitv/83bkhr3f/ (phaser/p2js template from inkfood) From the fiddle, all the springs use share the same parameters except the local anchor of body A. Why do the springs behave differently? :/
  9. bouncing ball maximum height

    Let's say I have 3 balls in a game: large, medium, small. I want each of these balls to bounce to a maximum height (defined by me) but without bouncing at the top. Simply to arc naturally to the maximum height, then start falling again. Is there a straightforward way to accomplish this?
  10. Hi everyone, // If I make grammar mistakes, please excuse me. I'm still not fluent in English ahah I'm a beginner on Phaser, had to have a look into that for my courses. I'm now upgrading a basic tutorial and I want to use a timer (a countdown) in that game but it really doesn't work, it only create a black screen. To do this, I followed this tutorial : https://www.joshmorony.com/how-to-create-an-accurate-timer-for-phaser-games/ I tried other, without success. Some were a bit to hard to understand, others were pretty ugly ! So here is the code I used , can you help me ? : var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); function preload() { game.load.image('sky', 'assets/sky.png'); game.load.image('ground', 'assets/platform.png'); game.load.image('star', 'assets/star.png'); // on ajoute un diamant game.load.image('dmd','assets/diamond.png') game.load.spritesheet('dude', 'assets/dude.png', 32, 48); } var player; var platforms; var cursors; var stars; var diamonds; var score = 0; var scoreText; var countdown; function create() { // We're going to be using physics, so enable the Arcade Physics system game.physics.startSystem(Phaser.Physics.ARCADE); // A simple background for our game game.add.sprite(0, 0, 'sky'); // The platforms group contains the ground and the 2 ledges we can jump on platforms = game.add.group(); // We will enable physics for any object that is created in this group platforms.enableBody = true; // Here we create the ground. var ground = platforms.create(0, game.world.height - 64, 'ground'); // Scale it to fit the width of the game (the original sprite is 400x32 in size) ground.scale.setTo(2, 2); // This stops it from falling away when you jump on it ground.body.immovable = true; // Now let's create two ledges var ledge = platforms.create(400, 400, 'ground'); ledge.body.immovable = true; ledge = platforms.create(-150, 250, 'ground'); ledge.body.immovable = true; ledge = platforms.create(-100, 510, 'ground'); ledge.body.immovable = true; // The player and its settings player = game.add.sprite(32, game.world.height - 150, 'dude'); // We need to enable physics on the player game.physics.arcade.enable(player); // Player physics properties. Give the little guy a slight bounce. player.body.bounce.y = 0.2; player.body.gravity.y = 350; player.body.collideWorldBounds = true; // Our two animations, walking left and right. player.animations.add('left', [0, 1, 2, 3], 10, true); player.animations.add('right', [5, 6, 7, 8], 10, true); // Finally some stars to collect stars = game.add.group(); // We will enable physics for any star that is created in this group stars.enableBody = true; // Here we'll create 12 of them evenly spaced apart for (var i = 0; i < 10; i++) { // Create a star inside of the 'stars' group var star = stars.create(i * 70, 0, 'star'); // Let gravity do its thing star.body.gravity.y = 15; // This just gives each star a slightly random bounce value star.body.bounce.y = 0.2 + Math.random() * 0.2; } // On ajoute les diamants diamonds=game.add.group(); diamonds.enableBody=true; // création des diamants dans l'espace de jeu for (var i = 0; i < 3; i++) { var dmd = diamonds.create(i * 70, 0, 'dmd'); dmd.body.gravity.y = 30; dmd.body.bounce.y = 0.1 + Math.random() * 0.2; } countdown.startTime = new Date(); countdown.totalTime = 120; countdown.timeElapsed = 0; countdown.createTimer(); countdown.gameTimer = game.time.events.loop(100, function(){ countdown.updateTimer(); }); // The score scoreText = game.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' }); // Our controls. cursors = game.input.keyboard.createCursorKeys(); } function update() { // Collide the player and the stars (et les diamants du coup) with the platforms game.physics.arcade.collide(stars, platforms); game.physics.arcade.collide(diamonds, platforms); game.physics.arcade.collide(player, platforms); // Checks to see if the player overlaps with any of the stars, if he does call the collectStar function game.physics.arcade.overlap(player, stars, collectStar, null, this); // idem pour les diamants game.physics.arcade.overlap(player, diamonds, collectDiamonds, null, this); // Reset the players velocity (movement) player.body.velocity.x = 0; if (cursors.left.isDown) { // Move to the left player.body.velocity.x = -150; player.animations.play('left'); } else if (cursors.right.isDown) { // Move to the right player.body.velocity.x = 150; player.animations.play('right'); } else { // Stand still player.animations.stop(); player.frame = 4; } // Allow the player to jump if they are touching the ground. if (cursors.up.isDown && player.body.touching.down) { player.body.velocity.y = -350; } } function collectStar (player, star) { // Removes the star from the screen star.kill(); // Add and update the score score += 10; scoreText.text = 'Score: ' + score; } function collectDiamonds (player, dmd) { dmd.kill(); score += 50; scoreText.text = 'Score: ' + score; } function createTimer(){ var countdown = this; countdown.timeLabel = countdown.game.add.text(countdown.game.world.centerX, 100, "00:00", {font: "100px Arial", fill: "#fff"}); countdown.timeLabel.anchor.setTo(0.5, 0); countdown.timeLabel.align = 'center'; } function updateTimer (){ var countdown = this; var currentTime = new Date(); var timeDifference = countdown.startTime.getTime() - currentTime.getTime(); //Time elapsed in seconds countdown.timeElapsed = Math.abs(timeDifference / 1000); //Time remaining in seconds var timeRemaining = countdown.timeElapsed; //Convert seconds into minutes and seconds var minutes = Math.floor(countdown.timeElapsed / 60); var seconds = Math.floor(countdown.timeElapsed) - (60 * minutes); //Display minutes, add a 0 to the start if less than 10 var result = (minutes < 10) ? "0" + minutes : minutes; //Display seconds, add a 0 to the start if less than 10 result += (seconds < 10) ? ":0" + seconds : ":" + seconds; countdown.timeLabel.text = result; if(countdown.timeElapsed >= countdown.totalTime){ // On cherche la fin du timer result = "Rate !"; } }
  11. Flappy Fish

    My version of the flappy series. You can collect coins and later buy fishes with them. I had fun drawing these fellows. Game made with Phaser Play game: Flappy Fish
  12. 'Sprite.world' gives 0 at first

    So my problem is that I have a sprite that is giving me 0 for sprite.world.x and sprite.world.y (although it clearly isn't at 0,0). What's weird is that printing out the sprite.world.x gives 0 at first but adding a delay of 50ms it gives me the correct position (in case you're wondering nothing is happening during the delay) Below is the code snippet that i am using (just to be 100% sure). Basically I have a group (located at a certain position) with a specific rotation that has a sprite (the one I'm having issues with) at a certain location. The first printed out value is 300 (which obviously isn't true). I added a delay of 50 ms after the last line then printed out newR.world.x and got the correct value (813). The provided code snippet is the last thing I have in my create function (and the update function is empty). As stated previously nothing is happening by the time the delay starts till it ends (I am only left with the preload function).
  13. 'Sprite.world' gives 0 at first

    So my problem is that I have a sprite that is giving me 0 for sprite.world.x and sprite.world.y (although it clearly isn't at 0,0). What's weird is that printing out the sprite.world.x gives 0 at first but adding a delay of 50ms it gives me the correct position (in case you're wondering nothing is happening during the delay) Below is the code snippet that i am using (just to be 100% sure). Basically I have a group (located at a certain position) with a specific rotation that has a sprite (the one I'm having issues with) at a certain location. The first printed out value is 300 (which obviously isn't true). I added a delay of 50 ms after the last line then printed out newR.world.x and got the correct value (813). The provided code snippet is the last thing I have in my create function (and the update function is empty). As stated previously nothing is happening by the time the delay starts till it ends (I am only left with the preload function). Note: I accidentally posted my question twice please ignore the duplicate. ( I couldn't find a delete button for my duplicate post)
  14. Hi guys, I'm new to the framework but I googled around abit and couldn't find an answer to this: I’m making a tile mapped game where the player needs to make their way through a tiled level by moving upwards. To achieve this the camera follows the player around a rectangular world My question is about creating 2 background TileSprites that scroll with the camera BUT not at the same speed as the camera to achieve the effect of having a background with TileSprite 1 in the distance and TileSprite 2 in the far distance Maybe something like an event handler that works like this: onCameraPositionChange(yDistance){ backgroundTileSprite1.scrollY -= yDistance/2 backgroundTileSprite2.scrollY -= yDistance/4 } Right now my setup is like this: TileSprite 1 -> moves with the camera TileSprite 2 -> stays still in background using TileSprite.fixedToCamera It looks okay right now, but I think this would convey a more convincing sense of distance. Cheers and thank you!
  15. Hi All, I have been creating a mobile game using phaser and packaging it using cordova. I need a good video ad plugin for my game. Tried ADMOB, there was a Huge FPS drop while pre-loading the video ad. (https://github.com/floatinghotpot/cordova-admob-pro) Kindly Suggest me a Good One
  16. Camera problem - following player

    Hello I'm having an interesting problem with my camera, this is how my game looks without the camera following the player this is how it looks following the player... (the only good thing is that it actually follows the player) but I would like to know how to set up the bounds of the camera and to make sure it doesn't ... well do this. here's my code : scenes.scene3 = function(){}; //Player speed var link, vel = 150; //Map/Level var map; //Tiled Layers var floor, water,walls; //Object Tiled Layers var rocks var bushes1, bushes2, bushes3, bushes4; scenes.scene3.prototype = { preload: function (){ game.load.image('tiles', 'Assets/Sprites/Levels/zelda_01.png'); music = game.add.audio('openWorld'); music.addMarker('openWorld', 0, 16, true); game.renderer.resize( 1216/2, 800/2); }, create: function (){ //Game itself game.world.setBounds(0,0, 1216, 800); game.physics.startSystem(Phaser.Physics.ARCADE); map = game.add.tilemap('level_01'); map.addTilesetImage('tiles'); floor = map.createLayer('ground'); walls = map.createLayer('walls'); water = map.createLayer('water'); map.setCollisionBetween(0, 100, true, 'walls'); map.setCollisionBetween(0, 100, true, 'water'); //Objects layer related rocks = game.add.physicsGroup(); map.createFromObjects('rocks','ROCK','tiles', 48, true, false, rocks); rocks.forEach(function(rocks){rocks.body.immovable = true;}); bushes = game.add.physicsGroup(); map.createFromObjects('bushes', 'BUSHTOP', 'tiles', 37, true, false , bushes); map.createFromObjects('bushes', 'BUSHBOT', 'tiles', 35, true, false , bushes); map.createFromObjects('bushes', 'BUSHLEFT', 'tiles', 36, true, false , bushes); map.createFromObjects('bushes', 'BUSHRIGHT', 'tiles', 34, true, false , bushes); bushes.forEach(function(bushes){bushes.body.immovable = true;}); // music.play('openWorld', 0,1,true); // Player link = game.add.sprite((centerX-500), 100, 'LinkMovement'); link.scale.setTo(0.25, 0.25); link.animations.add('walkHorizontalRight', [6,7,8]); link.animations.add('walkHorizontalLeft', [9,10,11]); link.animations.add('walkVerticalDown', [0,1,2]); link.animations.add('walkVerticalUp', [3,4,5]); game.physics.enable(link); link.body.collideWorldBounds=true; //Life bar life = game.add.sprite((centerX-600), (centerY-675), 'lifeBar'); life.scale.setTo(0.15, 0.15); life.animations.add('fullHP', [0]); life.animations.add('twoHP', [1]); life.animations.add('oneHP', [2]); life.animations.add('Dead', [3]); cursors = game.input.keyboard.createCursorKeys(); var b1 = game.add.button(900,300, 'buttonFire', function() {fire();}); b1.scale.setTo(0.25,0.25); game.camera.bounds = (608,400); game.camera.follow(link); }, update: function (){ game.physics.arcade.collide(link, walls); game.physics.arcade.collide(link, water); game.physics.arcade.collide(link, rocks); game.physics.arcade.collide(link, bushes); if(cursors.up.isDown){ link.body.velocity.y = -vel; link.animations.play('walkVerticalUp', 9, true); } else if(cursors.down.isDown){ link.body.velocity.y = vel; link.animations.play('walkVerticalDown', 9, true); } else{ link.body.velocity.y = 0; link.animations.stop('walkVerticalUp'); link.animations.stop('walkVerticalDown'); } if(cursors.left.isDown){ link.body.velocity.x = -vel; link.animations.play('walkHorizontalLeft', 9, true); } else if(cursors.right.isDown){ link.body.velocity.x = vel; link.animations.play('walkHorizontalRight', 9, true); } else{ link.body.velocity.x = 0; link.animations.stop('walkHorizontalRight'); link.animations.stop('walkHorizontalLeft'); } }, fire: function(){ console.log('firing') var bullet = bullets.getFirstDead(); bullet.reset(link.x, link.y); }, drawHealthBar: function(){ if (hitPoints === 3) { life.animation.play('fullHP'); } else if (hitPoints === 2) { life.animation.play('twoHP'); } else if (hitPoints === 1) { life.animation.play('oneHP'); } else if (hitPoints === 0) { life.animation.play('Dead'); } } };
  17. How to make a phaser game with a lobby

    I want to design a multiplayer phaser game that has a lobby, you can review your information or talk with friends via chat while you are waiting until you are matched with another player (is a fight game, pokemon style). -How do I get this? should I develop everything like a normal socket.io/chat project and then start the game when you find a match? -Should I start the game instance since the beginning, and the lobby would be a state, the fight another state and then back to the lobby? I'm very new to this but I'm excited to start developing, I'll appreciate any guidance, thanks
  18. Phaser game slow on 4k

    Hi, general question about an issue I have encountered with a phaser.js game I have built which is running very slowly on a 4k screen only. Just wondering if anyone has encountered issues with 4k screens before? i'm sure it is something i have done, but just wondering the most likely place to look? Thank you
  19. Ignore missing images

    I am making a level viewer for a game using phaser, I loop through a large array representing the game grid and take the item names from the game save and place them in my phaser world in a loop. I take whatever the game name for the item is and map it to a phaser image, my issue is that I don't want to map every possible item type to an image, if phaser askes for an image that i have not loaded, can I just ignore it without the green texture being plastered over it?
  20. Hi, We're having a nightmare trying to incorporate Spriter into our project. It seems that the Spriter library doesn't like sprites living in subfolders within the project. So, as a test, we placed some frames in the project root folder, and made an animation from them (http://psygnomi.com/tmp/FailTest.zip). Here we get: Cannot set frameName: ...with each animation frame displayed. Nothing animates. However, if I change line 3575 in spriter.js to this: this._sprite.frameName = file.name + '.png'; by adding the "+ '.png' " part, it works. (http://psygnomi.com/tmp/WorkingTest.zip) If we try the modified library with a project containing frames within folders, we get the same problem. I think it stems from Spriter incorporating the folder path into the frame name, but referencing it using only the filename. Obviously, placing hundreds if not thousands of sprite animation frames in the root folder isn't helpful, and will take many days to re-animate everything. Any help is greatfully received and appreciated. Mark & Stoo
  21. Move camera without bounds

    So this seems like it should be fairly simple, I want the camera to always follow the player even if they go outside the bounds of the map. How would I do that?
  22. Rotating walls around the player.

    Hello, so I'm trying to make it so that the player can 'rotate' the camera around them. For example when they press E and Q the world rotates and things like walls get repositioned and their angle changes. Here is the code I have written: function rotateWorld(angle) { for (var i = 0; i < walls.getAll().length; i++) { var wall = walls.getAll()[i]; wall.angle += angle; var delta_x = wall.x - player.x; var delta_y = wall.y - player.y; var thetaAngle = Math.atan2(delta_y, delta_x) * 180 / Math.PI; wall.x = player.x + lengthdir_x(distance(wall.x, player.x, wall.y, player.y), thetaAngle + angle); wall.y = player.y + lengthdir_y(distance(wall.x, player.x, wall.y, player.y), thetaAngle + angle); } } function lengthdir_x(length, direction) { return Math.cos(direction * Math.PI / 180) * length; } function lengthdir_y(length, direction) { return Math.sin(direction * Math.PI / 180) * length; } function distance(x1, x2, y1, y2) { return Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1)); } So far this sort of works but objects lose proper positioning after rotating a bit. It seems like they are not rotating around a perfect circle. Any help would really be appreciated and if there is a way to do this that's easier please let me know. Thanks!
  23. So I went through the basic platformer tutorial and one thing I don't like is that everything is thrown into the create an update methods. I'd like to clean that up a bit by breaking the player into it's own class: /** * Created by Robert on 1/4/18. */ /** * Create the game and define the size of the window. * * Phase.AUTO will use WebGL if the browser supports it * otherwise uses HTML5 canvas. * * @type {Phaser.Game} */ var game = new Phaser.Game(800, 600, Phaser.AUTO); /** * Create the game state. * * Preload: Where you load assets. * * Create: Called once at start. * * Update: Called every frame. * * @type {{preload: GameState.preload, create: GameState.create, update: GameState.update}} */ var GameState = { preload: function () { game.load.image('sky', 'assets/sky.png'); game.load.image('ground', 'assets/platform.png'); game.load.image('star', 'assets/star.png'); game.load.spritesheet('dude', 'assets/dude.png', 32, 48); }, create: function () { game.physics.startSystem(Phaser.Physics.ARCADE); game.add.sprite(0, 0, 'sky'); platforms = game.add.group(); platforms.enableBody = true; var ground = platforms.create(0, game.world.height - 64, 'ground'); ground.scale.setTo(2, 2); ground.body.immovable = true; var ledge = platforms.create(400, 400, 'ground'); ledge.body.immovable = true; ledge = platforms.create(0, 50, 'ground'); ledge.body.immovable = true; /** * Create the player. */ player = new Player(game, 32, game.world.height - 150, 'dude', 0); }, update: function () { var hitPlatform = game.physics.arcade.collide(player, platforms); player.update(hitPlatform); } }; game.state.add('GameState', GameState); game.state.start('GameState'); class Player extends Phaser.Sprite { constructor(game, x, y, sprite, frame) { super(game, x, y, sprite, frame); game.add.sprite(this); game.physics.arcade.enable(this); this.body.bounce.y = 0.2; this.body.gravity.y = 300; this.collideWorldBounds = true; this.animations.add('left', [0, 1, 2, 3], 10, true); this.animations.add('right', [5, 6, 7, 8], 10, true); this.cursors = game.input.keyboard.createCursorKeys(); } update(hitPlatform) { this.velocity.x = 0; if (this.cursors.left.isDown) { this.body.velocity.x = -150; this.animations.play('left'); } else if (this.cursors.right.isDown) { this.body.velocity.x = 150; this.animations.play('right'); } else { this.animations.stop(); this.frame = 4; } if (this.cursors.up.isDown && this.body.touching.down && hitPlatform) { this.body.velocity.y = -350; } } } Here is my code, I keep getting an error saying: TypeError: undefined is not an object (evaluating 'this.velocity.x = 0') for the first line of Player's update method. I'm not seeing what is wrong here. Any help would be really appreciated.
  24. 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.
  25. 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'); }