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

  1. I want to add custom property to my sprite object but when I try to get id property it returns "undefined". Is there a Phaser library bug or am I doing something wrong? My update function; function update() { //When I debug below line I can see enemyTank.tank.id property game.physics.arcade.overlap(enemyTank.tank, mytank.tank, enemyTankHitPlayer, null, this); } Callback function; function enemyTankHitPlayer(myTankSprite, enemyTankSprite) { //enemyTankSprite.id is undefined! }
  2. I am using the last official release 2.6.2. Given the following code, which can be found on the following jsbin: http://jsbin.com/lazefep/1/edit?js,output var MainState={ create: function(){ var circleGraphic = new Phaser.Graphics(); circleGraphic.beginFill(0xFFBBBB); circleGraphic.drawCircle(0, 0, 100); circleGraphic.endFill(); circleSprite = this.game.add.sprite(0, 0, circleGraphic.generateTexture()); //circleSprite.anchor.setTo(0.5); // (Try barSprite anchor below first.) Ugh, this doesn't fix it... var barGraphic = new Phaser.Graphics(); barGraphic.beginFill(0x88FF88); barGraphic.lineTo(250, 0); barGraphic.lineTo(250, 10); barGraphic.lineTo(0, 10); barGraphic.lineTo(0, 0); barGraphic.endFill(); var barSprite = this.game.add.sprite(this.game.world.width/2, this.game.world.height/2, barGraphic.generateTexture()); barSprite.addChild(circleSprite); //barSprite.anchor.setTo(0.5); // Why doesn't the child adjust to the anchor with the parent? } }; var game = new Phaser.Game(640, 480, Phaser.CANVAS, 'phaser-example', MainState); As long as the two lines remain commented out, what is rendered makes perfect sense: 1. A circleSprite is created and registered to position 0,0 of the parent sprite that it is later attached to. 2. A barSprite is created and its top left is added to the center of the world. 3. The circleSprite is added as a child to barSprite, and consequently, the top left of that child sprite is found at 0,0 of the parent sprite. As a result, you can see a sort of sideways "b" graphically depicted. Now, my (reasonable?) assumption is that the parent barSprite can be treated like any ordinary sprite as a composite whole. Anything I do to the parent sprite should automatically cause cascaded adjustments to the children so that the parent sprite would behave as it would if it were just an individual sprite on its own without any children behavior artifacts. However, if you notice, uncomment the line that sets the barSprite anchor, and the child does not follow. The child remains in place as if the anchor to the parent is not applied. To make matters worse, I have no easy recourse. I cannot recover the intended sideways "b" by uncommenting the circleSprite anchor. Is this a bug with anchor? Or is this intended behavior for some reason? What are my best options? (I am also curious if this behavior will exist in v3.) Also, please make me aware if you happen to see a violation of good/best practices!
  3. evan312

    attach sprite to sprite

    What is the best way to attach a sprite to another sprite at a specific point using phaser? i.e. attaching a weapon sprite to the hand of a player sprite. thanks!
  4. Is there a way to create sprite from multiple files ? Like creating a sprite : Knight in 'knight.js' and creating his movement in 'movement.js' is this possible : // knight.js import Phaser from 'phaser' import Movement from './movement' export default class extends Phaser.Sprite { constructor ({ game, x, y, asset }) { super(game, x, y, asset) } movement(){ // Here Ill call Movement } } // movement.js import Phaser from 'phaser' export default class extends Phaser.Sprite { // Here ill make a function that will move the sprite // and start the animation }
  5. 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
  6. Hi, my sprite is pointing to the top. But the angle = 0 means the it points to the right. So if i start moving, e.g. with velocityFromAngle the movement direction is default to the right, while the sprite is facing to the top. If i try to turn the sprit 90 degrees to the right, the angle for the movement also changes (the movement direction is then down). so the movement direction and the pointing direction of my sprite are never the same. one way would be to change the sprite image. but i want to be flexible to move it in all 4 directions (90 degrees steps), depending on its random start postion. this has to be possible somehow. please help me in other words now: sprite is ^ and movement direction is > if i change the angle then sprite is > but movement direction is v what i want is the this: Sprite > and movement direction > or Sprite ^ and movement direction ^ or Sprite < and movement direction < or Sprite v and movement direction v best regards Oliver
  7. Hello All, I posted about this a while back and it's now finished and released! CryPixels Procedural Pixel Art Generator Has a demo version available on Windows and Mac. The software is 100% written in HTML5/JavaScript and packaged using nw.js. Full details of the software can be found here: https://crysoftware.itch.io/crypixels Feel free to request additional features, product is in active development. Regards, TomC.
  8. In Babylon.js Is there a way to render animated sprites with an additive (one one) blend mode? Either that or can I use an animated sprite as a particle that uses the particle's one one blend mode? Thanks, -=T=-
  9. Giulio

    DOM to Sprite

    Hi, the following website has a cool click interaction, made, I think, with some GL shader. http://www.anagram.paris/ This website uses React in order to render the DOM structure, but at the end the only thing I see is the canvas element. Also, everything seems to still have the DOM events (hover and clicks). With Pixi, i suppose I should take the DOM of my App, apply it to a Sprite (as Texture) and then set a Filter. Is there any tutorial or at least a suggestion about this? Thank you
  10. In the constructor of SpriteManager, we can specify the size of its sprites. Let's say if I set it to 64, I will have 64 pixel x 64 pixel square sprites. But what is its exact size in 3D world space? If the position is (0, 0, 0), how do we calculate its exact 3D scale? Or is the cellSize only used for cropping the Image? I am a little bit confused...
  11. ugajin

    gemmatch example

    I have been looking at this: http://phaser.io/examples/v2/games/gemmatch example. The columns and rows are positioned starting at the game origin, which can cause the sprites to appear off centre, when looked at relative to the canvas/game border. I have aded a couple of lines of code which [visually] centres the 'gems'. The code lets you adjust the GEM_SPACING and/or canvas/game dimension values, and updates the 'gems' [group] [*correction, each 'gem'] anchor value accordingly. However, what I can't seem to do, is to create a margin between the canvas edges and the 'gem' [group], without breaking the code. All suggestions, welcome. Thanks.... -u Correction above in bold. I don't know why this text has strikethrough applied, or why some of the above text does too!
  12. ClemensC

    Tracing a rotating point

    Hi I'm still pretty new to phaser, and I've looked through the docs and a few examples, but still haven't found a solution to my problem. So, i have a sprite that is rotating around a set anchor, and I want to get the x and y coordinates of a specific point on this sprite. I could just do it with trigonometry and whatever, but I'm thinking that there has to be an easier way using phaser. Thanks in advance.
  13. swansong

    Collisions with sprites

    I am making a game where I need to know if a sphere has collided with an enemy. The problem I have is that the enemies are sprites. Is there a way to check collisions with sprites?
  14. Hi, I want to visualize the "projectiles" of a flamethrower using a group of sprites. They are moved by body physics of type arcade. Now I'd like to scale the single projectiles up, depending on their position on the x axis or alternatively on their livetime. How would you achieve this without draining the cpu too much? Would you use forEachAlive or some sort of callback? Might it be easier to implement using particles and can I check for collision with particles? What I have so far: execute() { let sprite = this.spriteGroup.getFirstExists(false); if (sprite) { sprite.reset(this._enemy.attackSpawnX, this._enemy.attackSpawnY); sprite.body.velocity.x = -200; setTimeout(this.execute.bind(this), 100); } } I use setTimeout in order to spawn the projectiles asynchonous until the group is empty. greetings
  15. My sprites are often passing through polygons that they should be bouncing off of. I've tried to research this and all I could find is that the fps may be too low to always detect the collision but surely the game engine should be able to handle this? Interestingly, if I use setCircle() my colliding sprites never pass through even with much higher velocity. Why would a polygon I define behave differently than setCircle() ? Here is a demonstration: //phaser.io/sandbox/xeGQxHis
  16. I'm trying to add some collectable coins : for(var i=0; i < coins.length; i++){ game.physics.arcade.overlap(coins[i].getSprite(), myPlayer.getSprite(), collectCoin, null, this); } Problem, in my callback function, I need to access to "coins", not only to his attached sprite, what can I do ? function collectCoin(coin, player){ coin.killCoin(); // play a "death animation" and destroy itself after 0.4s }
  17. So I am preloading an atlasXML spritesheet game.load.atlasXML('sheet', 'images/sheet.png', 'images/sheet.xml'); and I can create a sprite using: game.add.sprite(game.world.centerX, game.world.centerY, 'sheet', 'playerShip1_orange.png'); I am trying not to use a for loop to create many sprites for a a sprite group I'm creating by using Group.createMultiple Now if I'm just loading a sprite or image, I can do this.meteorGrey = game.add.group(); this.meteorGrey.createMultiple(25, 'meteorGreyBig1.png'); Now when it's in a atlas sprite, this is where I'm running into trouble. this.meteorGrey = game.add.group(); this.meteorGrey.createMultiple(25, 'sheet', 'meteorGreyBig1.png'); It ends up displaying nothing
  18. Hi all, I've been banging my head off the desk for days now and can't figure out how to go about accomplishing this. I've gotten to the point of being able to scale or rotate around a random pivot point, but only once, I need to be able to do it multiple times in a row. For example (in the GIF attached); I need to scale the box across the red line as the pivot point, and then scale the box along the blue line as the pivot point and then finally rotate the box around the green dot as the pivot point. I can do each step individually just fine, but the chaining together completely breaks as I can't figure out how to set the pivot point on the already manipulated sprite properly. Does anyone have any ideas on how to accomplish this? I really need to get this working asap and I'm at the end of my rope. Thanks.
  19. Alexver

    Rotating sprite with gyroscope

    Hi guys, I'm making a game which uses browser gyroscope data as player's input. The aim of the game is to align a bar controlled by the player with a bar that continuously rotates. In order to rotate player's bar, the phone must be tilted on its x axis. When holding the phone perfectly vertical (first image) there is no problem. But when the phone has some rotation on its y axis or is pointing downwards (second image), the rotation that I'm interested in is no longer correct. Is there any workaround to make x rotation relative to the position that the back of the phone is pointing to? It is ok to use any library. I've tried gyronorm.js and gyro.js so far, but none of them are giving me the desired results.
  20. I faced the following problem. I have a sprite, which is a part of Phaser.Group. When I kill the sprite using a "kill" method and then mark it with the "pendingDestroy = true;", the sprite is not being destroyed at all. If I understand the idea of using "pendingUpdate" the game engine must destroy the object automatically in "preUpdate" method. I checked that the Phaser.Group calls for the "preUpdate" method of its children even if they are not alive. However, the "preUpdate" method of the Phaser.Sprite class seems to be very tricky. This pendignDestroy is processed only in Phaser.Component.Core.preUpdate, so if one of the functions listen in line 49139 returns false the pendingUpdate won't be processed. Unfortunately, this is exactly what the first method does (Phaser.Component.PhysicsBody.preUpdate). For non existing sprites (i.e. killed sprites) preUpdatePhysics() will always return false. Hence, the pendingDestroy flag won't be processed in Phaser.Component.Core.preUpdate. P.S. I can't use the "destroy" method directly. For example, when I check for collisions between two groups with more than one alive object in each group, destroying objects can cause some errors (still trying to find out the reason of it).
  21. So I have the following code to draw my UI. var ui = { menuBar: null, drawMenuBar: function() { var bar = new Phaser.Graphics(game, 0, 0); bar.beginFill(0xFF0000); bar.drawRect(0, 0, 600, 40); this.menuBar = game.add.sprite((window.innerWidth/2) - (bar.width/2), 0, bar.generateTexture()); this.menuBar.fixedToCamera = true; }, updateMenuBar: function() { this.menuBar.fixedToCamera = false; this.menuBar.x = ((window.innerWidth/2) - (this.menuBar.width/2)); this.menuBar.fixedToCamera = true; }, updateUi: function() { this.updateMenuBar(); } }; As you can see, to move the sprite in updateMenuBar I have to set fixedToCamera to false first, and then back to true. Is there a more elegant way to do this? If I just try to set menuBar.x to something, it wont move. The above code solves my problem, I just thought it would be interesting to see if anyone else has a better solution (as Google has yielded me no satisfying answers) :). Cheers!
  22. Can we do something like Image.drawWarped (link goes to the javadoc of slick2d) with pixi.js? It gave devs the possibility to define where to render the 4 corners of an image with absolute x, y locations and it automatically skewed the image to fit in. I guess it just redefined the points of the triangles used to render the image or something like that. (I'm not that fit with gl, thats why I use pixi.js.^^) Thanks.
  23. So I'm running into this problem where I initialize a sprite with multiple animations, but only the animation specified in the creation of the sprite is ever played. When I attempt to update the sprite with a new animation, it simply changes the framerate. I have debugged the game to see if it is actually updating the currentAnim, and it is. Also, I have tested the other animations too see if they loaded correctly by inputting them into the initializing sprite animation. Now, code: player = this.game.add.sprite(400, 400, 'player_idle'); this.game.physics.p2.enable(player, false); player.body.fixedRotation = true; player.animations.add('player_idle'); player.animations.add('player_left'); player.animations.add('player_right'); controls.left.onDown.add(() => { console.log("Begin left: " + player.animations.currentAnim.name); player.animations.play('player_left', 14, true); console.log("End left: " + player.animations.currentAnim.name); }, this); controls.right.onDown.add(() => { console.log("Begin right: " + player.animations.currentAnim.name); player.animations.play('player_right', 14, true); console.log("End right: " + player.animations.currentAnim.name); }, this); update() { player.body.setZeroVelocity(); controls.up.isDown ? player.body.moveUp(200) : null controls.down.isDown ? player.body.moveDown(200) : null controls.left.isDown ? player.body.moveLeft(200) : null controls.right.isDown ? player.body.moveRight(200) : null if(!controls.left.isDown && !controls.right.isDown && !controls.up.isDown && !controls.down.isDown) { player.animations.play('player_idle', 3, true); } } I am using "phaser-ce@2.8.3". I need some help. Thank you a bunch.
  24. noahduv

    Click event on sprite

    Basically I am making a cookie clicker type game for fun. I am trying to make the counter increase each time the sprite is clicked on but for some reason the click event on the sprite is never fired if i click on the sprite. I can't figure out why the click event isn't firing does anyone know why? Or a better way of doing this? <!doctype html> <html> <head> <meta charset="UTF-8" /> <title>Shook Clicker</title> <script src="https://cdn.jsdelivr.net/npm/phaser-ce@2.9.1/build/phaser.js"></script> </head> <body> <script type="text/javascript"> var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); var clicker; var clicks = 0; var scoreText; function preload() { game.load.image('clicker', 'assets/cookie.png'); } function create() { clicker = game.add.sprite(game.world.centerX, game.world.centerY, 'clicker'); clicker.anchor.set(.5); clicker.scale.setTo(.1,.1); clicker.inputEnable = true; scoreText = game.add.text(16,16, 'Computers Built: 0', {fontSize:'32px', fill: '#555'}); clicker.events.onInputDown.add(listener, this); } function listener() { clicks++; scoreText.text = 'Computers Built: ' + clicks; } function update() { } </script> </body> </html>
  25. Hi Folks, I'm trying to build a Babylon app that will potentially pull in external content, and some of the content would be very easy to present if I were able to put rendered HTML inside of my Babylon scene. Is it possible to render some HTML in Babylon? Possibly as a sprite or a texture on a mesh?