Search the Community
Showing results for tags 'frame'.
-
I try as best I can to find how I can get the group framequantity but it's been 3 days and I still haven't made it so pls help me! :)
-
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 : https://phaser.io/examples/v2/time/slow-down-time 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
-
Hello Is it possible to display only part of the rendering of a camera? For example a fixed camera that films a scene by far and we just re-frame a small part and move the frame. Thank you
-
Hello developers, I just start using phaser 3, and I bump into a question with the animation. Here is my code. var characterAnimConfig = { key: 'key-name', frames: scene.anims.generateFrameNumbers('spritenamehere', { start: 0, end: 7 }), repeat: -1, frameRate: 10, }; this means the animation will keep repeating from the first(frame 0) to the end(frame 7), my question is is there a way to let the animation only repeat the last two frame? expected frame goes like this: (0,1,2,3,4,5,6,7,6,7,6,7,6,7...). Thanks.
-
Hi I get the following error message with Phaser 3.1.2 when trying to run the project from this tutorial: http://phaser.io/tutorials/making-your-first-phaser-3-game
-
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!
-
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.
-
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.
-
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: https://github.com/pixijs/pixi.js/blob/dev/src/core/textures/Texture.js#L567 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?.
-
Hi, Im having an issue with tweens. Its a bit difficult to explain, so please bare with me.. this.tween = this.game.add.tween(this.itemToTween).to({ 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.
-
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
-
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.
-
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 this.map = this.game.add.tilemap(this.level_key); // Attach tiles this.tileset = this.map.addTilesetImage(this.tiled_tileset_key, this.atlas_key); // Create layers // [...] this.charactersLayer = this.map.createLayer('Characters'); }, createPlayer: function() { // Find player tile var player_frame = this.game.cache.getFrameByName(this.atlas_key, this.texture_packer_keys.player); var player_index = player_frame.index + 1; // atlas 0-based, but tilemap tileset is 1-based var player_tile = this.map.searchTileIndex(player_index, 0, false, 'Characters'); // Create and center player sprite this.player = this.game.add.sprite(player_tile.worldX, player_tile.worldY, this.atlas_key, this.texture_packer_keys.player); // Remove placeholder tile this.map.removeTile(player_tile.x, 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 `this.map` Tilemap object, and can't find any reference to the original atlas names, since it seems that `this.map.addTilesetImage(...)` just carries over indexes? Additional question: would I avoid this issue by using an Object layer for my player placeholder?
-
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? https://www.blender.org/manual/animation/markers.html 2) Is there a way to get the total frames of a skeleton in bjs?
-
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 : http://codepen.io/featuresmega/pen/ALKLEj 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', 'http://crossorigin.me/http://asciimulation.link/assets/tiles/zelda.json', null, Phaser.Tilemap.TILED_JSON); game.load.image('tiles', 'http://crossorigin.me/http://asciimulation.link/assets/tiles/light_world.tiles.png'); game.load.spritesheet('link', 'http://crossorigin.me/http://asciimulation.link/assets/sprites/walking.tunic.png', 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); game.camera.follow(player); cursors = game.input.keyboard.createCursorKeys(); } function update() { player.body.velocity.x = 0; player.body.velocity.y = 0; var speed = 200; if (cursors.right.isDown) { game.camera.x += 4; player.body.velocity.x = +speed; player.animations.play('right'); } else if (cursors.up.isDown) { game.camera.y -= 4; player.body.velocity.y = -speed; player.animations.play('up'); } else if (cursors.left.isDown) { game.camera.x -= 4; player.body.velocity.x = -speed; player.animations.play('left'); } else if (cursors.down.isDown) { game.camera.y += 4; player.body.velocity.y = +speed; player.animations.play('down'); } else { player.animations.stop(); } } function render() { game.debug.spriteInfo(player, 20, 32); }
-
If I do this: function paddleUpdate() { if(isPaddleNerfed) { paddle.frameName = "paddle_small.png"; //48px width } else { paddle.frameName = "paddle_big.png"; //32px width } //Do I have to set the size manually like this paddle.body.setSize(paddle._cache.width, paddle._cache.height); } I ask because with: game.debug.renderSpriteBounds(paddle); I see the pink border and it's changing size (but only visually): collisions and also sprite.body.width still returns the old bigger size rather than the smaller/nerfed one... Also visually it's all ok... and also sprite._cache.width returns correct values. Is my aproach right or is there a better, shorter way ... i clearly understand that it can't and shouldn't be automatic because changing sprite/frames should change the collision body region... but maybe it can be added as option ... or maybe shouldn't I'll be glad to here more opinions about this. EDIT: I just saw that there is: game.debug.renderSpriteBody(paddle); so the only question that leave is this the proper way of doing it since the sprite.body isn't updating on sprite size/frame change
-
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(){ this.game.load.spritesheet('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 = this.game.add.group(); var self = this; count = 0; btnArray.forEach(function (element){ btn = self.btns.create(element.x, element.y,'btnSht'); btn.idNum = element.id; btn.frame = element.frm; btn.inputEnabled = true; btn.events.onInputDown.add(self.btnFunc, 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
-
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)
-
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
-
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(this.game.loopFrameNames, path + "loop/" + this.game.loopFrameNames);} Thanks in advance.
-
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 animation.play 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! -
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){ sprite.animations.play('clockwise'); } else if (cursors.right.isDown){ sprite.animations.play('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
-
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?
-
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 "bplaced.net" 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
