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
    • 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 191 results

  1. srikarg

    Geometrical Sprites with Physics

    Hello everyone, Based on this comment, I realized that Phaser removed support for GeomSprites. However, I'm thinking about making a game in which I just need simple shapes rather than image/spritesheet assets. I thought about using the Graphics object, but realized that I cannot apply physics to the shapes I create using that (as far as I know). Then, I found information about game.debug.render to create circles and rectangles, but ran into the same problem. My question: Is there a way to create a sprite that is just a simple circle, rectangle, or any other basic shape AND has physics properties (like being able to collide with other sprites, drag, etc.). I confirmed this lack of physics properties by checking out the classes for the Rectangle and Circle. Thanks in advance for any help!
  2. Hello, i'd like to know if there's any way to determine if a certain sprite is part of a certain group. More specifically, if i can check for collision between sprite and group, and make sure the sprite is colliding with another sprite that's part of a certain group. Thanks in advance.
  3. I have multiple sprites that I'd like to each control with the arrows in a turn-based way. i.e. move sprite1 around screen with arrows then press 'E' to switch to controlling sprite2 with arrow keys. Repeat back and forth. I've tried many methods, looked through many examples, read Interphase 1, and googled for hours. I can't seem to figure this one out. Here's the relevant code: currentPlayer = "Guy"; //this.player1 if (currentPlayer == "Guy") { movingPlayer = this.player1; } else { movingPlayer = this.player2; } //the conditional doesn't work, but if I set it outside the conditional it's fine //movingPlayer = player1 works fine. this.cursors.right.onDown.add(this.moveRight, this, 0, movingPlayer); moveRight: function (key, player) { player.x += TILE_SIZE; } So if I set movingPlayer manually before I run the game it works fine. It passes the correct player to the moveRight function and everything is great. However, I CAN NOT for the life of me set movingPlayer dynamically. I've tried it in the update function, in the create function, in its own function, and nothing works. Is there a good tutorial, example, code snippet, or advice on how to have two sprites on the screen that can both be controlled by the arrow keys on different turns? Thanks!
  4. Zendrael

    Redraw State without Restarting It

    Hello! As my game gets the entire window proportionally, I draw more or less stuff depending on the width of the window. It's ok but when I start the game on small window then I resize it, part of the game area stay blank 'cause I just drawed in the start size. So, to get the result I want, by now, when the window resizes I redraw all by restarting the state: window.onresize = function() { gameRatio = window.innerWidth / window.innerHeight; //my default size is 240x160 GAME.scale.setGameSize(Math.ceil(160 * gameRatio), 160); GAME.state.start(GAME.state.current); };The problem is: if the player resizes the window during a gameplay, the state is restarted and he looses what he/she was doing... Is there any other way to redraw all objects when window resizes? Thanks
  5. So, I've been back and forth with different techniques, trying to get a JSON texture atlas to load a tile sheet of animations for each "type" of animal in this game. But trying to wrangle what's valid from what's invalid according to v3 (over much of the "outdated" v2 tutorials and such). Can someone tell me how the JSON object gets loaded by the loader, but the textures are not in the textureCache??? This code was modified from a v3.0.1 tutorialhttp://www.rocketshipgames.com/blogs/tjkopena/2015/09/basic-scaling-animation-and-parallax-in-pixi-js-v3/ This is the error I get Uncaught Error: The frameId "walk01" does not exist in the texture cache This couldn't be a CORS problem could it? I mean the images are in a sub-directory within the same server/project. Is there a (yet another) new way to handle this? My brain feels like jello trying to figure this out.var animalTypes= [ {"typeID": 0, "name": "creeper", "tilesheet": "animalAssets/animal0.png", "JSON": "animalAssets/animal0.json"}, {"typeID": 1, "name": "sleeper", "tilesheet": "animalAssets/animal1.png", "JSON": "animalAssets/animal1.json"}];function Animal(id, type, speed, start){ var aID = id; var aData = animalTypes[type]; // References a JS Object literal with the "DATA" var aSpeed = speed; var aPosition = start; var FRAMES = [ "walk01", "walk02", "walk03", "walk04", "stand01", "stand02", "stand03", "stand04" ] var frameIndex; var frameTime; var FRAMERATE = 0.08; var VELOCITY = 0; PIXI.loader.add('animal'+ aID, aData.JSON).load(function () { var texture = resources["animal" + aID].textures; console.log(resources.animal0.textures); // SHOWS ARRAY OF TEXTURE OBJECTS NAMED AS ABOVE }); var aSprite = new PIXI.Sprite(PIXI.Texture.fromFrame(FRAMES[0])); frameIndex = 0; aSprite.anchor.x = 0.5; aSprite.anchor.y = 0.5; aSprite.position.x = 0; aSprite.position.y = 0; stage.addChild(aSprite);}var newSprite = new Animal(0,1,1,1);
  6. In many forums and blogs pixi seems to have interactive sprites http://www.goodboydigital.com/pixi-js-now-even-better-at-being-interactive/ http://www.goodboydigital.com/pixi-js-gets-interactive/ mySprite.mouseupoutside = function(mouseData){ console.log("MOUSE UP OUTSIDE!");}mySprite.mousemove = function(mouseData){ console.log("MOUSE MOVE!");}mySprite.touchendoutside = function(touchData){ console.log("TOUCH END OUTSIDE");}mySprite.touchmove = function(touchData){ console.log("TOUCH MOVE");}yet i see nothing about it in the documentation: https://pixijs.github.io/docs/PIXI.Sprite.html And going over sprites in debugger return undefined for setInteractive, mouseDown, etc.. was this feature removed from PIXI ? How should interactivity be implemented instead ? I tried also setting event handler in renderer.plugins.interaction.onMouseDown interaction manager but my handler was never called. Should i create a new instance of InteractionManager ?
  7. Hello all, I'm trying to make a "game" in which you drag sticks from a pool and you position them on the screen. (I'm basicaly creating a cuisenaire program). The sticks have to be restrained in the underneath tilemap and also cannot overlap with each other. Every stick has a sprite.input.enableDrag(); sprite.input.enableSnap(30, 30, true, true); So it can be draggable. Also, I whenever the user drags a stick from the pool, I clone a stick there so he can drag another one later on. How can I instruct phaser to watch for collisions between all sticks? If I put them on a group, I loose the input.enableDrag on every stick. If I don't have them on a group, how can I reference them to watch for collisions with each other? Thank you
  8. fedora

    Collection In A Set Order

    I am at the point where I feel comfortable with all the core features of Phaser having played with and created some small games as well as dissected the "how to" of numerous others. Now I am moving forward with an idea of a new game but have a question and I hope someone has tackled what I think is a straight forward problem. I know how to have a player collect coins/objects, but I do not know how to have a player collect coins/object in a set order. I want to set the system so that the player has to collect in a certain order. If this does not occur (ie player jumps from coin/object 1 to 3) the coin/object three does not remove until coin/object 2 has been collected. Any guidance and or sample would be appreciated. I searched but was unsuccessful in locating one. Thank you in advance for any assistance.
  9. illscode

    Adding sprite group over time

    Hi All, phaser newb, novice js I'm trying to build a little christmas game, sort donkey kong-ish, with some gifts that go along some conveyer belts into santa's bag (attached a pic). I'm creating a group of gift sprites behind the pipe in the top right. I want to add gravity to each one but over time so they stream out of the pipe in sequence. Would you do this in the update: function() . Is there a way to create the sprites over time and add them to the group? Can your add a delay somehow? cheers for any advice/help in advance here's my js for the group buildGifts: function(){ this.giftgroup = this.add.group(); this.giftgroup.enableBody = true; for(var i=0; i<this.totalGifts; i++){ var g = this.giftgroup.create(1000, 80, 'blueGift', 0000); g.anchor.setTo(0.5,0.5); g.body.moves = true; g.animations.add('gifted', Phaser.Animation.generateFrameNames('gift', 0, 0, '', 4), 30, true); this.game.physics.arcade.enable(g); g.body.bounce.y = 0.2; // g.body.gravity.y = 1500; g.body.velocity.x = 0; g.inputEnabled = true; g.events.onInputDown.add(this.destroyGift, this); }
  10. Hey guys, I was working on a little project and would like to have some click actions on a sprite. But somehow it doesn't work. Is it not meant to work? And if not, why? Using actions would be cool because I am not sure yet if I only need clicking or maybe some other stuff, too, and actions make it pretty easy. Just wanna make sure it's not me being stupid and just using it wrong Example: can click sphere, can't click player sprite: http://www.babylonjs-playground.com/#9RUHH
  11. I am testing gameplay mechanics with Phaser and I am trying to have one character communicate a simple message to another when they are facing each other. Is there a way I can mimick this dialogue box using Phaser? So basically, when one sprite collides with another, I want to show this box with a message in it possible give the user input choices. Ex: "What is your name?" User choices would be: "x", "y", "z" and an "Answer" button.
  12. daniel0514

    matching buttons with group content

    I know I’ve been a little annoying the last few weeks, but it seems that anything I try won’t work! In my game, a dance revolution-like game, I have a group of randomly generated arrows (1 minimum - 3 maximum), If the group has more than 1 arrow and the player press the same arrows in his keyboard, that will give points, but if the player misses one or more arrows, the game won’t give points. To sum it up, how can I check if the arrows the player press, match with the arrows coming in the group in order to give points? I really appreciate all the help you’ve been giving me, this is the most ambitious game I’ve been working on and really want to make it work. thanks in advance!
  13. in unity they have tags, is there something i can do similarly? player = game.add.sprite(10, 30, 'BlueSquare'); player.tag = blue; player = game.add.sprite(50, 90, 'RedSquare'); player.tag = red; something like that?
  14. So I have tried to develop several games where multiple objects are produced and they move from pointA to pointB and then disappear (deleted) and are no longer required. I have tried many approaches tweening, physics with gravity when they need to fall from a point to a point, also I had the objects on recycle so only the alive ones were rendering. But still the performance took a serious hit even with no more than 50 objects (yes all animating or falling at the same time) and settled around 30-40fps (which is horrible for a simple game) So I was wondering what is the most perfomant approach here for something like this. In terms of animation(tweening) vs physics and about recycle approach. Assume that the objects are actually sprites and may play different frames (even while they animate or fall). Also assume that each object is as big as 5%-10% of the total space of the stage. I really appreciate the help on this.
  15. pranadevil

    issue rotation of two sprites

    people i got this: this.sheep.forEachAlive(function({ nuevodiskette.x = b.body.x; nuevodiskette.y = b.body.y; nuevodiskette.angle = b.angle; b.angle++; }, this);why the two sprites rotates at same speed but in different x and y? they are supposed to be one on front of the other !!?? any idea?
  16. Am I missing something? New guy on the block here, and I'm trying to learn to use sprite sheets with pixi.js When it comes to sprite sheets, It seems like Pixi is pretty tight with Texture Packer. In fact, I haven't been able to find any up-to-date info on using Pixi without Texture Packer. This is important to me because I am trying to learn more than just pixi.js, but 2d animation in general, and I'm broke Anyhow, I did download Texture Packer, was warned about the trial (after which I'll have to pay(!)?), and went to publish my first sprite sheet, when I was greeted by this - implying that the free version ofTexture Packer does not support pixi.js... ...hence, my questions: -Will I have to pay for Texture Packer to use sprite sheets in pixi.js? -Assuming there is a workaround for this, once my trial is over, will I then have to pay to continue using sprite sheets in pixi.js? -Are there any other ways to work with sprite sheets in pixi.js, and which are most supported? -Does pixi.js have future plans of supporting any other technologies for use with sprite sheets?
  17. Fellow game devs, Here are a few links to free 2D assets, sprite sheets and even characters: 1) 301 FREE 2D UI Sprites (#1) http://soloflare.blogspot.com/2015/08/assetpack1.html 2) FREE 2D Character Pack (#1) including 14 SVG Files http://soloflare.blogspot.com/2015/08/charpack1.html 3) 2D Asset Pack 1.0 including SVG Source files http://soloflare.blogspot.com/2015/08/assetpack2.0.html 4) 2D POWER UP Pack 1.0 Including SVG source + PNG Source http://soloflare.blogspot.com/2015/08/pup1.html Enjoy :-)
  18. Hi everyone. I have a few questions that I would like some assistance with. As I'm getting into HTML5 game development as a technical designer/artist...I know that with an online game (especially html5), having your game assets require too many server calls is undesirable. What is a comfortable/safe number of server calls? When your dealing with multiple sprite sheets, is there a way to wrap multiple sprite sheets into one file? Not one big sprite sheet. What would be best practices for this?I am concerned because of mobile and/or other countries where bandwidth is an issue. I have the image asset file size part covered with Texturepacker, TinyPNG Re-using certain assets in smart ways, but I know that server calls can be a problem. Any help would be appreciated. Sincerely, Carlos
  19. I'm working on a game called "The Space Between" for a gamejam, and I have a problem with memory efficiency. I'm drawing asteroids as circles and destroying them when I don't need them, but it still starts to lag a bit as the game goes on. How can I make it faster and smoother? Here is a link to the game, and copy-pasted below is the part that deals with asteroid creation and, below that, the entire source code (all 382 lines of it). I don't really know anything about memory allocation, so I'm sure I'm making some pretty elementary errors. (Also, there's no loading screen yet, so give it a minute to pop up!) Thank you very much for any help you can give! Asteroid Creation/Destruction Code: // This function is called in update and constantly checks to see if certain thresholds are passed.// If they are, it generates a rectangular area of asteroids and calls a function to destroy others.function constantGen() { if ((threshold.x + 400) < sprite.x) {asteroidGen("right"); threshold.x = sprite.x; killAsteroids();} if ((threshold.x - 400) > sprite.x) {asteroidGen("left"); threshold.x = sprite.x; killAsteroids();} if ((threshold.y + 300) < sprite.y) {asteroidGen("down"); threshold.y = sprite.y; killAsteroids();} if ((threshold.y - 300) > sprite.y) {asteroidGen("up"); threshold.y = sprite.y; killAsteroids();}}// This is the function that generates asteroids when the ship gets to the edge of an areafunction asteroidGen(dir) { console.log("dir: " + dir); var xer = 0; var yer = 0; for (var b = 0; b < 10; b++) { if (dir == "right") { xer = sprite.x + 400 + Math.random() * 800; yer = sprite.y - 300 + Math.random() * 1200; } else if (dir == "down") { xer = sprite.x - 1200 + Math.random() * 1600; yer = sprite.y + 300 + Math.random() * 600; } else if (dir == "left") { xer = sprite.x - 400 - Math.random() * 800; yer = sprite.y - 900 + Math.random() * 1200; } else if (dir == "up") { xer = sprite.x - 400 + Math.random() * 1600; yer = sprite.y - 300 - Math.random() * 600; } else { xer = sprite.x - 800 + Math.random() * 1600; yer = sprite.y - 600 + Math.random() * 1200; asteroids(xer, yer); xer = sprite.x - 800 + Math.random() * 1600; yer = sprite.y - 600 + Math.random() * 1200; } asteroids(xer, yer); } }// This is the function that sends all of the asteroid sprites to a destruction functionfunction killAsteroids() { console.log("spacerock count: " + spacerocks.length); spacerocks.forEachAlive(destruction, this); console.log("spacerock count after destruction: " + spacerocks.length);}// This function checks to see if asteroids are too far away and destroys themfunction destruction(rock) { //console.log("check for destruction"); if ((rock.x < (threshold.x - 1000)) || (rock.x > (threshold.x + 1000)) || (rock.y > (threshold.y + 1000)) || (rock.y < (threshold.y - 1000))) { rock.body.destroy(); rock.destroy(); //console.log("destroyed?"); };}// This is the function that creates an asteroidfunction asteroids(x, y) { //console.log("asteroid at " + x + "," + y); var circleSize = Math.random() * 50 + 60; var circles = game.add.graphics(0, 0); circles.beginFill('0xffffff'); circles.lineStyle(1, 0xffffff); circles.drawCircle(0, 0, circleSize); circles.endFill(); asteroid = game.add.sprite(x, y); game.physics.p2.enable(asteroid, false); asteroid.addChild(circles); asteroid.body.addCircle(circleSize/3); asteroid.body.setCollisionGroup(asteroidCollisionGroup); asteroid.body.collides([shipCollisionGroup, asteroidCollisionGroup]); asteroid.body.velocity.x = Math.random() * 50 - 25; asteroid.body.velocity.y = Math.random() * 50 - 25; this.spacerocks.add(asteroid); }Full Source: var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'game_div', { preload: preload, create: create, update: update, render: render });function preload() { game.load.image('ship', 'ship.png'); game.load.audio('music', 'music.wav'); game.load.image('square', 'square.png'); game.load.image('dial', 'dial.png'); game.world.setBounds(0, 0, 800*100, 600*100);}var sprite;var shapeSprite;var cursors;var fuelRatio = {"value":1};var graphics;var beenhere = 0;var shipCollisionGroup;var asteroidCollisionGroup;var asteroid;var spacerocks;var threshold = {"x": 0, "y":0};var loss = false;var reset = {"x":0, "y":0};var textdisplay;var fuelLoc = {"x":0, "y":0};var dial;var fuelPodSprite;var refilling = false;function create() { music = game.add.audio('music'); music.play(); game.stage.backgroundColor = "#000000"; game.physics.startSystem(Phaser.Physics.P2JS); spacerocks = game.add.group(); game.physics.p2.setImpactEvents(true); game.physics.p2.restitution = 0.8; shipCollisionGroup = game.physics.p2.createCollisionGroup(); asteroidCollisionGroup = game.physics.p2.createCollisionGroup(); beenhere = 0; // This will run in Canvas mode, so let's gain a little speed and display game.renderer.clearBeforeRender = true; game.renderer.roundPixels = true; // We need arcade physics graphics = game.add.graphics(0, 0); graphics.fixedToCamera = true; fuelPod(400*100, 300*100); // Our player ship sprite = game.add.sprite(400*100, 300*100, 'ship'); sprite.anchor.set(0.5); sprite.angle = 90; sprite.scale.x = .5; sprite.scale.y = .5; // and its physics settings game.physics.enable(sprite, Phaser.Physics.P2JS); sprite.body.addCircle(5); sprite.body.setCollisionGroup(shipCollisionGroup); sprite.body.damping = .1; sprite.body.angularDamping = .99; sprite.anchor.setTo(0.5,0.5); sprite.name = 'sprite'; sprite.body.collides(asteroidCollisionGroup, gotHit, this); threshold.x = sprite.x; threshold.y = sprite.y; cursors = game.input.keyboard.createCursorKeys(); spacebar = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); game.camera.follow(sprite); fuelArrowSpawn(); fuelRemaining(); asteroidGen();}function asteroidGen(dir) { console.log("dir: " + dir); var xer = 0; var yer = 0; for (var b = 0; b < 10; b++) { if (dir == "right") { xer = sprite.x + 400 + Math.random() * 800; yer = sprite.y - 300 + Math.random() * 1200; } else if (dir == "down") { xer = sprite.x - 1200 + Math.random() * 1600; yer = sprite.y + 300 + Math.random() * 600; } else if (dir == "left") { xer = sprite.x - 400 - Math.random() * 800; yer = sprite.y - 900 + Math.random() * 1200; } else if (dir == "up") { xer = sprite.x - 400 + Math.random() * 1600; yer = sprite.y - 300 - Math.random() * 600; } else { xer = sprite.x - 800 + Math.random() * 1600; yer = sprite.y - 600 + Math.random() * 1200; asteroids(xer, yer); xer = sprite.x - 800 + Math.random() * 1600; yer = sprite.y - 600 + Math.random() * 1200; } asteroids(xer, yer); } }function toRadians (angle) { return angle / (180 / Math.PI);}function explode() { var explosion = game.add.emitter(sprite.x, sprite.y); explosion.makeParticles('square'); explosion.setScale(.2, 1, .2, 1, 0); explosion.setRotation(500,1000); explosionarea = new Phaser.Rectangle(-1, -1, 2, 2); explosion.gravity = 0; explosion.area = this.explosionarea; explosion.start(true, 10000, null, 20); explosion.setAlpha(0, 1, 10000, Phaser.Easing.Linear.None ); explosion.update();}function fuelCheck() { if (Math.sqrt(Math.pow((sprite.x - fuelPodSprite.x), 2) + Math.pow((sprite.y - fuelPodSprite.y), 2)) < 15) fuelGet();}function fuelGet() { //console.log("fuelPodSprite.x: " + fuelPodSprite.x); var moveX = Math.random() * 2000 - 1000; var moveY = Math.random() * 2000 - 1000; fuelPodSprite.body.x = fuelPodSprite.body.x + moveX; fuelPodSprite.body.y = fuelPodSprite.body.y + moveY; game.add.tween(fuelRatio).to({"value":1}, 500, Phaser.Easing.Linear.None, true); refilling = true; fuelLoc.x = fuelPodSprite.body.x; fuelLoc.y = fuelPodSprite.body.y; console.log("fuelPodSprite.x: " + fuelPodSprite.x); }function thrustExhaust() { var exhaust = game.add.emitter(sprite.x, sprite.y); exhaust.makeParticles('square'); exhaust.setScale(.2, .3, .2, .3, 0); exhaust.setRotation(500,1000); //console.log("rotations in pi: " + sprite.rotation/3.141592); var theangle = toRadians(sprite.angle); var xVec = 0 - Math.sin(theangle); var yVec = Math.cos(theangle); exhaust.setAlpha(1, 0, 500, Phaser.Easing.Quadratic.None ); exhaust.x = sprite.x+xVec*20; exhaust.y = sprite.y + yVec*20; exhaustport = new Phaser.Rectangle(-5, -5, 10, 10); exhaust.area = this.exhaustport; //console.log("Thrust X, Y: " + Math.cos(sprite.rotation) * 300 + "," + Math.sin(sprite.rotation) * 300); var yThrust = yVec * 300 + (sprite.body.velocity.y); var xThrust = xVec * 300 + (sprite.body.velocity.x); exhaust.setYSpeed(yThrust - 100, yThrust + 100); exhaust.setXSpeed(xThrust - 100, xThrust + 100); exhaust.gravity = 0; exhaust.start(true, 5000, null, 25); exhaust.update();}function constantGen() { //console.log("constantGen"); if ((threshold.x + 400) < sprite.x) {asteroidGen("right"); threshold.x = sprite.x; killAsteroids();} if ((threshold.x - 400) > sprite.x) {asteroidGen("left"); threshold.x = sprite.x; killAsteroids();} if ((threshold.y + 300) < sprite.y) {asteroidGen("down"); threshold.y = sprite.y; killAsteroids();} if ((threshold.y - 300) > sprite.y) {asteroidGen("up"); threshold.y = sprite.y; killAsteroids();}}function killAsteroids() { console.log("spacerock count: " + spacerocks.length); spacerocks.forEachAlive(destruction, this); console.log("spacerock count after destruction: " + spacerocks.length);}function destructionForSure(rock) { rock.body.destroy(); rock.kill();}function destruction(rock) { //console.log("check for destruction"); if ((rock.x < (threshold.x - 1000)) || (rock.x > (threshold.x + 1000)) || (rock.y > (threshold.y + 1000)) || (rock.y < (threshold.y - 1000))) { rock.body.destroy(); rock.destroy(); //console.log("destroyed?"); };}function constrainVelocity(sprite, maxVelocity) { var body = sprite.body var angle, currVelocitySqr, vx, vy; vx = body.data.velocity[0]; vy = body.data.velocity[1]; currVelocitySqr = vx * vx + vy * vy; if (currVelocitySqr > maxVelocity * maxVelocity) { angle = Math.atan2(vy, vx); vx = Math.cos(angle) * maxVelocity; vy = Math.sin(angle) * maxVelocity; body.data.velocity[0] = vx; body.data.velocity[1] = vy; console.log('limited speed to: '+maxVelocity); }};function update() { if (cursors.up.isDown) { sprite.body.thrust(200); thrustExhaust(); if (fuelRatio.value > 0) fuelRatio.value -= .002; fuelRemaining(); } else { } if (cursors.left.isDown) { sprite.body.angularVelocity = -5; } else if (cursors.right.isDown) { sprite.body.angularVelocity = 5; } else { } constrainVelocity(sprite, 200); //game.world.wrap(sprite.body, 10, false, true, true); //game.world.wrap(asteroid.body, 10, false, true, true); constantGen(); if ((spacebar.isDown) && (loss == true)) reStart(); fuelArrow(); fuelCheck(); if (refilling == true) fuelRemaining();}function fuelArrowSpawn() { dial = game.add.sprite(750, 50, 'dial'); dial.anchor.set(0.5); dial.angle = -90; dial.scale.x = .5; dial.scale.y = .5; dial.fixedToCamera = true;}function fuelArrow() { //console.log(Math.atan(fuelLoc.y - sprite.y, fuelLoc.x - sprite.x)); dial.rotation = Math.atan2(fuelLoc.y - sprite.y, fuelLoc.x - sprite.x); }function fuelPod(x, y) { var fuelPodCircle = game.add.graphics(0, 0); fuelLoc.x = x; fuelLoc.y = y; fuelPodCircle.beginFill('0xFF0000'); fuelPodCircle.lineStyle(1, 0xFF0000); fuelPodCircle.drawRoundedRect(0, 0, 10, 15, 2); fuelPodSprite = game.add.sprite(x, y); game.physics.p2.enable(fuelPodSprite, false); fuelPodSprite.addChild(fuelPodCircle); fuelPodSprite.name = 'fuelPodSprite'; fuelPodSprite.body.collides([asteroidCollisionGroup]); fuelPodSprite.body.setCollisionGroup(asteroidCollisionGroup); }function asteroids(x, y) { //console.log("asteroid at " + x + "," + y); var circleSize = Math.random() * 50 + 60; var circles = game.add.graphics(0, 0); circles.beginFill('0xffffff'); circles.lineStyle(1, 0xffffff); circles.drawCircle(0, 0, circleSize); circles.endFill(); asteroid = game.add.sprite(x, y); game.physics.p2.enable(asteroid, false); asteroid.addChild(circles); asteroid.body.addCircle(circleSize/3); asteroid.body.setCollisionGroup(asteroidCollisionGroup); asteroid.body.collides([shipCollisionGroup, asteroidCollisionGroup]); asteroid.body.velocity.x = Math.random() * 50 - 25; asteroid.body.velocity.y = Math.random() * 50 - 25; this.spacerocks.add(asteroid); }function gotHit() { explode(); fail();}function fail() { reset.x = sprite.x; reset.y = sprite.y; sprite.kill(); var textstyle = { font: "53px Helvetica", fill: "#FFFFFF" }; textdisplay = game.add.text(50, 50, "press spacebar to restart.", textstyle); textdisplay.fixedToCamera = true; loss = true;}function reStart() { fuelRatio.value = 1; sprite.reset(reset.x, reset.y); textdisplay.destroy(); textdisplay.text = ""; loss = false; fuelRemaining();}function fuelRemaining() { graphics.clear(); graphics.beginFill(0xFFFFFF); graphics.lineStyle(10, 0xFFFFFF, 1); graphics.drawRect(100, 550, 600*fuelRatio.value, 10); if (fuelRatio.value == 1) refilling = false;}function render() {}
  20. minasokoni

    Offset grouped animations

    I have a group of sprites that are all the same in a loop. What would be the best way to offset each animation frame, so they all don't animate at the same frame.
  21. darkraziel

    Multiple sprites with animation

    Hello everyone. I'm currently working in a Puzzle Bubble kind of game and I'm trying to improve mobile performance. Currently I'm creating 1 pool for each colored bubble in my game and adding all animation frames to the sprite like this: this.redBubbles = this.game.add.group();this.redBubbles.createMultiple(BUBBLE.AMOUNT_NORMAL, "anim_bubbles", "anim_red1_0.png");this.redBubbles.callAll("animations.add", "animations", "start", ["anim_red1_0.png"]);this.redBubbles.callAll("animations.add", "animations", "over", ["anim_red_over.png"]);frameNames = Phaser.Animation.generateFrameNames("anim_red2_",0, 10, ".png");this.redBubbles.callAll("animations.add", "animations", "kill", frameNames);frameNames = Phaser.Animation.generateFrameNames("anim_red1_", 0, 6, ".png");this.redBubbles.callAll("animations.add", "animations", "collision", frameNames);As I need to use them I just change the visible property to true and kill them when I stop using them. Is this the correct way to use sprites and animations? Would it be better to just create a pool of sprites without animations and create a new sprite on top of it to animate? Thanks for any help and excuse the poor english.
  22. 'Rufanzia' (working title) is a non-linear 2D platformer / metroidvania, set in a world of gothic adventure. I'm currently seeking a sprite artist with 2D animation skills to help populate the game with enemies and NPC's. This would be a good position for a confident beginner with some experience of non-pixel art sprites. Compensation will be based on how we decide to market and sell the game, if we do decide to crowdfund, a split of this can be arranged to cover expenses and time. Team Structure: Myself - environment art, code. You - 2D animated sprites. Progress: pre-alpha, but with a stable prototype than includes all gameplay elements, simply lacking finished non-PC sprites (currently using placeholders). The game itself: *Retro action-platformer with light RPG elements. *Dark and bizarre atmosphere but not a horror game, achieved through art style, architectural level design and sound. *Real-time combat with a wide range of melee' weapons, black powder guns and element-based magic. *Non-linear approach to progression, player choices set the pace and outcome of events, includes sub-quests and some backtracking to unlock new areas. *Power-ups that rewards exploration rather than repetitive grinding. *Cross platform, though the magic of html5 & node.js Brief: The focus will be on enemy and NPC sprites. Each enemy will require one set of move frames, one set of attack frames and one set for taking damage. NPC's need one movement strip and one basic action set which differs depending on their type. Style is non-pixel art, so more of a painterly approach with blending and soft edges. Please email contact@iaogames.com if you are interested, or if you prefer get in touch via twitter: @@iao_dev I look forward to hearing from you
  23. Hi, I am trying to layout some tiles in a tiled map and load them into phaser (2.3.0). I've tried some tilemaps from opengameart which are layed out in columns of 5-6 tiles per row. In this example, the map.setCollisionBetween(x,y) was not working (I had my main char passing like air), even using game.physics.arcade.collide(player, layer); I then created a simple map of one row with 6 tiles and set map.setCollisionBetween(1,6); and it worked. Now I want to show the Object Layer 1 of tiled. I am using the same tilemap for blocks and objects. I've added the following things in the create() function (after loading the tilesetImage / setCollisionBetween): ladders = game.add.group(); // new sprite group of objects map.createFromObjects('Object Layer 1',4,'objects',0,true,false,ladders); // map points to Tilemap objec, ladders is a group // Draw tile layer layer = map.createLayer('Tile Layer 1'); layer.resizeWorld(); Even though it should have been the third tile, it shows the first tile as an object. Is there any example relative to what I am trying to do?
  24. Alebrijes

    trying to create a sprite

    Hi, I try to load a an image from a sprite sheet, This is my code: loadAssets: function() { // The coordinates for the sprite sheet PIXI.loader .add(['assets/interface.json']) .once('complete', this.onLoadAssets.bind(this)) .load();},onLoadAssets: function() { // This is the background image I try to load... var bgtexture = new PIXI.Texture.fromImage('bg.png'); var paperBG = new PIXI.Sprite(bgtexture); this.stage.addChild(paperBG);} When I load the page I can see the space should have the image in the screen, but its all black, I cant see the image, What I´m doing wrong ? Thanks for your help!
  25. o0Corps0o

    Question about grouping objects

    Hi, I've come from an OOP style background with AS3, etc. I'm struggling to work out how to groups things together (kind of like a movieclip in flash). So basically i want to create an object, which will have certain values i can access, but also have created several sprites, and bitmaptext associated with it. Example of how i want to create my object: createNewUpgradeItem:function(myNumber){ var upgradeItem = new UpgradeItem(this, 25, 200+i*55, GAME_NAME.UpgradesAvailable.name, GAME_NAME.UpgradesAvailable.description, GAME_NAME.UpgradesAvailable.upgradePrice, GAME_NAME.UpgradesAvailable.priceMultiplier, GAME_NAME.UpgradesAvailable.sMultiplier, GAME_NAME.UpgradesAvailable.cMultiplier, i%4); GAME_NAME.upgradeMenu.add(upgradeItem); // Doesn't Work upgradeItem._background.events.onInputDown.add(function(){UpgradeItemUpdate(this,upgradeItem);console.log(upgradeItem._name)},this); }, // Where 'i' would be a count (in a for loop) to create several objects. And UpgradesAvailable[] is an array of information to be passed. This works fine i believe and it creates the objects fine and puts them on screen,etc. What i want to do is have this upgradeItem added to a Group (say MenuGroup), so I would have thought something like the following would have worked: GAME_NAME.upgradeMenu.add(upgradeItem); But it doesn't seem to like it. My UpgradeItem code consists of some things, for example: var UpgradeItem = function(game, x, y, upgradeItemName, upgradeDescription, upgradePrice, price, speed, cSpeed, bNumber){ this._name = upgradeItemName; this._description = upgradeDescription; this._upgradePrice = upgradePrice; this._pMultiplier = price | 1; this._sMultiplier = speed | 1; this._cMultiplier = cSpeed | 1; this._active = false; this._backgroundNumber = bNumber | 1; this._upgradeItemGroup = game.add.group(); GAME_NAME.upgradeMenu.add(this._upgradeItemGroup); switch(bNumber){ case 0: this._background = game.add.image(x+10, y+36, 'uBackground1'); break; case 1: this._background = game.add.image(x+10, y+36, 'uBackground2'); break; default : this._background = game.add.image(x+10, y+36, 'uBackground1'); break; } this._background.inputEnabled = true; this._background.input.useHandCursor = true; this._background.anchor.setTo(0); this._upgradeItemGroup.add(this._background); this.UpgradeItemName = game.add.bitmapText(x+30, y+48, 'Lobster',this._name,26,this._upgradeItemGroup); this.UpgradeItemName.anchor.setTo(0); this.UpgradeItemDescription = game.add.bitmapText(x+180, y+48, 'Lobster',this._description,26,this._upgradeItemGroup); this.UpgradeItemDescription.anchor.setTo(0); } You can also see from my code here that i'm trying to group the 'assets' (the text and sprites) into a seperate group. Am I missing something really simple here? Thanks for looking