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

Found 33 results

  1. Changing frames in Phaser

    Hi guys, I have this code in create() lootCrates = this.physics.add.staticGroup(); lootCrates.create(600, 362, 'crate', frame = 1); this.physics.add.overlap(player, lootCrates, brokenCrate, null, this); I then have this function for when the player touches the crate: function brokenCrate(player, crate) { crate.frame = 0; } I simply want to change the frame to the crate being broken.... However, I get this error: "Cannot read property 'source' of undefined" But earlier I did the exact same thing for a speedPotion where I did speedPotion.disableBody(true, true) and that worked perfectly. Why is changing frame giving me an error? Thanks!
  2. BUG:animationFrame is undefined

    Hi I get the following error message with Phaser 3.1.2 when trying to run the project from this tutorial:
  3. Firefox Slow FPS

    Hello, Since some day, firefox turn phaser game slow. All game i have created and even litle game downgrade fps. (60FPS to 30FPS) I dont know where is the problem. i have try use phaser but no change. You can try with this example : if you wait some seconds the animation down to 30fps. this problem is only on firefox (i suppose since v57). All others browsers working fine. Have you an idea where is the problem? Thank you
  4. I have a spritesheet of 7 equal size sprites (50x50). When I try to call a specific frame ('6') to assign it to a variable, i get half of sprite 5 and half of sprite 6 showing. I'm using Texturepacker Pro with, I think, the correct settings, so why am I getting half of the frame instead of the full frame? figured it out: i had to add some boundary around the sprite in the original load line.
  5. 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.
  6. 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?.
  7. 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.
  8. 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
  9. 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.
  10. 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?
  11. 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); }
  12. 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
  13. 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
  14. 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)
  15. 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.
  16. 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!
  17. 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.
  18. 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
  19. 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?
  20. 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
  21. 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?
  22. 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?
  23. 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?
  24. 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?
  25. 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.....