Search the Community

Hello guys I am new to Phaser and I've been following some tutorials. I have just finished the Rat Attack Tutorial located here https://phaser.io/examples/v2/create/rat-attack However, I am running into some difficulty. Can someone help me figure out how to get the rats to appear form the right side of the screen instead of the left side. Currently the rats move from left to right in this tutorial. I would like it to move from right to left. Can someone help me figure this out? here is the code function preload(){ game.load.image('player', 'assets/player.png'); game.load.image('Enemies', 'assets/greenEnemy.png'); } var enemy; function create(){ game.physics.startSystem(Phaser.Physics.ARCADE); game.stage.backgroundColor = '#2d2d2d'; enemy = game.add.physicsGroup(); var y = 80; for(var i =0; i < 9; i++){ var allenemies = enemy.create(game.world.randomX, y, 'Enemies'); allenemies.body.velocity.x = game.rnd.between(100,300); y += 48; } player = game.add.sprite(0, 50, 'player'); game.physics.arcade.enable(player); cursors = game.input.keyboard.createCursorKeys(); } function update(){ enemy.forEach(checkPos, this); game.physics.arcade.overlap(player, enemy, collisionHandler, null, this); player.body.velocity.x = 0; player.body.velocity.y = 0; if(cursors.left.isDown){ player.body.velocity.x = -200; player.body.velocity.scale = 1; } else if(cursors.right.isDown){ player.body.velocity.x = 200; player.scale.x = 1; } if (cursors.up.isDown) { player.body.velocity.y = -200; } else if (cursors.down.isDown) { player.body.velocity.y = 200; } } function checkPos(enemy){ if(enemy.x > 800){ enemy.x = -100; } } function collisionHandler (player, rat) { player.x = 400; player.y = 32; }

How can I check if two sprite are overlapping or not at a given moment if both of them has special shape with loadpolygon? (eg. crosshairs rectangle vs. enemy on a click) Do I need to use P2? Maybe the solution is obvious, but I am absolutely beginner in Phaser.

Hi guys! I'm new to Phaser, with basic knowledge of JS. I have a problem with my platform game, which I've started with this tutorial. https://phaser.io/news/2015/09/platformer-tutorial-part2 The code is different from every tutorial I've seen on Phaser main webpage, so It's hard for me to get in to. (no update, create, preload function in main is the beggining of all my problems)... I wanted to add a shooting system, which I learned from this: https://phaser.io/examples/v2/arcade-physics/group-vs-group I applied this code to the platformer engine, and I am not sure if I did it correctly. I have created shooting system in Player object, because I didn't know how to do it other way. This code look like this: //In player: Platformer.Player = function (game_state, position, properties) { "use strict"; Platformer.Prefab.call(this, game_state, position, properties); (...) //bullets bullets = game.add.group(); bullets.enableBody = true; bullets.physicsBodyType = Phaser.Physics.ARCADE; bullets.callAll('events.onOutOfBounds.add', 'events.onOutOfBounds', resetBullet, this); bullets.setAll('checkWorldBounds', true); bullets.createMultiple(100, 'pocisk'); function resetBullet (bullet) { bullet.kill(); } //In player.prototype.update : Platformer.Player.prototype = Object.create(Platformer.Prefab.prototype); Platformer.Player.prototype.constructor = Platformer.Player; Platformer.Player.prototype.update = function () { "use strict"; this.game_state.game.physics.arcade.collide(this, this.game_state.layers.collision); this.game_state.game.physics.arcade.overlap(this, this.game_state.groups.enemies, this.hit_enemy, null, this); (...) //bullets if (this.spaceKey.isDown) { this.fireBullet(); } this.fireBullet = function() { if (game.time.now > bulletTime) { bullet = bullets.getFirstExists(false); if (bullet) { this.game_state.game.physics.arcade.overlap(bullet, Platformer.Enemy, this.zderzenie, null, this); bullet.reset(this.body.x + 6, this.body.y - 8); bullet.body.allowGravity = false; if (this.profil==1) //direction of shooting bullet.body.velocity.x = 300; else bullet.body.velocity.x = -300; if(bullet.body.x==Platformer.Enemy.x && bullet.body.y==Platformer.Enemy.y) bullet.kill(); bulletTime = game.time.now + 250; } } } And it works, the player is shooting circles in left or right direction. The problem starts now. I need to somehow code the collision between the bullet and the enemy. As you can see above, I wrote thing like this : if(bullet.body.x==Platformer.Enemy.x && bullet.body.y==Platformer.Enemy.y) bullet.kill(); But this don't work. What can I do? It is the problem with seperate objects? Or maybe I know nothing and made serious stupid mistakes?

Hello, I want to make a scene where the enemy will follow the player around

I have a function for my enemies (which in this game are bees) Bees = function(index, game, x, y){ this.bee = game.add.sprite(x,y,'bee'); this.bee.anchor.setTo(0.5,0.5); this.bee.name = index.toString(); game.physics.enable(this.bee,Phaser.Physics.ARCADE); this.bee.body.allowGravity = 0; this.bee.body.immovable = true; this.bee.body.collideWorldBounds = true; this.beeTween = game.add.tween(this.bee).to({ y: this.bee.y + 1 },500,'Linear',true,0,-1,true); and to add them into the game I have Game.World1.prototype = { create:function(game){ //other code..... enemy1 = new Bees(0,game,240,40); enemy2 = new Bees(0,game,312,140); }, However, once I place these enemies into the game, I have no idea how to make them move independently. For example: enemy1 = new Bees(0,game,240,40); this.enemy1Tween = game.add.tween(this.enemy1).to({ x: this.enemy1.x - 40 },4000,'Linear',true,0,-1,true); Gives the error "Cannot read property 'x' of undefined" x: this.enemy1.x - 40 How can I make each enemy move independently? Or even better, how can I go about making each enemy move along different length platforms without falling off? Thank you.

Update - the game is now available on Google Play as a native app: https://play.google.com/store/apps/details?id=com.afgt.naval The link http://www.askforgametask.com/mobile/games/naval/ Description Naval Battle is an HTML5 arcade game in which your mission is to destroy a fleet of enemy cargo ships before they deliver ammunition and provisions to the enemy troops. You are the commander of the VIC Victory, a fast light tank used by the Mobile Costal Artillery in defending a country against sea attacks. Your tank is armed with a limitless supply of anti-ship shells, but be aware that only one shell can be in view at a time! You have only 70 seconds to sink all enemy ships. They are not armed, but they are protected by the gun fire from a fortified enemy battery on the other side of the bay. And they are moving with different speeds. So you need to aim very carefully! The game ends if you fail to complete the mission within the 70-second time limit or if your tank is destroyed by enemy gun fire. Controls Use the left and right keys to move. Use the up or space key to fire. Screenshots

Hello, I'm new with phaser and I'm building a platform game. I'm using tiled to create my map, I created an object Layer to place the player and the same enemy in specific points of the map, I did the enemies with this: var enemies = this.game.add.group(); this.map.createFromObjects('objectsLayer', 81, 'zombie', 0, true, false, this.enemies); They are showing on the map correctly but I don't know how to give them gravity, change their hitbox, animations, etc. They are just sprites floating there with no life. I want to give an enemy all the configuration and then make it affect all the enemies, also put them in a group. If there is another way please tell me. I was using this tutorial https://gamedevacademy.org/html5-phaser-tutorial-top-down-games-with-tiled/ sorry for my english.

Hi guys! I'm new to coding & to the forum, and I'd like some assistance in creating a function that spawns a new enemy at regular intervals at random locations on the screen. Attached is the code I've been tweaking with & all related content needed to run the game.html, but I am simply unsure how to go about creating this function, or how to call it at regular intervals. Thanks in advance! Jordan game.html gamemain1.js jquery.min.js NewGame.js processing.min.js

So I'm try to get my enemy sprite to follow a motion path and depending on direction the sprite will change animation. So turning left will show the left side, moving up shows its back and moving down shows its face. I can't seem to get it to work, through hours of struggling with it. any help would be appreciated. Here is my code. I almost had it working with prototype, but the final game will be built in this format. /* * initalise Phaser framework with width:960px, height:540px */var game = new Phaser.Game(960, 540, Phaser.AUTO, 'gameContainer', { preload: preload, create: create, update: update, });/* * Preload runs before the game starts. Assets such as images and sounds such be preloaded here. * A webserver is required to load assets. * * Also in this function we set game scale so it full browser width. */function preload() { // set to scale to full browser width this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.scale.parentIsWindow = true; //set the background color so can confirm the game renders in the browser this.stage.backgroundColor = '#4488cc';this.game.renderer.renderSession.roundPixels = true; //preload images & sounds //game.load.image('key', 'folder/filename.png');//this.load.image('nazi', 'image/nazi.png');game.load.spritesheet('nazi', 'images/nazi.png', 128, 128, 6);this.bmd = null; this.alien = null;this.mode = 0;//Use this website to set enemy movements http://phaser.io/waveforms. Export save data from the console log.this.points = {"type":0,"closed":true,"x":[120,120,260,260,200,180,120],"y":[368,108,108,308,308,368,368]};this.pi = 0;this.path = [];}/** Add game variables here*/var nazi;/* * Create runs once only when Phaser first loads * create the game scene by adding objects to the stage */function create() {bmd = this.add.bitmapData(this.game.width, this.game.height);bmd.addToWorld();/*For testingthis.alien = this.add.sprite(0, 0, 'alien');this.alien.anchor.set(0.5);*/this.nazi = this.add.sprite(0, 0, 'nazi');this.nazi.anchor.set(0.5);var py = this.points.y;/*Original Code//define the animationnazi.animations.add('walk');//start the animation at 30fpsnazi.animations.play('walk', 3, true);*///define the animationthis.nazi.animations.add('walkDown', [2, 3]);//start the animation at 30fpsthis.nazi.animations.play('walkDown', 3, true);//define the animationthis.nazi.animations.add('walkLR', [4, 5]);//start the animation at 30fpsthis.nazi.animations.play('walkLR', 3, true);//define the animationthis.nazi.animations.add('walkUp', [0, 1]);//start the animation at 30fpsthis.nazi.animations.play('walkUp', 3, true);}function plot() {this.bmd.clear();this.path = [];/*ROTATION CODE*/var ix = 0;/**///Sets the speed of the spritevar x = 0.5 / game.width;//looping through plotting points from x and y arrayfor (var i = 0; i <= 1; i += x) {var px = this.math.linearInterpolation(this.points.x, i);var py = this.math.linearInterpolation(this.points.y, i);/* ROTATION CODE to follow direction of path*/var node = { x: px, y: py, angle: 0 };if (ix > 0){node.angle = this.math.angleBetweenPoints(this.path[ix - 1], node);}this.path.push(node);ix++;/**///this.path.push( { x: px, y: py });this.bmd.rect(px, py, 1, 1, 'rgba(255, 255, 255, 1)');}for (var p = 0; p < this.points.x.length; p++) {this.bmd.rect(this.points.x[p]-3, this.points.y[p]-3, 6, 6, 'rgba(255, 0, 0, 1)');}}/* * Update runs continuously. Its the game loop function. * Add collision detections and control events here */function update() {plot();// Reset the players velocity (movement) //this.nazi = 'nazi'; /* For Testingthis.alien.x = this.path[this.pi].x; this.alien.y = this.path[this.pi].y;//ROTATION CODE: this.alien.rotation = this.path[this.pi].angle; */this.nazi.x = this.path[this.pi].x; this.nazi.y = this.path[this.pi].y;//this.nazi.rotation = this.path[this.pi].angle;this.pi++; if (this.pi >= this.path.length) { this.pi = 0; }/*// Flipping the player image based on the velocityif(nazi.body.velocity.x > 0){ //player is moving right nazi.scale.x = -1; nazi.animations.play('walkLR'); } else if(nazi.body.velocity.x < 0){ //player is moving left nazi.scale.x = 1; //flip the image nazi.animations.play('walkLR'); } else if (nazi.body.velocity.y < 0){ nazi.animations.play('walkUp'); } else if(nazi.body.velocity.y > 0){ //player is not moving nazi.animations.play('walkDown'); }*/}

Hey, I'm trying to practice the phaser framework (and programming in general) by trying to recreate a doodle jump/papi jump game. I have the little ball jumping, enemy on the screen with collision detection and all the platforms being recycled once they die, however I have not been able to recycle (or even place) my enemies on the platforms. Because the platforms are not fixed I can't simply say ( x, y) cause the platform won't always be there. I tried: enemy = game.add.sprite( game.platform.centerX, game.platform.centerY, 'enemy' ); but to no avail. Am I on the right track? or not even close? Has anyone ever had the same problem and just overcome it in a different way, like creating a platform with an enemy on it by itself, and that entire sprite being its own class that's called on via a timer delay? Hopefully this is not too n00by of a question. Tips or directing me to resources are all helpful. Just trying to kill my 'hero', guys(and gals).. thanks again!

Hey everyone! I'm making a top-down game with waves, but the problem is the enemy AI. As it stands now the enemy rotates and goes towards the player, but when they all go after the player they come close to each other and it looks silly, like this: The thing is that I want the enemies to avoid eachother so they don't collide. If anybody knows how to do this, help is really appreciated! this is my code for their behavior: enemy1Group.forEachAlive(function (enemy) { enemy.body.rotation += 20, enemy.body.collideWorldBounds = true, enemy.body.velocity.x = 0, enemy.body.velocity.y = 0, chasePlayer(enemy); ; }) function chasePlayer(enemy) { if (player.alive) { game.physics.arcade.moveToObject(enemy, player, 150); } }

I'm trying to add some movement to the enemies in my game, I have a function which includes the following: var enemyMovement = game.add.tween(this.enemies.children[0]); enemyMovement.to({x: 230}, 1000, Phaser.Easing.Linear.None) .to({x: 50}, 1000, Phaser.Easing.Linear.None) start(); I have two problems: 1. I want the sprite to move at a constant speed, at the moment there is easing which I thought Phaser,Easing.Linear.None would handle. 2. The chaining will not work, the sprite will not move back and I have not idea why, I am getting no errors in my code. Thanks

I have a group of enemies in a project i'm working on, I want them to move independent from one another, I can do this, but the animations are playing up. There is easing even though I have set it so there shouldnt be, also whatever I do the tween wont yoyo, repeat etc. Chaining is also not working, here is an example of what i'm doing: var enemyOne = this.enemies.children[0]; game.add.tween(enemyOne).to({x: 220}, 50, Phaser.Easing.Linear.None, true, 0, 0, true); What am I doing wrong, shouldnt this line make the enemy return back to its original position? Thanks

Hello again. New problems arise everyday! I have a character who has an animation called "hit". Here's the strip of frames. So in my code I have this little something that makes the character "hit" when the btnGolpe is down: btnGolpe = game.input.keyboard.addKey(Phaser.Keyboard.M); in function update (): else if (btnGolpe.isDown) { player.animations.play('golpe'); } The problems? 1) The animation keeps looping if btnGolpe is down. It should only play once per button pressing. 2) I need that the character actually "hits" it's opponent with his fist. Is there a way to do this? The collision should be between the fist and the opponent. Bare in mind that the fist is shown in one frame of the whole animation, so it show only register the collision in that frame, in that position (the fist, in this case). I'm really looking forward for your advise on these things. Thanks in advance, people!

like do to when you hit the enemy, this is around for a while invincible? invincible maybe 2 seconds (blinking, for example), and then he can hit again. I have to use some kind of timmer, the game.now ...?

helo! i cant figure out how my homeless enemy can sense the end of the platform. i want this homeless patrol without fall down. thx for any advice

What is the best way to create an enemy at run time? Actually, i wrote this code: var position = game.camera.x % 500; if ((position>= 0&&position<=10&&enemies.countLiving()==0) && game.camera.x != 0) { var random_number = Math.random() * 100; if (random_number >= 0 && random_number <= 50) { enemy = enemies.create(game.camera.x+w, game.world.height - enemyH - solidH, 'enemy'); rifbomb = w; enemy.body.collideWorldBounds = true; enemy.frame = 1; enemy.body.velocity.x = -80; } }

So I have a little game concept I've been making in phaser and I have the parts of it split into states such as main menu and levels, but what I have been doing is creating the Player objects and enemy objects and the such in each individual states as well as making animations for them. This is very obviously inefficient I want to know how would I go about making an object for these entities to use it cross states

I was experimenting with spawning enemies from the right side of the game's canvas. The player, being on the left side shoots the enemies coming from the right. I have a problem though. When the player shoots the enemy while it spawns a couple pixels away from the right side of the screen, the enemy dies (I made a collision handler), but the problem comes when the enemy reaches halfway past the spawn point. It seems that if the enemy gets too close to the player the bullets don't seem to effect the enemy at all. The enemy seems to only die a couple of pixels away from the right side of the screen. Here is how I have things set up: Currently using Phaser 2.0 //Create function with bullets bullets = this.game.add.group(); bullets.enableBody = true; bullets.physicsBodyType = Phaser.Physics.ARCADE; bullets.createMultiple(50, 'bullet'); bullets.setAll('anchor.x', 0.5); bullets.setAll('anchor.y', 0.5); bullets.setAll('outOfBoundsKill', true);//UPDATE functionthis.game.physics.arcade.overlap(bullets, clone, this.enemyKill, null, this);//Method used to spawn enemies//I call a function named 'lvl1' that spawns enemies from the right side of the screen levelOne: function() { this.lvl1 = this.game.time.create(false); this.lvl1.start(); this.lvl1.onComplete.add(this.watchCounter, this); this.lvl1.repeat(Phaser.Timer.SECOND * 2, 10, this.enemyOne, this); },//This function uses the Phaser timer method to call a function to create enemies 10 times every 2 seconds//The function for the enemy is down below:enemyOne: function() { clone = this.game.add.sprite(this.game.world.height + 100, (100 + spawnLimit), 'CloneOne'); //I "bottlenecked" the spawn area to be between a specific areathis.game.physics.enable(clone, Phaser.Physics.ARCADE); clone.enableBody = true; clone.anchor.setTo(0.5, 0.5); clone.body.velocity.x = -110; clone.animations.add('run', [11, 10, 9, 8, 7, 6], 10, true); clone.animations.play('run'); },//Here is the collision handler enemyKill: function(bullet, clone) { bullet.kill(); clone.kill(); }//Here is the players fire methodfire: function() { if (this.game.time.now > nextFire && bullets.countDead() > 0) { var shoot = this.game.add.audio('shoot'); shoot.play(); nextFire = this.game.time.now + fireRate; bullet = bullets.getFirstDead(false); bullet.body.velocity.x = 350; bullet.reset((player.x + 65), (player.y + 20)); bullet.rotation = this.game.physics.arcade.moveToPointer(bullet, 300); } }, EDIT: I just did some debugging using the line of code below and discovered that when the enemy reaches halfway across the screen the collision box literally disappears. How can that be? EDIT: The only "enemy" that takes collision is the last enemy that is spawned. render: function() { this.game.debug.body(player); this.game.debug.body(clone); } Thank you all in advance.

Hi, I'm trying to create an explosion when I shoot an enemy jet. Not just an image when I shoot an enemy but an explosion to where it explodes and then fades like a GIF files. How could I implement that on my game? Right now I'm using a sprite sheet. Any help would be great thanks!