Search the Community

Showing results for tags 'sprites'.



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 135 results

  1. I am having a really weird issue. I am creating a sprite from an image as follows: var grid1_texture = new PIXI.Texture.fromImage("whiteSquare.jpg"); Now this works fine and I am able to add this to the stage. I basically want to add all my images to a folder called resources. So I changed the code to this: var grid1_texture = new PIXI.Texture.fromImage("/resources/whiteSquare.jpg"); When I do this, I can see in Brackets editor that the link is being made however, the sprites do not get rendered on the stage. Please help!
  2. Hi, I implemented a two finger zoom using the game.camera.scale propierty to zoom the game. I also implemented a drag functionality using game.camera.x and game.camera.y propierties. But now I need to add static floating sprites, such that they are always in the same position on the screen regardless the zoom or the drag movement. But when I add them as sprites (game.add.sprite) they are affected by the camera propierties (x,y,scale). I read this and set fixedToCamera to true, it works partially, the (x,y) is static, but the when I zoom in (increase game.camera.scale) the size of the floating sprites also increases. Is there any way I could add sprites that are not dependent on the camera? Thanks!
  3. Hi, is it possible to make a sprite visible through the walls/meshes/other Sprites? Is it possible to make it visible always? PlayGround: http://www.babylonjs-playground.com/#1MJ5GH Its important because if the player is behind something he have to be visible. Also aims/marks in a labyrinth should be visible always. Thank
  4. Is there any way to add a listener that triggers when a sprite is visible by the camera?. The object Sprite contains inCamera, but it seems to re compute the bounds of the sprite according to this: http://www.html5gamedevs.com/topic/8936-does-phaser-handle-object-visibility-according-to-camera/, and that can be expensive. In my case I need to do this for many sprites on the screen, so I want to know if there is a more efficient way to do it.
  5. Edit: The solution to get Sprite2D with transparent areas working is to set "hasAlpha" on the Texture to "true". --- Hi, I want to use sprites2d (in canvas2d) made from png files that have transparent areas. expected behavior: Transparent areas are rendered transparent actual behavior: transparent areas are rendered not transparent It gets super weird, if I set opacity on the sprite to 0.999 everything works fine. Working, with opacity 0.999 http://www.babylonjs-playground.com/#DSJDT#11 no longer working with opacity 1.0 (or opacity removed): http://www.babylonjs-playground.com/#DSJDT#12 I will use the 0.99 opacity workaround for now., but this seems buggy - I would like my sprite to be rendered according to the alpha channel, and it's weird that this only seems to happen if I set opacity to 0.99. Maybe I missed another property?
  6. Hi, I have an idea of a game in which there would be a player who could collect different items(boots, helmet, pants, etc) It would really be a pain if I had to draw: 10 animation frames for normal character, 10 animation frames for character in boots, 10 animation frames for character in pants, 10 animation frames for character in pants,in boots, And so on..... You got me..(Of no, think of Minecraft or Terraria or Starbound where you can wear armor and stuff) So, my question is - Is it possible(in Phaser) to take different images(One for body, one for head, one for legs) and put them together and move,animate as if it was one image... Or maybe you have other suggestions?
  7. I am working on a project in which the user creates a system of points by adding them one-at-a-time. These points are also draggable, and clicking on existing points sets the clicked point as active. That's all working fine. When using a simple mouseDownCallback, clicking one of these existing points creates interference between the activities of the new point and the old point. I want to be able to determine what sprites, if any, a clicked point contains and run a function only if the spot is unoccupied. If I can do this via the activePointer versus specifically mouse, that's preferred, but not necessary. Can someone point me in the correct direction?
  8. I have an issue where I've got a row of rectangular sprites, drawn with phaser graphics, sitting in a seamless row. I then have some circle sprites set to move with set velocity in any of four directions (200x200, 200x-200, -200x200 or -200x-200) and bounce off this row of rectangular sprites. However, and this is behavior I've noticed before in a similar situation, whenever a circle sprite hits a rectangular one directly on the corner, the velocity drops drastically and it's direction changes substantially. Any clue on why this particular behavior occurs and any steps I can take in fixing it?
  9. tl;dr when I move parent, child position is updated too late, how to manually force to update child position when I move parent? Hello, in my game I have a group of sprite objects (Ships) this.shipsGroup = game.add.group(); Each Ship before adding to this.shipsGroup have two other groups as children : var actualShip = game.add.group(); var surrounding = game.add.group(); for (var m = 0; m < 3; m++) { var temp = game.add.sprite(-halfSize - 50 + l*50, tempy, 'red'); temp.anchor.setTo(0,1); tempy+=50; if(m == 1 && l > 0 && l < ship.unitSize+1) { actualShip.add(temp); } else { surrounding.add(temp); } } ship.addChild(actualShip); ship.addChild(surrounding); this.shipsGroup.add(ship); Note: every child object has position relative to parent (so child position (0,0) is on parent) Everything is fine up to this point. I'm moving my ships using something like that in every possible direction (I'm moving them on 50x50grid). This check is in update method of game. if(this.draggedShip.position.x - game.input.mousePointer.x >= 50 && some_boundary_condition) { this.draggedShip.position.x-=50; this.checkOverlap(); } So, after my ship has moved to next grid, I'm calling checkOverlap function to check on top of which grid fields actually is the ship. (I have seperate group of sprites for each grid field) checkOverlap: function() { for (var i = 0; i < this.draggedShip.children[0].length; i++) { for(var j = 0; j < this.fieldsGroup.children.length; j++) { if(this.draggedShip.children[0].children[i].overlap(this.fieldsGroup.children[j])) { this.fieldsGroup.children[j].alpha = 1; } } } }, What is wrong : it looks like sprite.overlap uses OLD children positions (before parent move). So when I move my ship 1 field to the left, the result of this checkOverlap function are fields where the ship was in previous step. How it should be: children positions should be updated before my checkOverlap call. How can I force to do it? I was trying to call update on childrens but it didn't work. Phaser 2.6.2
  10. Hi, I'm new to Pixi.js and I'm trying to make a simple scene, in RPGMaker Style (with different tiles on the ground to draw the scene). I coded a little app that simply creates all the needed sprites, adds them to a Container (or ParticleContainer, tested both), adds the whole container to the scene, and manages a few keyboard inputs. The result is highly laggy... What am I doing wrong? I would happily look for other ways to do this but I think I'm doing what guides show, so I don't get it. Here is the code : http://pastebin.com/C9UUK8nL Thanks !
  11. Hi guys Recently I'm testing my game on iphone7, I found out that the phone heat up very soon even though I have not started playing it, so basically there are just around 30 static sprites. When I reduced the number to less than 10, the temperature drop obviously. Eventually, this problem is resolved by changing the renderer from Phaser.AUTO to Phaser.CANVAS, but I don't understand why the canvas perform better than webgl, and why it only happens to iphone7(on iphone6+ or 7+ are totally fine), has anyone had the same problem can explain it to me?
  12. I've got a wee game where I've created a group of circles and a group of rectangles (they're called slots in the code) which are placed randomly on the canvas. The circles move around the world pseudo-randomly and when they intersect with a slot, the text at the top of the screen should change. However, I'm struggling to 'traverse' the groups properly: my function only checks one specific circle against one specific slot. I'm still pretty new to Phaser, and this 'game' is cobbled together from various examples so I'm sorry if it doesn't make much sense. Here's the sandbox: https://phaser.io/sandbox/edit/EilDwRdH And here's the markup of the specific functions I'm using to check intersection: function update() { circles.forEach(function(c_circle) { slots.forEach(function(c_slot) { if (checkOverlap(c_circle, c_slot)) { text.text = 'Overlapping: true'; } else { text.text = 'Overlapping: false'; } }); }); } function checkOverlap(spriteA, spriteB) { var boundsA = spriteA.getBounds(); var boundsB = spriteB.getBounds(); return Phaser.Rectangle.intersects(spriteA, boundsB); }
  13. Here's my situation: When the main game state starts, it generates a couple hundred objects (sprites, images, etc) scattered around the world, but when I change to a different state, the objects are removed as normal, and when I change states back to the main state, the objects are re-generated. I'm trying to figure out a way to not re-generate that large number of already-generated objects when I switch back to the main state. I already know that game.state.start() gives you the option to not clear the world, but this keeps the objects from the previous state displayed. Is there a way to store those objects so they don't appear when the state changes and then reappear on the screen where they were when the state is set back to the first state? More details: I'm making an AR mobile game that uses random seeds based on the current geolocation and time (rounded to minutes) to generate objects with limited lifetimes. I'm trying to make it so that objects that are close to being destroyed still appear even though re-generating the objects would not generate them. For example, an object was generated 5 minutes ago and will die in 2 minutes. The state changes and the player does stuff in that state then goes back. The object still should have 1 minute left before it disappears but it is already gone because time has moved forward to the point where it would not generate the object again. I'd like that object to remain and live out that last minute of its life since it was there before the player changed states and should be there when they get back.
  14. I am looking at this Phaser example, and am simply trying to replace the aliens sprites with simple filled circles drawn by graphics - I've also removed the car, I just want some sprites moving around the area randomly. Unfortunately, the sprites appear with the "no image" graphic. I'm not sure what I am doing wrong here, any help is appreciated: var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create }); var aliens; var sprite; function preload() { sprite = game.make.graphics(0,0); sprite.beginFill(0x00FFFF, 1); sprite.boundsPadding = 0; sprite.drawCircle(50, 50, 100, 100); } function create() { game.physics.startSystem(Phaser.Physics.ARCADE); aliens = game.add.group(); aliens.enableBody = true; for (var i = 0; i < 10; i++) { var s = aliens.create(game.world.randomX, game.world.randomY, sprite); s.name = 'alien' + s; s.body.collideWorldBounds = true; s.body.bounce.setTo(0.8, 0.8); s.body.velocity.setTo(10 + Math.random() * 40, 10 + Math.random() * 40); } }
  15. Hi!, I'm new to Phaser, I just started a day ago and it looked pretty interesting, But lately I've been having some problems with certain sprites that will break the game if I try to add them as an animation (will go into a black screen as soon as starting), and if i try to stop all animations and start the game with no animations, trying to see the sprite at least frozen, the game will just show any other sprite on the list avoiding the 'broken' sprite. I'm using a JsonHash from TexturePacker (the trial version) "walk/07": { "frame": {"x":113,"y":2,"w":38,"h":48}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":38,"h":48}, "sourceSize": {"w":38,"h":48} }, "walk/08": { "frame": {"x":112,"y":110,"w":39,"h":46}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":39,"h":46}, "sourceSize": {"w":39,"h":46} }, "batk/01": { "frame": {"x":2,"y":54,"w":39,"h":52}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":39,"h":52}, "sourceSize": {"w":39,"h":52} }, "batk/02": { "frame": {"x":43,"y":165,"w":33,"h":51}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":33,"h":51}, "sourceSize": {"w":33,"h":51} }, "batk/03": { "frame": {"x":2,"y":2,"w":64,"h":49}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":64,"h":49}, "sourceSize": {"w":64,"h":49} }, "batk/04": { "frame": {"x":69,"y":2,"w":41,"h":49}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":41,"h":49}, "sourceSize": {"w":41,"h":49} }, "batk/05": { "frame": {"x":77,"y":110,"w":32,"h":52}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":32,"h":52}, "sourceSize": {"w":32,"h":52} }, Here's part of the Json, the sprites that wont work are the "batk/**". And the meta "meta": { "app": "http://www.codeandweb.com/texturepacker", "version": "1.0", "image": "Kenshin.png", "format": "RGBA8888", "size": {"w":237,"h":218}, "scale": "1", "smartupdate": "$TexturePacker:SmartUpdate:5c2cc8f899f401916073813f8a57c05c:859f44caf8d84d1347ca0147886ae398:b98d3e23e0675afb80a9fc68a5d2d511$" } I remade the Json and the png and still the same sprites won't work. KenshinChar = game.add.sprite(36, game.world.height - 120, 'Kenshin', 'batk/03'); Tried to start the game with a bg and basically just one of the sprites, without animation and it avoided the sprite showing the first sprite of the Json. Here's the whole png. and these are the ones that won't work. I'm just trying the framework so I borrowed some sprites from a certain ds game. I have absolutely no idea what's happening, sorry if it's something dumb I'm missing.
  16. I'm currently having this issue when I am trying to get a sprite to go up a slope within phaser using the phaser-arcade-slopes.min.js plugin. I am using a .csv tilemap also with a tile size of 32x32. I'm unsure if my names are just incorrect or I am using the wrong type of file for the tilemap itself. I have been getting errors such as - Tilemap.createLayer: Invalid layer ID given: null & Cannot read property 'resizeWorld' of undefined(…). Any help would be much appreciated. "snow_tiles_32.png" is the name of the tileset I created and I'm using "tiles.csv" the tilemap created inside Tiled. I've also included a .rar file of everything to do with the game if anyone decides to take a further look into this issue. HTML var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); function preload() { this.game.load.tilemap('tilemap', 'assets/tilemaps/csv/tiles.csv', null, Phaser.Tilemap.CSV); this.game.load.spritesheet('tiles', 'assets/tilemaps/tiles/snow_tiles_32.png', 32,32); this.game.load.spritesheet('player', 'assets/penguin.png', 32,48); } var player; var cursors; function create() { this.game.physics.startSystem(Phaser.Physics.ARCADE); this.game.plugins.add(Phaser.Plugin.ArcadeSlopes); cursors = game.input.keyboard.createCursorKeys(); this.map = this.game.add.tilemap('tilemap'); this.map.addTilesetImage('snow_tiles_32', 'tiles'); this.game.stage.backgroundColor = '#80e3ff'; this.ground = this.map.createLayer('collision'); this.ground.resizeWorld(); this.game.slopes.convertTilemapLayer(this.ground,{ 2: 'FULL', 3: 'HALF_BOTTOM_LEFT', 4: 'HALF_BOTTOM_RIGHT', 6: 'HALF_TOP_LEFT', 5: 'HALF_TOP_RIGHT', 15: 'QUARTER_BOTTOM_LEFT_LOW', 16: 'QUARTER_BOTTOM_RIGHT_LOW', 17: 'QUARTER_TOP_RIGHT_LOW', 18: 'QUARTER_TOP_LEFT_LOW', 19: 'QUARTER_BOTTOM_LEFT_HIGH', 20: 'QUARTER_BOTTOM_RIGHT_HIGH', 21: 'QUARTER_TOP_RIGHT_HIGH', 22: 'QUARTER_TOP_LEFT_HIGH', 23: 'QUARTER_LEFT_BOTTOM_HIGH', 24: 'QUARTER_RIGHT_BOTTOM_HIGH', 25: 'QUARTER_RIGHT_TOP_LOW', 26: 'QUARTER_LEFT_TOP_LOW', 27: 'QUARTER_LEFT_BOTTOM_LOW', 28: 'QUARTER_RIGHT_BOTTOM_LOW', 29: 'QUARTER_RIGHT_TOP_HIGH', 30: 'QUARTER_LEFT_TOP_HIGH', 31: 'HALF_BOTTOM', 32: 'HALF_RIGHT', 33: 'HALF_TOP', 34: 'HALF_LEFT' }); this.map.setCollisionBetween(2,34, true, 'collision'); //player this.player = this.game.add.sprite(100,50,'player'); this.game.physics.arcade.enable(player); this.player.body.bounce.y = 0.2; this.player.body.gravity.y = 2000; this.player.body.collideWorldBounds = true; this.player.animations.add('left', [0,1,2,3], 10, true); this.player.animations.add('right', [5,6,7,8], 10, true); this.game.slopes.enable(this.player); this.game.camera.follow(this.player); } function update() { this.game.physics.arcade.collide(this.player, this.ground); this.player.body.velocity.x = 0; if(cursors.left.isDown){ this.player.body.velocity.x = -150; this.player.animations.play('left'); } else if (cursors.right.isDown){ this.player.body.velocity.x = 150; this.player.animations.play('right'); } else{ this.player.animations.stop(); this.player.frame = 4; } if(cursors.up.isDown && player.body.onFloor()){ this.player.body.velocity.y = -350; } } Test Game Phaser.rar
  17. Hello, I'm Emily and I'm a freelance artist looking for paid projects, small or part-time. I'm currently booked up on revenue share projects, so I'm only available for gigs that pay as I work. I specialize in 2D game graphics, including: - UI - backgrounds - 2D animations - illustrations/concept art I'm also open to doing anything else 2D animated or fully illustrated (cover art, comics...) For samples of my portfolio, please visit: http://emilyso.com/portfolio/game-artgraphics/ http://emilyso.com/portfolio/concept-art/ http://emilyso.com/portfolio/2d-animations/ If you feel my style of art would be suitable for your project, please contact me at: emilyso321@gmail.com Otherwise, please feel free to check out/play some games I've worked on: http://emilyso.com/games/ Thank you for your time and consideration. I hope you enjoy my work
  18. Is there a way to position every frame with different positions in MovieClip in case where frames are different sizes. As much as I explored, I couldn't find a way, because frames created with new PIXI.Rectangle have only x,y (which is frame position on spritesheet) and width and height.
  19. I am building the interface for a game and one part has a grid of square buttons. When the user hovers over the button, a information box (as a sprite) and some options appear as an overlay underneath the button and the user should be able to click the button to make a selection. The problem I have is that as soon as the mouse moves beyond the boundary of the button, my onMouseOut event kicks in and closes the overlay before the user has a chance to click anything in it. So what I need to implement is some logic that says "On mouse out of button, check to see if the mouser is above the overlay sprite. If it is then don't hide it. If it's not then do hide it. So is there any way of simply getting a boolean answer to "is the mouse pointer over this sprite"
  20. Hello. Noob question. Hard time reading and understanding isometric docs. http://udof.org/phaser/iso/doc/Phaser.Plugin.Isometric.Body.html#toc1 I want to create a isometric sprite. Not add it, but create it: I know that I can add it like game.add.isoSprite(). It is like when I create a group and create a sprite in it with "player1 = group_name.create(...);" I would like to create a isosprite. Is not implemented in isometric plugin? Do I have to add a isoSprite to the world and then add it to the group with group.add?
  21. I have some vector art stuff, and i was wondering if anyone know any form to load vector art into phaser? I found some post like this : http://www.html5gamedevs.com/topic/2491-how-do-you-create-your-visuals/?hl=vector, but that post doesn't really answer my question. Thanks!!!!!
  22. I am working on a robot game and I am using phaser library. My requirement is to pass the x y coordinates to robot(sprites) and it should move according to that coordinates without any velocity or speed. Every one is using speed to move the sprite. So, kindly give me some suggestions. Now I am using following code for moving sprites: // The following code is for the robot movement // This is initial velocity player.body.velocity.x = 0; player.body.velocity.y = 0; if (cursors.left.isDown) { player.body.velocity.x = -200; } else if (cursors.right.isDown) { player.body.velocity.x = 200; } if (cursors.up.isDown) { player.body.velocity.y = -200; } else if (cursors.down.isDown) { player.body.velocity.y = 200; }
  23. View the jsfiddle demonstrating the issue (just click and drag the circle - relevant code on line 102). When I add a circle to the stage with Pixi.Graphics and drawCircle( 150, 100, 50 ), the circle when dragged becomes offset by it's position ( +150, +100 ) in the Graphics container. (and if we request the circle.position it's also inaccurate) What's the best way to add a shape to the screen and set it's position if it's not through a Graphics container?
  24. Hey guys, Just wanted to show my little in-development game engine. I decided to create my own engine as Panda.js didn't got any updates for several months. The goal here is to have a lightweight but powerfull game engine with awesome performances, whatever the device is (ie. Android) while being able to use Canvas+ (so, no DOM is used as Canvas+ doesn't supports DOM). What I've already done: Game config via `config.js` file ; Game scenes ; Ultra-customizable Sprite class that allows to modify everything drawing related ; Mouse events support (click, move, hover, down, release, out) and Drag & Drop support ; Built-in physics engine (made on my own, so a bit hacky/buggy but I plan to fix these issues :p) ; Only redraw what needs to by using a simple variable on every scene children: `needsUpdate`. What I want to do: Implement built-in networking to allow multiplayer games/apps ; Implement UI elements like Text, Buttons, Scrollable panels, Inputs to allow devs to make real Canvas UI ; Fix the overall bugs ; Add some helper classes ; Maybe implement SAT.js for collisions detection/solving ; And finally, build the game I started this engine for :). So this is an "ambitious" project that aims to allow doing things other engines wasn't able to offer me. Source code (Gitlab): https://gitlab.com/skyzohkey/PwassonEngine Demonstration: https://skyzohkey.gitlab.io/PwassonEngine Feel free to contribute to the code, open issues if you find them, create issues for suggestions too. Or simply leave a message here. Thanks for reading, I hope I'll be able to drive this project the right way.
  25. this is my first post so i apologize if i'm posting incorrectly. i'm trying to have a button change its frame and some of the others in the group. the buttons display fine initially and i can successfully change the properties but i cannot visually get them to change frames when one is clicked. on the other hand, if i want to change only one button that works (you can see that i left the code commented out for that). i left the changing button frames line blank because i've tried so many things and nothing seems to work. var GameState = { preload: function(){ this.game.load.spritesheet('btnSht', "tFassets/btnSprtSht.png", 100, 100, 4); }, create: function(){ btnArray = [ {x: 50, y: 200, id: 1, frm: 0}, {x: 150, y: 200, id: 2, frm: 0}, {x: 250, y: 200, id: 3, frm: 0}, {x: 350, y: 200, id: 4, frm: 0}, {x: 450, y: 200, id: 5, frm: 0}, {x: 50, y: 300, id: 6, frm: 0}, {x: 150, y: 300, id: 7, frm: 0}, {x: 250, y: 300, id: 8, frm: 0}, {x: 350, y: 300, id: 9, frm: 0}, {x: 450, y: 300, id: 10, frm: 0}, ]; this.btns = this.game.add.group(); var self = this; count = 0; btnArray.forEach(function (element){ btn = self.btns.create(element.x, element.y,'btnSht'); btn.idNum = element.id; btn.frame = element.frm; btn.inputEnabled = true; btn.events.onInputDown.add(self.btnFunc, this); }); }, btnFunc: function (sprite, event) { //console.log(sprite.idNum); /* this works to change the one clicked if (sprite.frame == 0) { sprite.frame = 1; count++; } else { sprite.frame = 0; count--; }; */ btnArray.forEach(function (element){ //resets all back to zero before element.frm = 0; //assigns new frame value to appropriate btns for (var i = 0; i < sprite.idNum; i++){ this.btnArray[i].frm = 1; }; //check to make sure values are changed and they are console.log(btnArray); //change btn frames visually }); }, update: function(){ }, }, game = new Phaser.Game(600, 400, Phaser.AUTO); game.state.add('GameState', GameState); game.state.start('GameState'); tF.js