Search the Community

Showing results for tags 'sprite'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 623 results

  1. 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
  2. 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...
  3. 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.
  4. Procedural Game Art Generator

    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
  5. 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?
  6. 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
  7. 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 }
  8. 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
  9. 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
  10. 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.
  11. 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. 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.
  13. pendingDestroy doesn't work on killed objects

    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).
  14. 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!
  15. 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.
  16. 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.
  17. 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>
  18. 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?
  19. I am fairly new to phaser. I am currently working on a card game using phaser and I am trying to work out how to best position sprites in zones around the board. My tests this far have revolved around hardcoding positions on the screen and that has been a math-tastic nightmare. I am building two decks of cards on either side of the screen. Then I am dropping several other cards onto the board in a row. The two decks of cards when clicked will be added to two seperate zones (one hand and one play). So, my thought process is as follows: Load all sprites Assign sprites by starting position into starting groups when a card is clicked add that card to the appropriate group use the group to determine the position within the bounds of the group (checking for overlap, etc). Does this seem like an appropriate way of handling it? If not, what would you suggest?
  20. Sprite jitters if camera moves with it

    Hello! I'm developing a simple 2D platformer with low res pixel art (canvas of size 144x81 pixels), and I noticed that when I move the sprite horizontally but enough to make the camera follow it, there's some jittering ocurring with the sprite. Here's the link (just pass the "main screen" clicking on START): https://danielklava.github.io/1-minute-left/ Could a kind soul give some assistance? I pay with internets. Thanks a lot!
  21. Hello, 1. I created a group groupA in the game. 2. I created a sprite spriteA and added it to groupA. 3. After that I kill() spriteA and keep its reference in a pool array for later use. 4. I destroy() groupA. 5. I get the spriteA from the pool array to be used in another group and try to change its texture with loadTexture(), I get error: phaser2.8.8.js:46794 Uncaught TypeError: Cannot read property 'cache' of null at Phaser.Sprite.loadTexture (phaser2.8.8.js:46794) That doesn't happen if I don't destroy the group in step 4. Could anyone please explain what is going on and what is the right way to reuse Sprites even when their container parents are destroyed?
  22. Stretch the center of a sprite

    Hi guys I am creating interface elements using sprite images. Not sure if this is best practice, open to suggestion. For example; at the moment a have large image for an input field which is fine and it works. ------------------------------------ | | ------------------------------------ However now i need nearly the exact same sprite just half the width for a small input field. -------------------- | | -------------------- So the middle of the sprite is actually the same but the corners can't be stretched as I would like to maintain the same corner radius I don't really want to create a seperate sprite for each of the corners unless you think that is best. So what I really want is to be able to create a very small sprite. --- | | --- And stretch the center pixel horizontally. However as I have said this may be far away from what is the best way to achieve this, so let me know! Thanks!
  23. Hey guys, Is it possible to drag-drop sprites? The scene.pickSprite doesn't return a pickedPoint.
  24. I'm trying to make a menu like option to where the user can drag a sprite on screen and make a clone out of it leaving the other sprite on it's original location. This is what I have up untill now. var box = game.add.sprite(100, 200, 'box', 0); box.anchor.set(0); box.inputEnabled = true; box.events.onInputDown.add(clone, this, 0, box); function clone(obj){ var clone = game.add.sprite(obj.x, obj.y, obj.key, obj.frame); clone.inputEnabled = true; clone.input.enableDrag(true); } Only down side is I have to click twice on the sprite in order for there to be a copy of it which kind of takes away the whole purpose of a copy on drag function. Any help would be greatly appreciated. (I'm quite new to Phaser and js so I'm sorry for any obvious mistakes beforehand) Thanks in advance!
  25. Pixijs free sprites atlas packer

    Hello everyone! I've been release my own atlas packer for pixijs. It's fast and easy to use command line tool. You can try it and send me your beedback. Main features: - scaling for multiple dimenstions - alpha trimming - multisheet textures if not all sprites could be allocated into a single texture - png, jpg - texture format - texture size limit - sprites border to avoid render artefacts Platforms: MacOS, Windows Download from: https://github.com/Gaikov/GameTools/tree/master/SpritePackerConsole