Search the Community

Showing results for tags 'sprite'.



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.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 591 results

  1. Animation Question

    Hey Everyone! Still working with my same project looking at the depth perspectives and minor animations, I'm either looking for a page which is better structured than babylons own help page - Find it very unhelpful and vague personally, or some suggestions from everyone on here. I am looking to see if i can create the animation affect to give a sense of depth to the build, the best online example effect of what I mean is here: https://www.g-star.com/en_gb/raw - You can see as you go across the team, you are able to see the effect i'm trying to describe and aspire to build, as you look for example at Pharrell Williams sat on the stool and the tall guy with glasses behind him, as you go from the leftmost view to rightmost. If anyone can help me with this I would be very appreciative. as I am currently struggling to find a start point, I will attach a playground of my current project to see what I currently have running and if possible could even demo the effect i'm after using it would be great! Please note that the FOV I wish to use is 0.30, but is set to 1 in the example as the texture error boxes are rather big. Playground: https://playground.babylonjs.com/#0RDNN7 Thanks everyone! Mezz
  2. Sprite Size

    Hey, I was wandering if anyone knew the code to set the size of sprites to however many pixels as currently no matter what the cell size or image size they are all formatting to the same height which is very unhelpful for my project! Looking for any working solution so I can have height accurate sprites, my two pieces of code being used to position and call in my sprites are as follows; var spriteManagerstaffs = new BABYLON.SpriteManager("peopleManager", "Images/TinyPNG/David.png", 1, 1010, scene); //finds file, sets capacity to 1, cellsize to 1010<-- (does nothing) and adds to scene var staff = new BABYLON.Sprite("staff", spriteManagerstaffs); staff.position.x = -1.4; staff.position.z = 0; staff.isPickable = true; //Sets the position within my 3d environment
  3. Issue with sprite animation

    Hello, I am doing a simple Platformer game with Phaser, for learning purposes. I have a sprite that is 2 columns x 2 rows (see attached image), with the upper-left image being the "idle" status. And I put this code in my player prefab file: this.animations.add("idle", [0]); this.animations.add("jump", [1]); this.landAnimation = this.animations.add("land", [0]); this.animations.add("run", [1,2,3]); The problem is that my "idle" status is going to repeat frames 1,2,3 instead, again and again, as if the character is moving, and the other statuses are all [0] (what I wanted for "idle"). The result is always the same, whatever numbers I put into the arrays. I am a bit stuck, and cannot figure out where the problem is... Any help or ideas should be greatly appreciated. Thanks.
  4. Pixel Colour bleed

    So I am using a range of images as sprites, and whenever they have been cropped and touch the edge of the canvas in photoshop, it creates a weird bleed of colour as if the last colour pixel is being stretched outwards, please find attached some screenshots of the issue. I have fixed the issue for myself by creating a blank space between the image and canvas edge, so I can confirm that it is definitely the cause of the bug! Hope this helps future development!
  5. Sprite Manager

    Hello! I am looking at around 40 sprites which are actually being replaced with HD Images, I was wandering if there are ways to animate or any alternative solution as i'm struggling to find a solution to the lag and drop in frames currently which makes it look bad, I will insert a playground here with my current working version, but the main issue being the playground doesn't lag as it won't be loading my images and the size and scale of my images is far higher than the can't load texture issue. Secondarily, if anyone could tell me how to add a small amount of movement to look up and down but I want to prevent the camera looking more than 10/20 degrees above or below the mid point to keep it focused. https://www.babylonjs-playground.com/#AEXWGL#1 The example mouse movement camera rotation and general project i'm using as inspiration can be found here: https://www.g-star.com/en_gb/raw
  6. Replacing a Graphics sprite

    I made a canvas class for a drawing app and set a white rectangle made with Graphics.drawRect() as its sprite, but I need to change its fill color when I click it. It seems that's not possible according to the few info I've found, so I want to draw another rectangle and change the container sprite but that's not working. Am I doing something wrong? How should I replace the sprite? game.createClass('Canvas', { init: function() { this.drawContainer = new game.Container(); var board = new game.Graphics(); board.visible = false; board.beginFill(0xFFFFFF); board.lineStyle(0); board.drawRect(0, game.system.height /3, game.system.width, 2 * game.system.height / 3 ); board.endFill(); this.sprite = fill; this.sprite = board; this.sprite.interactive = true; this.sprite.click = this.click.bind(this); this.drawContainer.addChild(this.sprite); game.scene.stage.addChild(this.notebookContainer); }, click: function(event) { var board = new game.Graphics(); board.visible = false; board.beginFill(0xFF0000); board.lineStyle(0); board.drawRect(0, game.system.height /3, game.system.width, 2 * game.system.height / 3 ); board.endFill(); this.sprite = board; } });
  7. Hi, I updated phaser lib from older version to 2.6.2 and now there is no more "alpha" property in "sprite" object. I see "alpha" is still available using tween. But what if I want to change it directly like it was in previous version? : this.background = this.add.sprite(0, 0, 'back'); this.background.alpha = 0; thanks
  8. Hello comrades, I'm new to phaser and I can't seem to create new objects to the group "capetinhas", even though I can load the sprite through game.add.sprite. Here's the code: var game = new Phaser.Game(448, 448, Phaser.AUTO, '', { preload: preload, create: create, update: update }); function preload () { game.load.image('tabuleiro','assets/tabuleiro.png') game.load.spritesheet('devil','assets/devil.png',32,32); var capetinhas; } function create (){ capetinhas = game.add.group(); game.add.sprite(window.width,0,'tabuleiro');//loading the background game.add.sprite(128,128,'devil'); // this works capetinhas.create(32,32,'devil'); // this doesnt } function update (){ } Any helpe would be really apreciated. Thanks in advance.
  9. 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(); } }
  10. 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(); }
  11. 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); }
  12. 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); }
  13. Camera and Sprite

    I have been working tirelessly with this and really struggling to get anywhere, if anyone can offer some form of assistance I would be greatly appreciative. I have essentially set up a reel of characters (staff) as sprites organised by co'ords in three circles, 12 characters per circle, around the camera set at (0,0,0), (Radius of circles are 1.5/1.45/1.4 I have a scene built currently which is super buggy in movement as well. I need it to when the mouse hovers on the left or right side of the screen to rotate the camera continuously scrolling through the images on loop (Cant get working past following the mouse - no loop - no smooth movement as mouse movement on y axis also rotates the camera. This is my mouse movement code: var mouse = {x:0,y:0}; var cameraMoves = {x:0,y:0,z:-0.1,move:false,speed:0.03}; function mouseMove(e){ mouse.x = e.clientX; mouse.y = e.clientY; camera.rotation.x += Math.max(Math.min((e.clientX - mouse.x) * 0.01, cameraMoves.speed), -cameraMoves.speed); camera.rotation.y += Math.max(Math.min((e.clientY - mouse.x) * 0.01, cameraMoves.speed), -cameraMoves.speed); The second main issue i'm having is that the sprites keep disappearing when rotating the camera, I'm trying to create a constant panable image reel from inside to view members of staff, there is an example i'm trying to follow and recreate found here: https://www.g-star.com/en_gb/raw If anyone could tell me how to solve me mouse hover to move issue (with infinite looping) or a fix for the rendering of sprites issue it would be great! If anyone thinks they can help and needs any more code of any kinds just let me know and i''ll sort it! Thanks!
  14. 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() { }
  15. 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>
  16. I am developing a cross-platform overhead game using Phaser. Is there a way to always fix the position of a camera to a sprite? The following function works great, but I want the camera to always be centered on the sprite - even when the sprite is nearing the edge of the tilemap. this.game.camera.follow(this); The reason I would like this capability is because I am developing a mobile game, and the player sprite manages to get in the way of crucial UI elements. This could be fixed by providing a constant camera on the sprite. Areas without tiles can be filled with a black background. Here is my problem visualized. As you can see, when nearing the edge of the tilemap, the sprite is no longer centered and it is in the way of my joystick. Instead, I would like the sprite to be centered and the camera to display a black background past the tilemap when it gets near edges. Thank you in advance, Christopher
  17. 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
  18. Hello, I'm new to Phaser and I have a problem with sprites that are keeping the previous sprites created in a loop. See the multiple legs added to horses in the attached image. This append only on Safari !!! The code I use for that : horsesGrp = this.game.add.group(); horsesGrp.enableBody = true; var horses = []; for (var i = 1; i < 9; i++) { horses[i] = horsesGrp.create(165, i * 90 * scaleY, 'horse-'+i); horses[i].animations.add('run', [0, 1, 2, 3, 4, 5]); horses[i].smoothed = true; this.game.time.events.loop(this.game.rnd.integerInRange(500, 1000), this.updateVelocity, this, horses[i]); horses[i].anchor.set(0.5, 0.5); horses[i].checkWorldBounds = true; horses[i].autoCull = true; } Thank you in advance for your help !
  19. Arrow pointing to off-screen sprite

    Hello, I have a game with a larger than camera sized game world and I would like to display an arrow to an off screen sprite. I'd like the arrow to be pinned to the edge of the camera and of course rotate so the tip of the arrow points towards the sprite. Bonus if the arrow also disappears when the target sprite is in the bounds of the camera. Has anyone got any help on how to implement this?
  20. Hi .i made a simple pixi app which tries to simulate spring forces but can't make it work properly . I've patched PIXI.ObservablePoint Object.assign(PIXI.ObservablePoint.prototype, { add: function(o) { this.set(this.x += o.x, this.y += o.y); }, radd: function(o) { return new PIXI.ObservablePoint(test, window, this.x + o.x, this.y + o.y);//test is a useless callback function that do nothing . }, sub: function(o) { this.set(this.x -= o.x, this.y -= o.y); }, rsub: function(o) { return new PIXI.ObservablePoint(test, window, this.x - o.x, this.y - o.y); }, mult: function(o) { this.x *= o; this.y *= o; }, rmult: function(o) { return new PIXI.ObservablePoint(test, window, this.x * o, this.y * o); }, getAngle() { //in radians return Math.atan2(this.y, this.x); }, getLenght() { return Math.hypot(this.x, this.y); }, setLength(l) { let angle = this.getAngle(); this.set(Math.cos(angle) * l, Math.sin(angle) * l); }, setAngle(a) { //in radians; this.set(Math.cos(a) * this.getLenght(), Math.sin(a) * this.getLenght()); } }); and this one is the sprite object class spring extends PIXI.Sprite { constructor(x, y) { super(); this.texture = new PIXI.Texture.fromImage("assets/image.png"); this.x = app.rw;//random width this.y = app.rh;//random height this.t = new PIXI.ObservablePoint(test,window,x,y); this.scale.set(.5 + Math.random() * .5); this.anchor.set(.5); this.friction=.9; } update() { this.d = this.t.rsub(this.position); this.d.mult(.1); this.vel.add(this.d); this.position.add(this.vel); this.vel.mult(this.friction); } } let arr = []; for (var a = 0; a < 100; a++) { let bu = new spring(app.rw, app.rh); container.addChild(bu); arr.push(bu); } app.ticker.add(() => { for (var i = 0; i < arr.length; i++) { let bu = arr[i]; bu.update(); } }); when i tried to create spring objects they behave weirdly . If there is only one spring object on array nothing happens unusual.But if there are more then one spring object they act like this and i can't change their positions independently beyond that if i disable friction they fastly disappear from screen .
  21. Hi i'm quite new with phaser but i'm making a game at the moment for a class project and i was wondering if their is a way to choose a specific sprite from a group of sprites.like maybe by order of how they were created or something . any help would be much appreciated
  22. Sprite picking

    Hi I have a scene with sprites which can be picked, but picking doesn't work Here is playground of my scene: https://www.babylonjs-playground.com/#8AH0JV#5
  23. I create a container and I add some sprites on this container, then it is very bad. This is my main code: Ground.prototype.createCGround = function (count, x, y) { var front = PIXI.Sprite.fromFrame('Tile_10.png'), blank = PIXI.Sprite.fromFrame('Tile_13.png'); var container = new PIXI.Container(); container.addChild(front); container.addChild(blank); front.position.set(0, 0); var count = count || 1; for (var i = 0; i < count; i++) { var span = PIXI.Sprite.fromFrame('Tile_11.png'); container.addChild(span); span.position.set(front.width + i * span.width, 0); } blank.position.set(front.width + i * span.width, 0); container.position.set(x, y); container.isUes = false; return container; } It have some black lines in the border !!!!!!! And the black lines are random , not all !!!! Who can help me ! I'm very need help!!! Thank you!
  24. Hey guys, Recently I've noticed some strange behaviour while using blendModes on Phaser.Graphics. I am creating a flashlight by drawing dark rectangle and lighter calculated shape of light from flashlight, I draw that on Phaser.Graphics object. Then I apply this object as a texture to sprite to see the difference between rendered outcomes. this.shadowTexture = this.player.game.add.graphics( 0, 0 ); this.shadowTexture.blendMode = Phaser.blendModes.MULTIPLY; this.sprite = this.player.game.add.sprite( 200, 0, this.shadowTexture.generateTexture() ); this.sprite.blendMode = Phaser.blendModes.MULTIPLY; update(){ // draw on shadowTexture ... this.sprite.texture = this.shadowTexture.generateTexture(); // just for test purposes } this code results in such situation: As you can see, blendMode used in Phaser.Graphics resulted with darker flashlight and the one used in Phaser.Sprite in lighter. Am I getting this all totally wrong ? Or is this some kind of a bug ? What I would like to achieve is the effect that I get using Sprite just by using Phaser.Graphics. Please, help guys, I am a bit confused here Thanks
  25. Getting sprites from spritesheet

    Hi! I'm completely new to Phaser, and I'm not sure how to add sprites from a spritesheet (e.g. a tileset, or just a .png that is filled with various objects), even after the tutorial - is it possible? I read and tried the texturepacker tool, but it seems I still need the images to be on their own before I assemble them in texturepacker? The coordinates are a bit confusing too since I'm used to having 4 coordinates for adding sprites (x,y,w,h). Thanks in advance!