Search the Community

Showing results for tags 'frame'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


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

  1. Hello, is there a way to advance a VideoTexture by just 1 frame per RenderLoop? As I understand it now it is time based. This creates the problem that if the frames need to be captured to create an animated sequence, the video keeps advancing in between 2 captured frames.
  2. Frame Fit Error Override.

    Hi, I'd like to know if there could be any unwanted consequences or behavior if I comment out the error thrown when a frame doesn't fit in the base texture: The thing is that I'm getting the error between the 8th or 10th decimal, something like this: 20.3333333333 + 20.6666666668 > 41 A brief description of what I'm doing is working with responsive images that are sliced by a specific amount of horizontal slices (depending on the screen height), each slice is an integer. Since the images are scaled before slicing the real size has to be corrected by that scale which leads to this numbers with all those decimal positions. Would be even noticeable if the error is commented out?. Could be possible for PIXI to throw an error after creating the slices in another situation?. The slices are moved by the user with touch events and the problem always appears in the final slice and for some specific image sizes and screen resolutions. Unfortunately I don't have any control over the image size. I don't know how many decimals PIXI actually needs in order to work properly, but this is math versus rendering. The math indicates that the number is bigger, no questions there, but with rendering in mind, will the 8th or 10th decimal of a pixel does even get rendered?. does it make a difference?, is it noticeable even in retina screens?.
  3. Hi, Im having an issue with tweens. Its a bit difficult to explain, so please bare with me.. this.tween ={ y: y+100 }, 100); It is a quick tween over a relatively large distance that is repeated many times. If the itemToTween is moved by say 15 pixels per frame (for example), the last frame is moved only 10 pixels to exactly end at position y+100. This 10 pixel move in the last frame as apposed to the normal 15 pixels per frame is causing hiccups/staggering on the tween repeat and other running tweens on other items are becoming out of sync position wise. The only solution I could think of was maybe doubling the distance and time of the tween and then manually checking on the tween update if the position is greater than y+100. In that case stop the tween and trigger the new tween and subtract the distance the original tween shot over y+100. This seems like such a hack though... Does anyone have a suggestion on a cleaner solution? Thanks.
  4. Hello I have a problem. I want my player when he is in front of a bottle and when he interract with it (up arrow key) the frame of the bottle change. The problem is I use an overlap between player and bottle I use : if (cursors.up.isDown) { bouteille.frame = bouteille.frame +1; } but when in game I press the up key it change all frame in one ms. How can I set a timer or something to say I pressed one time I need to release key and do it only after repressed Thanks
  5. For the life of me, I can't find a setting which adjusts camera movements with current frame rate (automatically adjusting speed, inertia, turn rate). Camera which either warps or bogs down depending on where you look at is simply unacceptable in any application, let alone games. Maybe it's too obvious but in any case I need some help here.
  6. 1) Is there a way to create animation ranges via blender? e.g. define there that between 50-100 is a "win" animation, instead of defining it in bjs as follows: skeleton.createAnimationRange("win", 50, 100); Maybe by exporting markers? 2) Is there a way to get the total frames of a skeleton in bjs?
  7. Speed and Frame Rate

    I am trying to fix the speed and framerate for Link if someone have any idea for doing computations, speed = function(framerate) for example Here is the code : var game; var map; var layer, layer1, layer2; var player; var cursors; game = new Phaser.Game(800, 600, Phaser.CANVAS, 'Zelda Mysteries of PhaserIO', { preload: preload, create: create, update: update, render: render }); function preload() { game.load.tilemap('zelda', '', null, Phaser.Tilemap.TILED_JSON); game.load.image('tiles', ''); game.load.spritesheet('link', '', 24, 32, 55); } function create() { //World map = game.add.tilemap('zelda'); map.addTilesetImage('light_world.tiles', 'tiles'); currentTile = map.getTile(2, 3); layer = map.createLayer('Calque de Tile 1'); layer = map.createLayer('Calque 2'); //Player player = game.add.sprite(50, 150, 'link'); player.scale.set(2); player.smoothed = false; player.animations.add('right', [0, 1, 2, 3, 4, 5, 6, 7], 20, false); player.animations.add('up', [12, 13, 14, 15, 16, 17, 18], 8, false); player.animations.add('left', [33, 34, 35, 36, 37, 38, 39, 40], 8, false); player.animations.add('down', [44, 45, 46, 47, 48, 49, 50, 51], 8, false); game.physics.enable(player, Phaser.Physics.ARCADE);; cursors = game.input.keyboard.createCursorKeys(); } function update() { player.body.velocity.x = 0; player.body.velocity.y = 0; var speed = 200; if (cursors.right.isDown) { += 4; player.body.velocity.x = +speed;'right'); } else if (cursors.up.isDown) { -= 4; player.body.velocity.y = -speed;'up'); } else if (cursors.left.isDown) { -= 4; player.body.velocity.x = -speed;'left'); } else if (cursors.down.isDown) { += 4; player.body.velocity.y = +speed;'down'); } else { player.animations.stop(); } } function render() { game.debug.spriteInfo(player, 20, 32); }
  8. 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(){'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 =; var self = this; count = 0; btnArray.forEach(function (element){ btn = self.btns.create(element.x, element.y,'btnSht'); btn.idNum =; btn.frame = element.frm; btn.inputEnabled = true;, 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
  9. game.load.atlas('mv', 'phaser/v1.png', "phaser/v1.json",Phaser.Loader.TEXTURE_ATLAS_JSON_ARRAY);game.load.atlas('mv', 'phaser/v2.png', "phaser/v2.json",Phaser.Loader.TEXTURE_ATLAS_JSON_ARRAY);how to get all frames from diff pics, combine into one ,so that play frames continuously Thanks
  10. Animations, I need some help.

    So, first of all, I am new to Phaser, but I work as a programmer. I have some knowledge about how 3D modelling tools work , even for animation. I am wondering if someone can give me more info about this. What i've got: a bunch of static images ( no spritesheets, no texture maps, only static images) My question is: Is there any way to program like keyframes (like blender3d) in order to specify position, scale and rotation to the elements i want on the screen , also layering and something like opacity? Is there any way people have done this with particle effects? How would you proceed about this? I am open minded and ready to try anything, I need to deliver this ( the game is almost done , all it misses is 2 animations at the end, I didn't build the game, my coworker did, but he has quit the company to have more time for univeristy)
  11. Hi all, I have this problem. I have to create a background animation using about 40 jpg. (backgroun1,jpg.....background40.jpg). Each background image is large like a stage, so about 840 px. I tried drawing on BitmapData but the size grows too much. What is the correct way to create a standard animation adding each single frame after loading all images (back1...back40.jpg)? for (var i=0; i< LOOP_FRAME_COUNT; i++){ game.load.image(, path + "loop/" +;} Thanks in advance.
  12. Hi Guys! Well thats the problem i have to solve, because I need to continue my animation loop from a specific frame (the last frame when i stop animation from an onDown event ) i can get my animation last frame, but dont receive that parameter to start the loop from that frame. So what i can do? I've been thinking change the order of frames, ordering a new array, beginning with that specific frame then update the frames array then play animation.....but i dont know just an idea I just had. sorry for my English, google translator at its best. Cheers!
  13. fps is not regularly working in chrome. I expected fps should be 60 but seconds later fps drops from 60 to 40 then it works normally, again and again but fps works normally in firefox.
  14. How would you go about ensuring that an animation continues to play from from the frame that it stops on instead of from the first frame? It is a rotating type thing: sprite.animations.add('clockwise', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15], 7, true, true);sprite.animations.add('anticlockwise', [15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0], 7, true, true); and the arrow keys control rotation: if (cursors.left.isDown){'clockwise'); } else if (cursors.right.isDown){'anticlockwise'); } else{ sprite.animations.stop(); } But I can't figure out how to have the animations not reseting each time an arrow key is pressed. Thanks
  15. texture setframe issue

    i have character classes which refer PIXI.texture. i wanted to each character classes have texture instance. but when i create texture PIXI.js refer texturecache. so when i use texture.setframe, other character classes's frame changed. can anyone give me an advice?
  16. Hi, I'm momentarily experiencing really strange behavior of the function window.addEventListener('keydown', onKeyDown, false);now, first I had this integrated into my index.html by just writing: <script>window.addEventListener('resize', onResize, false);window.addEventListener('keydown', onKeyDown, false);</script>after the referencing of my "main.js" in which the functions 'onResize' and 'onKeyDown' are described. Now this works perfectly fine if you visit the original ■URL■ which is hosted on a free web-storage host called "" but it won't work if you visit the forwarded ■URL■ that I pay for. The forwarding is done by a Frame-Redirect, and so the page uses a frameset to display the content. Could this cause the problem and is there a way to fix it? Thanks in advance. ~Dinkelborg
  17. Take the following code: preload: function() { this.load.tilemap(this.level_key, 'assets/levels/test_01.json', null, Phaser.Tilemap.TILED_JSON); this.load.atlasJSONHash(this.atlas_key, 'assets/images/tiles.png', 'assets/images/tiles.json'); }, // [...] // These called from `create`: createMap: function() { // Add tilemap =; // Attach tiles this.tileset =, this.atlas_key); // Create layers // [...] this.charactersLayer ='Characters'); }, createPlayer: function() { // Find player tile var player_frame =, this.texture_packer_keys.player); var player_index = player_frame.index + 1; // atlas 0-based, but tilemap tileset is 1-based var player_tile =, 0, false, 'Characters'); // Create and center player sprite this.player =, player_tile.worldY, this.atlas_key, this.texture_packer_keys.player); // Remove placeholder tile, player_tile.y, 'Characters'); // [...] },Is there a simpler (built-in) way of retrieving a tile from a tilemap using its atlas frame name?I've scoured the `` Tilemap object, and can't find any reference to the original atlas names, since it seems that `` just carries over indexes? Additional question: would I avoid this issue by using an Object layer for my player placeholder?
  18. get certain animation frame?

    var loop;var playingGroup;function preload() { game.load.spritesheet('rpsLeft','assets/rps-left.png',92,86);}function dynamicSprite(x,key) { loop = game.add.sprite(x, 35,key); loop.animations.add('play',[0, 1, 2]);'play',20,true); loop.smoothed = false; playingGroup.create(loop);}btn = game.add.button( - 70, + 105,'rockSprite',this.btnRock,this,1,0,2,0);btn.input.useHandCursor = true;function btnRock() {//here..}How can i get the certain spritesheet frame when I click the buttonRock?
  19. How can I handle it in Babylon? As I understood, all the matrices are calculated within Scene.render call, right? So how can I only update the game state (i.e. meshes positions, rotations etc.), without rendering it? Currently I need to go over each mesh in scene and apply computeWolrdMatrix(true). Is there any way to do that in one time?
  20. If I have a spritesheet, i could extract the animations with Phaser.Loader spritesheet(key, url, frameWidth, frameHeight, frameMax, margin, spacing)I have a spritesheet inside a texture atlas. So whole spritesheet is considered a single frame. So far, i had to manually edit the json file to extract each animation frame. If i have this spritesheet frame: "player": { x: 0, y: 0, w: 100, h: 10 } and if frameWidth is 10, i end up doing this manually: "player1": { x: 0, y: 0, w: 10, h:10 }, "player2": { x: 10, y: 0, w: 10, h:10}, ... I want to keep the spritesheet inside the texture atlas, and extract the animation frames automatically. Is there an easy way to do this?
  21. Ok so like 12 koopas on screen each is the same image but a different frame. I do koopa001.texture = new PIXI.Texture.fromImage('koopa.png');koopa001.texture.setFrame(new PIXI.Rectangle(0,0,32,32));then i do koopa002.texture = new PIXI.Texture.fromImage('koopa.png');koopa002.texture.setFrame(new PIXI.Rectangle(32,0,32,32));the problem is that koopa001.texture === koopa002.texture and when i set koopa002.texture's frame it changes koopa001.texture's frame I need 2 seperate textures from the same image.....
  22. I have a jump animation and a midair movement animation. The jump animation is 5 frames long, and I want it to play all the way through when the player jumps from a grounded state. However if the user jumps starting from the ground, then starts to move left or right, it plays the midair movement animation. Now, when the user stops moving, I want to transition back to jumping, but starting at frame 4 or 5 of the jumping animation.;sprite.animations.frameName = frameId;I've also tried using animations.frame = number, but no luck with that either. I just need to know if there's a play, but skip to frame method that I'm not seeing.
  23. So I have a number of texture atlases that describe different textures for what are basically the same object (they are basically textures that describe walls, each texture atlas describes a number of orientations/views for a particular material i.e. a wall texture atlas, a wood texture atlas, a decoration texture atlas etc etc). Each frame within the atlas represents an orientation/view (side-on, front-on etc etc) so they have the same frame names. Infact, apart from `meta.image` the atlases files are the same. To load these in I naturally want to async them to get them loading as fast as possible. To add some complexity to this inquiry I've wrapped `PIXI.JsonLoader` into a promise, but the theory would be the same using callbacks. The issue is that by the time the `loaded` event callback is fired for the quickest response you've already initiated several other requests. These additional requests will nuke the `frameID`s within `PIXI.TextureCache` which is used by both `PIXI.Texture.fromFrame` and `PIXI.Sprites.fromFrame`. So, in my case, if I attempt to load stone, wood and metal textures (in that order) and create textures for each frame during the 'loaded' callback then all textures will be metal textures because `PIXI.TextureCache( frameID )' will return a frame that is linked to the filename of the metal textures. The answer is to either rename frameID at my end (not a big ask really, just inconvenient and error prone if you allow users of your game to produce resource or texture packs) or queue requests so that all textures are created before processing the next atlas. The first option here is annoying whereas the 2nd is inefficient. To my mind the TextureCache should be smarter to associate frameID's with filenames to try and better namespace the cache. I guess my only question here is: is there another way of loading multiple texture atlases that I missing? or I can pursue the the route of 'fixing' texture cache namespacing and submitting a PR
  24. My fps get over 60 (about 1k in a few seconds). What's wrong? It happens when window isn't active or if I open and close console all the time. What's wrong? I'm so confused… Is there vsync now that I need to turn on or something?
  25. I'm new to using Phaser, and I'm really excited to dig deeper into it. I followed the simple platformer tutorial and looked through the examples. I then began work on adding new sprites and spritesheets to the game, and I'm running into issues. 1. I'm using Shoebox to generate spritesheets exactly like the one found in the multiple anims/seacreatures example. In Shoebox, I use the pivot point tool to set the centroid of each sprite. This adds padding to the input png sprites, but when I generate the spritesheet, the padding is cropped, and instead there are the frameX, frameY, frameWidth, and frameHeight parameters in the spritesheet's XML. Ideally, I would just be able to set my anchor to (.5,.5) and the sprite would use the pivot correctly. However, it seems that pivot only respects width and height, not frameWidth and frameHeight. How can I utilize frameWidth and frameHeight in phaser, esp. in relation to setting the sprites anchor? 2. Is pingpong animation looping supported by Phaser yet? The only mention I have found of it was from back in September. This would be a really good feature to have access to. 3. Is there a "Snap to nearest pixel" option for sprites and animations?