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

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 699 results

  1. I've noticed that when using an action manager with sprites, both the OnPick and OnPickUp triggers are fired twice. This can be seen in the example (here), linked to from the documentation (here). Looking at the code, this seems to because scene._initClickEvent calls it's callback twice (here and here, cb being defined here). This could be solved by checking if clickInfo.ignore is true before doing all the sprite checking, unless there is a good reason this wasn't done in the first place.
  2. var game = new Phaser.Game(400, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); //creating score value and onscreen text var score = 0; var scoreText; //creating random spawning place for diamond var diamondX = game.world.randomX(); var diamondY = game.world.randomY(); function preload() { // preload assets game.load.image('sky', 'assets/img/sky.png'); game.load.image('ground', 'assets/img/platform.png'); game.load.image('star','assets/img/star.png'); game.load.image('diamond', 'assets/img/diamond.png'); game.load.spritesheet('baddie', 'assets/img/dude.png', 32, 48); } function create() { // place your assets //enabling Arcade Physics system game.physics.startSystem(Phaser.Physics.ARCADE); //adding a background game.add.sprite(0, 0, 'sky'); //a group containing the ground and platforms to jump on platforms = game.add.group(); //enabling physics for any object in this group platforms.enableBody = true; //creating the ground var ground = platforms.create(0, game.world.height - 64, 'ground'); //scaling to fit the width of the game ground.scale.setTo(2, 2); //stops ground from falling once player jumps on it ground.body.immovable = true; //create five ledges var ledge = platforms.create(-300, 400, 'ground'); ledge.body.immovable = true; ledge = platforms.create(200, 400, 'ground'); ledge.body.immovable = true; ledge = platforms.create(100, 300, 'ground'); ledge.body.immovable = true; ledge = platforms.create(-200, 200, 'ground'); ledge.body.immovable = true; ledge = platforms.create(300, 100, 'ground'); ledge.body.immovable = true; //create the player and its settings player = game.add.sprite(32, game.world.height - 150, 'baddie'); //enabling physics on player game.physics.arcade.enable(player); //giving player a slight bounce player.body.bounce.y = 0.2; player.body.gravity.y = 300; player.body.collideWorldBounds = true; //walking left and right animations player.animations.add('left', [0, 1, 2, 3], 10, true); player.animations.add('right', [5, 6, 7, 8], 10, true); //create group for stars stars = game.add.group(); stars.enableBody = true; //creating 12 stars evenly spaced apart for (var i = 0; i < 12; i++) { //create a star inside of the 'stars' group each 33 px apart var star = stars.create(i * 33, 0, 'star'); //giving it gravity star.body.gravity.y = 20; //giving each star a random bounce value star.body.bounce.y = 0.7 + Math.random() * 0.2; } //create diamond and apply physics diamond = game.add.sprite(diamondX, diamondY, 'diamond'); game.physics.enable(diamond, Phaser.Physics.ARCADE); diamond.body.gravity.y = 25; diamond.body.bounce.y = 0.7 + Math.random() * 0.2; //displays score text on screen scoreText = game.add.text(16, 16, 'Score: 0', {fontSize: '32px', fill: '#000'}); } function update() { // run game loop //collide player and platforms var hitPlatform = game.physics.arcade.collide(player, platforms); //built in keyboard manager cursors = game.input.keyboard.createCursorKeys(); //reset players velocity (movement) player.body.velocity.x = 0; //moving with arrow keys if (cursors.left.isDown) { //move to left player.body.velocity.x = -150; player.animations.play('left'); } else if (cursors.right.isDown) { //move right player.body.velocity.x = 150; player.animations.play('right'); } else { //stand still player.animations.stop(); player.frame = 2; } //allow player to jump if touching ground if (cursors.up.isDown && player.body.touching.down && hitPlatform) { player.body.velocity.y = -350; } //checking for collision with stars and platforms game.physics.arcade.collide(stars, platforms); //checking if player overlaps with star game.physics.arcade.overlap(player, stars, collectStar, null, this); //checking for collision with diamond and platforms game.physics.arcade.collide(diamond, platforms); //checking if player overlaps with diamond game.physics.arcade.overlap(player, diamond, collectDiamond, null, this); } function collectStar (player,star) { //function for updating score for collecting stars //removes star from screen star.kill(); //add and update score for stars score += 10; scoreText.text = 'Score: ' + score; } function collectDiamond (player, diamond) { //function for updating score for collecting diamond //remove diamond from screen diamond.kill(); //add and update score for diamond score += 25; scoreText.text = 'Score: ' + score; } It's my first time trying out Phaser and what I want to do is have the 'diamond' spawn at random locations on the screen. I've managed to get the diamond to spawn on screen, but it doesn't seem to be spawning in different locations when I reload the game each time. I'm assuming that I'd need to put something in the update function, but I need a little help with that part!
  3. I've just started learning pixi.js 2 days ago and I'm stuck with this. I'm trying to register mouse button events on 3 different buttons which I generate this way. function initializeButtons(bg: PIXI.Graphics) { let xPos = (canvasWidthHeight/2) - 130; for(let i = 0; i < 3; i++) { let temp = PIXI.Sprite.fromImage(BOX_SPRITES[0]); temp.scale.set(0.5); temp.anchor.set(0.5, 0.5); temp.position.x = xPos; temp.position.y = canvasWidthHeight / 2; temp.interactive = true; temp.buttonMode = true; temp.on('pointerdown', function() {onClick(i);} ); rewardBoxes.push(temp); bg.addChild(temp); xPos += 120; } } However, everytime I try to click on any button, it's always the last button that gets clicked. What is the proper way to achieve this? Thank you!
  4. Hi everyone, I'm trying to figure out how to 'reset/readjust' a sprites collider after adjusting the sprites scale. The initial collider setup ( size/offset) is working perfectly at scale 1, with the following : sprite.setSize(44,64,true); sprite.body.offset.y = 44; scaling works great for both sprite and collider with : sprite.setScale(2); the issue is when i set the scale ( to 2 in this example ), the collider now has an offset. is there a built in way to 'reset' this collider so it aligns with the sprite? thanks for your help. var config = { parent: 'container', type: Phaser.WEBGL, width: 300, height: 300, parent: 'phaser-example', physics: { default: 'arcade', arcade: { debug: true } }, scene: { preload: preload, create: create } }; let game = new Phaser.Game(config); let sprite; function preload () { this.load.image('00', '00.png'); } function create () { sprite = this.physics.add.image(400, 300, '00'); sprite.setSize(44,64,true); sprite.body.offset.y = 44; sprite.setScale(2); sprite.setVelocity(100, 200).setBounce(1, 1).setCollideWorldBounds(true).setGravityY(200); }
  5. Question is pretty straightforward, how can I apply multiple masks to one sprite. Let's say I have a sprite and I want it to be displayed only in particular places. In my case I want zombies to be visible only in light, having only flashlight it's pretty easy to implement since there is only one source of light and I can do something like that: this.zombies.setAll('mask', this.flashlightGraphics); But what do I do when I want to apply multiple masks, is there a way to combine graphics objects ? Thanks
  6. I have sprites which are all anchored at 0.5 for x and y, and they are often "flipped" via (e.g.) someSprite.scale.x *= -1. Because their anchors are centered, they don't move immediately because of this. However, changing to a negative scale mucks with their size and coordinates, because now a 20px-wide sprite will report a width of -20px, and it also interprets changes to its position inverse to what they were before (sprite.x++ will cause it to move up on the screen). This makes sense and everything, but the sprites' movement and activity is not always related to their scale. I know there must be a simple way to make a mirrored "copy" of a texture which can be swapped out on a single sprite without having to change its scale from positive to negative constantly.
  7. I am developing a game where my player has to look to see forward when I am pressing right arrow key. But how can I make it look reverse after pressing left arrow? I can create a sprite of reverse look but how can load that while pressing left and at the same time forward player should be destroyed?
  8. I'm trying to create platforms for my player to jump onto and also make collectible stars. I can create these sprites using functions, but I don't know how to make physics work on them so that the character can jump on the platforms and overlap with the stars. The problem is that the physics portion doesn't work when I call it in the update function. I am also not using tilesprites, so it can't work that way. create: function() { addStar(star1); }, update: function() { removeStar(star1); } addStar(name) { name = game.add.sprite(1700, 550, 'star'); name.anchor.setTo(0.5, 0.5); this.game.physics.enable(name, Phaser.Physics.ARCADE); name.body.collideWorldBounds = false; name.enableBody = true; name.body.immovable = true; } removeStar(name) { if (game.physics.arcade.overlap(character, name) == true) { name.destroy(); updateScore(); } }
  9. I'm porting a game developed using Phaser to Roku (streaming box) and I needed to change some of the sprite sheets, so I got TexturePacker but was surprised that it does not have an option to read the json file and split back the sheet into all the separate frames. Then I decided to create a quick app to do that, get the json and the png and unpack the frames png files into a folder. It was very useful to me so I decided to open it to the community: https://github.com/lvcabral/PhaserSpriteSheetUnpacker/releases
  10. Hi, I have image in cache on which multiple sprites are based like this: a = game.add.sprite(0, 0, "image"); b = game.add.sprite(0, 0, "image"); Now: I want to change the underlying image's data like e.g. this (notice the "image" as argument to generateTexture): game.cache.getBitmapData("somedata").generateTexture("image") This fails at runtime. According to what I've found out so far, I have to do it like this: game.cache.getBitmapData("somedata").generateTexture("image", function(texture) { a.loadTexture("image"); b.loadTexture("image"); }) The question is: is this achievable via more elegant way? The main problem I have with this is I have to keep track of every sprite that's based on "image", because this: game.cache.getBitmapData("somedata").generateTexture("image", function(texture) { a.loadTexture("image"); // b.loadTexture("image"); }); also fails at runtime. Isn't this somehow covered by what Phaser already offers? Thx in advance.
  11. Hi everyone, I'm trying to figure out how to 'reset/readjust' a sprites collider with the ground, because before set the collider bounds, I got this (first image) using the follow code: var game = new Phaser.Game(1024, 800, Phaser.AUTO, 'BreakOut Phaser',{preload: preload, create: create, update: update}); var bats; var leftKey; var rightKey; function preload() { this.load.image('background', '{% static 'assets/Background/background.png' %}'); this.load.image('ball', '{% static 'assets/Balls/ball_red_resize.png' %}'); this.load.image('bats', '{% static 'assets/Bats/bat_black_256x256.png' %}'); } function create() { this.physics.startSystem(Phaser.Physics.ARCADE); this.add.sprite(0, 0, 'background'); this.add.sprite(480, 336, 'ball'); bats = this.add.sprite(384, 660, 'bats'); this.physics.enable(bats, Phaser.Physics.ARCADE); //bats.body.bounce.y = 0.2; //bats.body.gravity.y = 300; //bats.body.collideWorldBounds = true; leftKey = this.input.keyboard.addKey(Phaser.Keyboard.LEFT); rightKey = this.input.keyboard.addKey(Phaser.Keyboard.RIGHT); this.input.keyboard.addKeyCapture([Phaser.Keyboard.LEFT, Phaser.Keyboard.RIGHT]); } function update() { bats.body.velocity.x = 0; if (leftKey.isDown) { bats.body.velocity.x -= 300; } if (rightKey.isDown) { bats.body.velocity.x += 300; } } and in the seconds image I remove the Javascript comment, I got the seconds image, the bats is not in the position that was define, how can I fix it?: bats.body.bounce.y = 0.2; bats.body.gravity.y = 300; bats.body.collideWorldBounds = true;
  12. My game has tiles that can contain units, of which there are several types of different units. My goal is to have one group called 'units' of which all units are a sprite inside of it, with properties about what type of unit it is, and what tile it is currently on. Lets say I want to get all 'tank' unit type from tile 'T1' , would I have to use two different itererate steps? First iterating for the tile location and then iterating for the unit type I want? I cant figure out a way using iterate to search on multiple criteria at once. I am regularly going to be grabbing units from territories and doing things with them, but I was wondering if this was the best way to implement or not. I currently had the unit types separated into separate groups to start with, but that will become cumbersome to the game design if additional unit types are added. Any advice or thoughts ? Thanks
  13. I am having some basic syntax confusion... i have declared a sprite... var taxi = this.add.sprite(100, 100, 'taxi').setOrigin(0, 0); and now would like to resize it I have tried various combos (including ideas from phaser2 i found), what am I doing wrong? taxi.width = 25; taxi.setWidth = 25; taxi.setSize = (25,25); Any help for noob here?
  14. Hello, please help. Can I put sprites with children in the bitmapdata? I'll attach the picture, is this possible and how? Thank you.
  15. Hello, i have this code that should create in the create function if one of the sprites of the "asteroids" group is overlapping the station (so the player doesnt get instant killed when he spawn). It is working in the Asteroid.prototype.update function but to optimize the game i would like to check it in the create function. this.asteroids.forEach(function (item) { if (Phaser.Rectangle.intersects(this.station.getBounds(), item.getBounds())) { item.destroy(); } }, this); It isnt working as exepted, could soweone help me ?
  16. I have a sprite and a body that both rotate towards the pointer. On collision, though, the sprite sometimes gets turned away from the body. The body continues to point towards the mouse but the sprite does not (see image, definitely not the worst that it can be). I haven't found a way to fix this, anyone know how?
  17. I'm using the Phaser Editor and I created a prefab for my player sprite, but no matter what I do I can't get it to appear in the assets window or in the options to add prefabs to my scene files. I created the Prefab by using File -> New -> Sprite Prefab. I've tried adding the associated script file to the pack.json file, I've tried loading the script in index.html, I've tried shutting down and restarting the editor but I just cant use the prefab. The prefab shows up where it's supposed to in my folder structure, and I can edit the canvas file normally. I just can't add the prefab to any of my Scenes.
  18. Hello, My name is Sergei, I'm freelance artist. I do various 2d game stuff for games. Contact me via email masterserjio [at] gmail [dot] com or web form from my site http://masterserjio.wix.com/catblack#
  19. Hi. I made a game using an other engine and would like to port the game over to Phaser but it is using individual images for all sprite animations. I was wondering if is there any way to create a sprite animation from individual images inside Phaser? I was searching the web and everyone seems to offer to pack all images on to a single texture then use an atlas in phaser. It could be the best way to do it, but I'm really would like to know if it possible to create sprite animation inside Phaser without using any 3rd party tools? To give an explanation, I would like to attempt to import the game levels from the JSON exported directly from the tool I was using, so this way I need to remake the game logic only and don't need to worry about building all the levels and menus again. I could just write the import code once, then import all my levels directly from the JSON and I don't need to start completely from scratch. Even if I would be using an atlas, I need to work on this importer to get the position, scale, animation frame and other details of everything in the level so getting the images too and make sprite animations from them could be faster to get the levels up and running in Phaser. Thank you.
  20. Hi. I'm new to phaser and to this forum. I have a problem that I would like to ask for some help with. I'm trying to import a level from a JSON file exported from a 3rd party level editor that is not meant to be used with Phaser or any other 3rd party engine. It is just me trying to use the JSON coming from the editor to load the level in Phaser and I have some problem with rotation and scale of the sprites. The level editor rotate the sprites around a center point and scale the sprites from the origin point. In Phaser, I set the position of the anchor point to match the position of the origin point and set the position of the pivot point to match the position of the center point for each sprite and it works for getting the position and the rotation of the sprites but when I scale a sprite in the editor, it does not appear right in Phaser. This is how it looks like in the editor: And this is how it looks like in Phaser after import: Notice the distance between the two sprites. It does not match and I think it is because in the editor the sprite is scaled from the top left corner of the sprite (origin/anchor point) while in phaser it is scaled from the center of the sprite (pivot point). At least If I don't change the position of the pivot point, the scale and position works but then rotation is off because in the editor the sprite is rotated around the center point which is in the middle by default. In any case I can't find a solution to this. I can't get the scale match without messing up the rotation or the rotation without messing up the scale because of the two points. When I check the values, everything seems to match. Position, rotation, scale but it still does not look the same in Phaser. I hope someone did have the same problem with rotating and scaling sprites in Phaser and already figured a solution. What I would like to know specifically, is there any way to rotate a sprite around a middle point without changing the position of the anchor and pivot point or is there any way to scale a sprite from the anchor point instead of the pivot point? Because the problem seems to be in Phaser the sprites are scaled and rotated around the pivot point but in this case I need to scale it and rotate it in two separated points to get the same result as in the level editor. I would appreciate any help. Thank you.
  21. I've been battling this problem for the past 24h and figured it was worth asking for help. I've got a class called Character that extends Phaser.Sprite and is used in a few States (Character Select->Play) for my game. When I instantiate new Characters in the Select class or Play class, they work great as expected. However, when I load the Select state and select a character (which calls the 'Play' state), the Character class errors upon instantiating a new character in the new state with the following message: Uncaught TypeError: Cannot read property 'getFrameIndexes' of null at Phaser.AnimationManager.add (phaser-split.js?2ffb:49401) at Character.loadData (character.js?9c96:59) If I call the 'Play' state directly, the character loads properly and doesn't give any errors. So it only seems to be happening when going from one state to another, which is puzzling me. I've tried every route of debugging possible and the only solution I can find seems to be not loading the data dynamically from my server. Currently, the animation data in my Character class gets loaded via socket.io which is called in the constructor: window.socket.on(`data:load:${name}`, (data) => { // Listen to data updates for this character this.loadData(data) }) window.socket.emit('data:request', name) // Request new data from the server The loadData function then loops through the data and adds the animation frames: loadData(data) { // Grab data from server for this character from its definition file for(let anim in data.anims) { this.animations.add(anim, data.anims[anim].frames, data.anims[anim].speed) } } The error above occurs on the first animation I want to add. If I look at the this.animations object, it doesn't have a 'sprite' set and most values are null. Any help would be appreciated. I've stripped out most of my code at this point and am now just stuck. I've searched a bunch (here/google/stackoverflow) and the only solutions to people running into similar problems seem to be to make sure you're passing this.game into your sprite, which I'm doing Actual code (Github) Play (state): https://github.com/stormsword/stormsword/blob/classes/lib/client/game/play.js Character (sprite): https://github.com/stormsword/stormsword/blob/classes/lib/client/game/char/character.js
  22. Hi, I've been using sprites but they don't seem to following the normal rules of being based off the parent objects position? I've made a quick example here to illustrate: http://www.babylonjs-playground.com/#KFFKV#7 Essentially the case seems to be: • A sprite can have another sprite as it's parent, but won't incorporate the parent's position • A sprite can have a mesh as it's parent, but won't incorporate the parent's position • A mesh cannot have a sprite as a parent • A mesh can have a mesh as a parent, and the child correctly follows the parent Is this correct? I was under the impression all objects with position should follow the parent:child positioning?
  23. Hi Guys, I'm pretty new here so quick bio, i'm a full-time developer from the UK and currently working on some game software projects in my spare time. Im currently building a software package for procedurally generating pixel sprites. Just wanted to see what people think and how many would be interested in the end product. Might look into the idea of crowdfunding so I could work on it one/two days a week and get it finished and packaged on mac/windows and linux. I have attached some outputted sprites so you can see the results. There's tons of configuration options so I have just gone with what I think looks good as an example. TomC
  24. On the webpage it talks about attaching an emitter to a sprite so that you can create a "jet". Is this done via groups? I've setup a player sprite and all my controls currently work on that. If creating a group is the answer, should a refactor be as simple as changing <sprite>.body to <group>.body? Thanks.
  25. Hi there, I want to implement a car which can be dragged and is able to turn around corners while being draged so far I only found a posibility to turn in direction of the pointer (eg mouse) but than the car turns before it is even (pixelperfect)clicked too any sugguesstions or helpfull links? thanks:)