Souleste

Members
  • Content count

    9
  • Joined

  • Last visited

  1. I am trying to make a 'bullet' from the var weapon shoot in a certain direction, this bullet is actually a pokemon ball as I am just making a practice game. I cannot seem to make the 'bullet' go in the direction that I would like it to, I entered: weapon.body.velocity.x = -100; under the the: if (cursors.left.isDown) but this did not work, when I pressed any key the screen would just freeze. Please help me make the 'bullet' go in the direction I want. var items; var game; var player; var weapon; var cursors; var fireButton; function addItems() { items = game.add.physicsGroup(); createItem(100, 400, 'coin'); } function createItem(left, top, image) { var item = items.create(left, top, image); item.animations.add('spin'); item.animations.play('spin', 10, true); } function itemHandler(player, item) { item.kill(); } window.onload = function () { game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); function preload() { game.stage.backgroundColor = ('#424242'); game.load.spritesheet('coin', 'coin.png', 36, 44); game.load.spritesheet('player', 'hero.png', 64, 64); game.load.spritesheet('bullet', 'Pokeball.png'); } function create() { player = this.game.add.sprite(100, 200, 'player'); // ANIMATION FOR PLAYER CONTROLS down = player.animations.add('down', [0,1,2,3], 10, true); left = player.animations.add('left', [4,5,6,7], 10, true); right = player.animations.add('right', [8,9,10,11], 10, true); up = player.animations.add('up', [12,13,14,15], 10, true); // enable physics in the game (can't go through walls, gravity, etc.) game.physics.enable(player, weapon, Phaser.Physics.ARCADE); game.physics.startSystem(Phaser.Physics.P2JS); game.physics.startSystem(Phaser.Physics.ARCADE); game.physics.p2.enable(player, weapon); player.body.setSize(30, 45, 16, 12); player.body.immovable = false; // enable keyboard arrows for controls cursors = game.input.keyboard.createCursorKeys(); // camera will follow the character game.camera.follow(player); addItems(); // Creates 1 single bullet, using the 'bullet' graphic weapon = game.add.weapon(1, 'bullet'); // The bullet will be automatically killed when it leaves the world bounds weapon.bulletKillType = Phaser.Weapon.KILL_WORLD_BOUNDS; // Because our bullet is drawn facing up, we need to offset its rotation: weapon.bulletAngleOffset = 90; // The speed at which the bullet is fired weapon.bulletSpeed = 400; game.physics.arcade.enable(player); // Tell the Weapon to track the 'player' Sprite, offset by 14px horizontally, 0 vertically weapon.trackSprite(player, 30, 0, true); cursors = this.input.keyboard.createCursorKeys(); fireButton = this.input.keyboard.addKey(Phaser.KeyCode.SPACEBAR); } function update() { game.physics.arcade.overlap(player, items, itemHandler); // PLAYER CONTROLS player.body.velocity.set(0); // player presses left key if (cursors.left.isDown) { player.body.velocity.x = -100; player.play('left'); } // player presses right key else if (cursors.right.isDown) { player.body.velocity.x = 100; player.play('right'); } // player presses up key else if (cursors.up.isDown) { player.body.velocity.y = -100; player.play('up'); } // player presses down key else if (cursors.down.isDown) { player.body.velocity.y = 100; player.play('down'); } // player does not press anything else { player.animations.stop(); } if (fireButton.isDown) { weapon.fire(); } } function render() { weapon.debug(); } }
  2. I am trying to make a gate that opens when you click on it, and rotate it 90 degrees. I have accomplished this much, but how do I make it go back to it's original position once I click on it again? For instance: *clicks on gate, gate opens, 90 degrees.* *clicks on gate again, gate closes, -90 degrees from the 90 degrees that it went on previous click* Any help would be appreciated! html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Simple Canvas Game</title> <style> html { background: black } canvas { margin: auto; } </style> </head> <body> <script src="phaser.js"></script> <script src="game.js"></script> </body> </html> game.js var game = new Phaser.Game(550, 540, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); function preload() { game.load.crossOrigin = 'anonymous'; game.load.image('gateopen', 'fenceleft.png'); } var sprite function clickSprite() { console.log("clickSprite"); sprite.angle += 90; } function clickGame() { console.log("clickGame"); } function create() { sprite = game.add.sprite(100, 100, 'gateopen'); sprite.anchor = {x: 1, y: 1} game.inputEnabled = true; sprite.inputEnabled = true; sprite.events.onInputDown.add(clickSprite) game.input.onDown.add(clickGame); } function update() { } function render() { game.debug.bodyInfo(sprite, 32, 32); game.debug.body(sprite); }
  3. Need help with rotation

    I tried this and it will not work, when I click the sprite, nothing happens
  4. Scaling an image down

    I tried this, I am using an image not a sprite
  5. Hi, I am trying to make a simple game and have been running into many problems. The problem I am facing now is that I cannot fix this error in my javascript. It says that it cannot read the 'setSize' property on my 'player' sprite, but it works perfectly fine on my other sprites. Next it says that it cannot read the 'velocity' property of the 'player' sprite, but when I comment out the 'setSize' property it works. I just cannot figure out what is wrong, have I misspelled something? I cannot seem to find the problem, so any help would be appreciated. Btw, it worked yesterday, but when I loaded it up today it was no longer working... Html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Simple Canvas Game</title> <link href="https://fonts.googleapis.com/css?family=Syncopate:700" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> html { background: black } canvas { margin: auto; } h1 { font-family: 'Syncopate', sans-serif; color: rgb(194, 68, 91); text-align: center; margin: 0 auto; font-size: 25px; } h2 { color: white; font-size: 8px; font-family: 'Syncopate', sans-serif; } </style> </head> <body> <header> <h1>Crafty Heroes</h1> </header> <footer> <h2>&copy; SoulesteDesigns 2017</h2> </footer> <script src="phaser.js"></script> <script src="game.js"></script> </body> </html> game.js: // VARIABLES // variables for static objects var walls; var house; var gate; var gate2; // variables for character var cursors; var player; var left; var right; var up; var down; var game = new Phaser.Game(550, 540, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); // ADD HOUSES function addHouse(image) { house = game.add.physicsGroup(); house.create(-250, -240, 'greenhouse'); house.setAll('body.immovable', true); } // ADD FENCES OR WALLS function addWalls(image) { walls = game.add.physicsGroup(); // fences up top walls.create(-90, -200, 'fencefront'); walls.create(5, -200, 'fencefront'); walls.create(100, -200, 'fencefront'); walls.create(195, -200, 'fencefront'); // fences to right walls.create(288, -200, 'fenceright'); walls.create(288, -135, 'fenceright'); walls.create(288, -70, 'fenceright'); walls.create(288, -5, 'fenceright'); // fences at bottom walls.create(5, 59, 'fencefront'); walls.create(100, 59, 'fencefront'); walls.create(195, 59, 'fencefront'); // fences to left walls.create(-91, -200, 'fenceleft'); walls.create(-91, -135, 'fenceleft'); // set the walls to be static walls.setAll('body.immovable', true); } // PRELOAD IMAGES FOR ITEMS, PLAYERS, ETC. function preload() { // preload player game.load.spritesheet('player', 'hero.png', 64, 64); // preload houses game.load.image('greenhouse', 'greenhouse.png'); // preload fences game.load.image('fencefront', 'fencefront.png'); game.load.image('fenceleft', 'fenceleft.png'); game.load.image('fenceright', 'fenceright.png'); // fence that has adjusted hit boundary game.load.image('gate', 'fenceleft.png'); game.load.image('gate2', 'fencefront.png'); // preload ground game.load.image('ground', 'tiles2.png'); } // ADD THINGS TO GAME function create() { // set area that the player may travel to game.world.setBounds(-250, -250, 550, 550); // set background color game.stage.backgroundColor = ('#3c6f42'); gate = game.add.physicsGroup(); game.physics.startSystem(Phaser.Physics.ARCADE); gate = game.add.sprite(-91, -70, 'gate'); gate.name = 'gate'; game.physics.enable([gate], Phaser.Physics.ARCADE); // This adjusts the collision body size to be a 100x50 box. // 50, 25 is the X and Y offset of the newly sized box. gate.body.setSize(15, 90, -2, 3); gate.body.immovable = true; gate2 = game.add.physicsGroup(); game.physics.startSystem(Phaser.Physics.ARCADE); gate2 = game.add.sprite(-90, 59, 'gate2'); gate2.name = 'gate2'; game.physics.enable([gate2], Phaser.Physics.ARCADE); // This adjusts the collision body size to be a 100x50 box. // 50, 25 is the X and Y offset of the newly sized box. gate2.body.setSize(90, 15, 3, 3); gate2.body.immovable = true; // adding the ground var ground = game.add.sprite(-224, -100, 'ground', 1); var ground = game.add.sprite(-224, -60, 'ground', 1); var ground = game.add.sprite(-224, -20, 'ground', 1); var ground = game.add.sprite(-224, 20, 'ground', 1); var ground = game.add.sprite(-184, 20, 'ground', 1); var ground = game.add.sprite(-144, 20, 'ground', 1); // add player image and place in screen player = game.add.sprite(-232, -100, 'player'); player.smoothed = true; player.scale.set(.9); player.body.setSize(30, 40, 16, 16); player.body.immovable = false; // player will "collide" with certain images like walls and houses player.collideWorldBounds = true; // ANIMATION FOR PLAYER CONTROLS down = player.animations.add('down', [0,1,2,3], 10, true); left = player.animations.add('left', [4,5,6,7], 10, true); right = player.animations.add('right', [8,9,10,11], 10, true); up = player.animations.add('up', [12,13,14,15], 10, true); // enable physics in the game (can't go through walls, gravity, etc.) game.physics.enable([player, house, walls, gate], Phaser.Physics.ARCADE); game.physics.startSystem(Phaser.Physics.P2JS); game.physics.startSystem(Phaser.Physics.ARCADE); game.physics.p2.enable(player); // make sure to add this code to add items/walls/buildings addHouse(); addWalls(); // enable keyboard arrows for controls cursors = game.input.keyboard.createCursorKeys(); // camera will follow the character game.camera.follow(player); } // what happens when player does something function update() { // player will now collide with these images rather than pass over them game.physics.arcade.collide(player, house); game.physics.arcade.collide(player, walls); // PLAYER CONTROLS player.body.velocity.set(0); // player presses left key if (cursors.left.isDown) { player.body.velocity.x = -100; player.play('left'); } // player presses right key else if (cursors.right.isDown) { player.body.velocity.x = 100; player.play('right'); } // player presses up key else if (cursors.up.isDown) { player.body.velocity.y = -100; player.play('up'); } // player presses down key else if (cursors.down.isDown) { player.body.velocity.y = 100; player.play('down'); } // player does not press anything else { player.animations.stop(); } } function render() { game.debug.bodyInfo(gate2, 32, 32); game.debug.body(gate2); game.debug.bodyInfo(player, 32, 32); game.debug.body(player); }
  6. Scaling an image down

    How do I scale, or resize, an image in javascript with phaser's framework? I have tried a few different things but they do not seem to be working. I am using a weapon method to throw a pokeball, this is just a test using some code from phaser.io, so the other images aren't mine, I am just testing to try and get the pokeball to be thrown, but it is freaking huge right now! Please help me, I need the pokeball to be about 10x10 px because my character is 64x64. var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); function preload() { game.load.image('bullet', 'Pokeball.png', .01, .01); game.load.image('ship', 'tiles1.png'); } var sprite; var weapon; var cursors; var fireButton; function create() { // Creates 1 single bullet, using the 'bullet' graphic weapon = game.add.weapon(1, 'bullet'); weapon.scale.setTo(.5, .5); // The bullet will be automatically killed when it leaves the world bounds weapon.bulletKillType = Phaser.Weapon.KILL_WORLD_BOUNDS; // Because our bullet is drawn facing up, we need to offset its rotation: weapon.bulletAngleOffset = 90; // The speed at which the bullet is fired weapon.bulletSpeed = 400; sprite = this.add.sprite(320, 500, 'ship'); game.physics.arcade.enable(sprite); // Tell the Weapon to track the 'player' Sprite, offset by 14px horizontally, 0 vertically weapon.trackSprite(sprite, 14, 0); cursors = this.input.keyboard.createCursorKeys(); fireButton = this.input.keyboard.addKey(Phaser.KeyCode.SPACEBAR); } function update() { sprite.body.velocity.x = 0; if (cursors.left.isDown) { sprite.body.velocity.x = -200; } else if (cursors.right.isDown) { sprite.body.velocity.x = 200; } if (fireButton.isDown) { weapon.fire(); } } function render() { weapon.debug(); }
  7. How to set hitbox?

    I cannot figure out how to change the hitbox size of my player, the character doesn't fit through a hole in a fence so I want to change the hit box sizes. I already tried this https://phaser.io/examples/v2/arcade-physics/offset-bounding-box but this did not work for me, my screen went black when i did this. // variables for items, walls, etc. var walls; var house; var game = new Phaser.Game(550, 540, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); //add house to game function addHouse(image) { house = game.add.physicsGroup(); house.create(-250, -240, 'greenhouse'); house.setAll('body.immovable', true); } // add fences/walls to the game function addWalls(image) { walls = game.add.physicsGroup(); // fences up top walls.create(-90, -200, 'fencefront'); walls.create(5, -200, 'fencefront'); walls.create(100, -200, 'fencefront'); walls.create(195, -200, 'fencefront'); // fences to right walls.create(288, -200, 'fenceright'); walls.create(288, -135, 'fenceright'); walls.create(288, -70, 'fenceright'); walls.create(288, -5, 'fenceright'); // fences at bottom walls.create(-90, 59, 'fencefront'); walls.create(5, 59, 'fencefront'); walls.create(100, 59, 'fencefront'); walls.create(195, 59, 'fencefront'); // fences to left walls.create(-91, -200, 'fenceright'); walls.create(-91, -135, 'fenceright'); walls.create(-91, -70, 'fenceright'); // set the walls to be static walls.setAll('body.immovable', true); } // preload items, walls, players, etc. function preload() { // preload player game.load.spritesheet('player', 'hero.png', 64, 64); // preload houses game.load.image('greenhouse', 'greenhouse.png'); // preload fences game.load.image('fencefront', 'fencefront.png'); game.load.image('fenceleft', 'fenceleft.png'); game.load.image('fenceright', 'fenceright.png'); } // variables for character var cursors; var player; var left; var right; var up; var down; // add what will be in game function create() { game.world.setBounds(-250, -250, 550, 550); // set background color game.stage.backgroundColor = ('#3c6f42'); // add player image and place in screen player = game.add.sprite(-232, -100, 'player', 1); player.smoothed = false; player.scale.set(1); // player will "collide" with certain images like walls and houses player.collideWorldBounds = true; // ANIMATION FOR PLAYER CONTROLS down = player.animations.add('down', [0,1,2,3], 10, true); left = player.animations.add('left', [4,5,6,7], 10, true); right = player.animations.add('right', [8,9,10,11], 10, true); up = player.animations.add('up', [12,13,14,15], 10, true); // enable physics in the game (can't go through walls, gravity, etc.) game.physics.enable(player, Phaser.Physics.ARCADE); game.physics.startSystem(Phaser.Physics.P2JS); game.physics.p2.enable(player); // make sure to add this code to add items/walls/buildings addHouse(); addWalls(); // enable keyboard arrows for controls cursors = game.input.keyboard.createCursorKeys(); // camera will follow the character game.camera.follow(player); } // what happens when player does something function update() { // player will now collide with these images rather than pass over them game.physics.arcade.collide(player, house); game.physics.arcade.collide(player, walls); // PLAYER CONTROLS player.body.velocity.set(0); // player presses left key if (cursors.left.isDown) { player.body.velocity.x = -100; player.play('left'); } // player presses right key else if (cursors.right.isDown) { player.body.velocity.x = 100; player.play('right'); } // player presses up key else if (cursors.up.isDown) { player.body.velocity.y = -100; player.play('up'); } // player presses down key else if (cursors.down.isDown) { player.body.velocity.y = 100; player.play('down'); } // player does not press anything else { player.animations.stop(); } } function render() { }
  8. Player and Colliding Objects

    Hi, I need some help with my code, I am trying to create a fenced in area for my character to go in, but he cannot fit through because of the objects that he collides with. How do I change the area that the character collides with? can I reduce the size of the collidable area? The hole in the fence seems quite large enough, but he just won't go through. My game.js // variables for items, walls, etc. var walls; var house; var game = new Phaser.Game(550, 540, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); //add house to game function addHouse(image) { house = game.add.physicsGroup(); house.create(-250, -240, 'greenhouse'); house.setAll('body.immovable', true); } // add fences/walls to the game function addWalls(image) { walls = game.add.physicsGroup(); // fences up top walls.create(-90, -200, 'fencefront'); walls.create(5, -200, 'fencefront'); walls.create(100, -200, 'fencefront'); walls.create(195, -200, 'fencefront'); // fences to right walls.create(288, -200, 'fenceright'); walls.create(288, -135, 'fenceright'); walls.create(288, -70, 'fenceright'); walls.create(288, -5, 'fenceright'); // fences at bottom walls.create(-90, 59, 'fencefront'); walls.create(5, 59, 'fencefront'); walls.create(100, 59, 'fencefront'); walls.create(195, 59, 'fencefront'); // fences to left walls.create(-91, -200, 'fenceright'); walls.create(-91, -135, 'fenceright'); walls.create(-91, -70, 'fenceright'); // set the walls to be static walls.setAll('body.immovable', true); } // preload items, walls, players, etc. function preload() { // preload player game.load.spritesheet('player', 'hero.png', 64, 64); // preload houses game.load.image('greenhouse', 'greenhouse.png'); // preload fences game.load.image('fencefront', 'fencefront.png'); game.load.image('fenceleft', 'fenceleft.png'); game.load.image('fenceright', 'fenceright.png'); } // variables for character var cursors; var player; var left; var right; var up; var down; // add what will be in game function create() { game.world.setBounds(-250, -250, 550, 550); // set background color game.stage.backgroundColor = ('#3c6f42'); // add player image and place in screen player = game.add.sprite(-232, -100, 'player', 1); player.smoothed = false; player.scale.set(1); // player will "collide" with certain images like walls and houses player.collideWorldBounds = true; // ANIMATION FOR PLAYER CONTROLS down = player.animations.add('down', [0,1,2,3], 10, true); left = player.animations.add('left', [4,5,6,7], 10, true); right = player.animations.add('right', [8,9,10,11], 10, true); up = player.animations.add('up', [12,13,14,15], 10, true); // enable physics in the game (can't go through walls, gravity, etc.) game.physics.enable(player, Phaser.Physics.ARCADE); game.physics.startSystem(Phaser.Physics.P2JS); game.physics.p2.enable(player); // make sure to add this code to add items/walls/buildings addHouse(); addWalls(); // enable keyboard arrows for controls cursors = game.input.keyboard.createCursorKeys(); // camera will follow the character game.camera.follow(player); } // what happens when player does something function update() { // player will now collide with these images rather than pass over them game.physics.arcade.collide(player, house); game.physics.arcade.collide(player, walls); // PLAYER CONTROLS player.body.velocity.set(0); // player presses left key if (cursors.left.isDown) { player.body.velocity.x = -100; player.play('left'); } // player presses right key else if (cursors.right.isDown) { player.body.velocity.x = 100; player.play('right'); } // player presses up key else if (cursors.up.isDown) { player.body.velocity.y = -100; player.play('up'); } // player presses down key else if (cursors.down.isDown) { player.body.velocity.y = 100; player.play('down'); } // player does not press anything else { player.animations.stop(); } } function render() { } The HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Simple Canvas Game</title> <link href="https://fonts.googleapis.com/css?family=Syncopate:700" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> html { background: black } canvas { margin: auto; } h1 { font-family: 'Syncopate', sans-serif; color: rgb(194, 68, 91); text-align: center; margin: 0 auto; font-size: 25px; } </style> </head> <body> <header> <h1>Crafty Heroes</h1> </header> <script src="phaser.js"></script> <script src="game.js"></script> </body> </html>
  9. Hi, new to the forums, as well as new to coding. Started learning about a month ago. I need help with my javascript code, I want to be able to use the arrow keys to move my character up, right, down, left, but I cannot figure out how to, I watched a video from Treehouse learning how to do this, and then I decided I would also make a separate one for myself so I copied some of the code, but It will not animate or move the sprite sheet. The character just sits in the middle of the page even though I thought that I coded him correctly to move. He also doesn't even animate, it's completely still. I did however notice that when I made my background larger, that the screen would move, but I want the character to move over the screen, not move with the screen. Please help. game.js index.html