Search the Community

Showing results for tags 'animation'.

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.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 404 results

  1. Hello everyone, I'm currently doing some tests with the DynamicTexture system that could be used to add a new tutorial. The final goal is to have one picture on a plane. When I click on some button I will activate an animation managed by Babylon (if it's possible) so I can fade in and fade out the pictures. I had a first method where I wanted to add a canvas inside the canvas but that didn't work out : Now I have one texture fading in and fading out automatically : To be continued...
  2. Hi all, I got WebPs with Alpha working; however, the WebP is animated (or should be). It isn't playing in Phaser. I'm assuming this isn't supported and I'm SOL; however, I just wanted to check. Does anyone know how to get animated WebPs to play in Phaser?? Please don't suggest using spritesheets -- I'm writing a demo that leverages an API that delivers animated webps, so for this purpose, I need to play animated webps. Thanks!
  3. Hi all, I've been wondering, a mesh like "the dude" seems to be using a single skeleton(so you only have to call beginAnimation Once), but he is made up of several meshes, When i export meshes to babylon, the "main" mesh is exported with the entire skeleton(all bones), and children meshes are each exported with their own version of the skeleton (containing only the bones that mesh use), So i have to call beginAnimation for each mesh/child mesh. If i point the child meshes skeletons to the main mesh's skeleton (mesh.skeleton = mainMesh.skeleton), which also contains the bones the child mesh uses, and then beginAnimation, the child mesh is either spagetti, or just not animated properly, So my question, How is it achieved to use the same skeleton? using 3DS Max 2016, exporter 0.8.0, (also tried an older exporter, same result) Cheers
  4. Hi, I'm building a map using Tiled for my game and I'm wondering what's the best method to implement an animated tileset in my game. For example in the game, I have some static tiles such as ground, but I also have some animated tilesets like waterfalls. Is there a best method for parsing the TMX file and then rendering all the static and animated tiles? Perhaps there's a library I can use that would provide a simple implementation for that? Thanks
  5. I am creating animation frames from image the hard way -I am using PIXI.Texture and passing baseTexture and Rectangle (I don't use json directly, because of reusability of json instructions). See code below. I am getting an error: baseTexture.once is not a function. I don't know what is causing this error, but the animation is working as expected. Is this error something I shouldn't worry? function loadAssets() { PIXI.loader .add('first', 'assets/first.png') .load(function (loader, resources){ onLoaded(loader, resources) }); } function onLoaded(loader, resources) { console.log(resources.rot1.texture.baseTexture);// all rotations loaded var first = new PIXI.extras.AnimatedSprite(createFrames(resources["first"].texture.baseTexture)); .... } function createFrames(name) { var frames = []; for (var i = 0; i < 39; i++) { var rect = new PIXI.Rectangle(arr[i].frame.x, arr[i].frame.y, arr[i].frame.w, arr[i].frame.h); // stored in an array generated from json frames.push(new PIXI.Texture(name, rect)); } return frames; }
  6. Looking at the signature for, frameRate, loop, killOnComplete), there doesn't appear to be a way to run a callback when an animation completes. Is there some other way to do this? If not, would it make sense to change this function to accept a callback (which could be sprite.kill)? edit: slightly unrelated, but there also doesn't appear to be a way to check if a sprite is animating except to check if it's currentFrame.index === original frame. Is that the right way to check it?
  7. Hello! I am working on importing an animation from There the animations are simply a set of frames which are switched in order. So, if I want to create an animation with 3 meshes I should do: 1. Show 1st mesh for 1/3 of a second 2. Show 2nd mesh for 1/3 of a second 3. Show 3rd mesh for 1/3 of a second 4. Show 1st mesh again. Logically that is fine but how can I do this properly? From each mesh I have the following information: vertexData.positions = positions; vertexData.indices = indices; vertexData.normals = normals; vertexData.colors = colorlist; Is it possible to create an animation by just setting the different indices/positions/normals/colors for each frame? It would be sweet if after `vertexData.applyToMesh(myMesh, true)` and `myMesh.bakeCurrentTransformIntoVertices()` I could also be able to start the animation with `scene.beginAnimation(myMesh, 0, 3, true, 1)`. Thanks! EDIT: To add more information: the amount of vertices, their positions and their uv's can drastically change from a frame to another, so the system should handle ANY mesh sequence and not the same vertices but in different positions.
  8. Hi! I'm currently implementing some actions via the ActionManager class in my project. I want to control a sprite with the keypad, and so I'm mixing the actual sprite animation (player.playAnimation) with a position animation where the sprite is moving a certain distance (custom animation with easing via scene.beginAnimation). Problem is, I'd like to have successive inputs blocked until the movement animation has finished so that the functions don't get called again during that time. Is that somehow possible ? Thanks in advance!
  9. Hello, I would like to animate a morphTarget by setting up an animation. When I try to push the aniamtion to the morphTarget it failed with an error. I thought I would need to animate on it since that's his .influence value that we change to morph the mesh. I did a PG if someone could contribute : What am I missing ?
  10. So I have a character (sprite) that whenever you press a key it'll move it along the y position and once it reaches the top, send it back down to the bottom. So I've been doing this game.input.keyboard.onDownCallback = function() { player.y -= game.height / 4 + 20 if (player.y < 0) { player.alignIn(laneRect_three, Phaser.CENTER); } }; I've been doing this. So basically, every key down move the player up and if it goes beyond the screen send it back down. So I want to add some nice animation to this. So instead of just jumping up, it kind of travels up so I've added a tween, currentPosFish = game.height / 4 + 20; game.add.tween(playerFish).to({ y: currentPosFish }, 1000, Phaser.Easing.Quadratic.InOut, true); But the thing with this is, it just sets it at the y position. How can I set a tween so it increments like what I was doing above?
  11. Hi there, Hi have a sprite moving on the x axis at a given speed. When the user press on the space bar, I want (1) the sprite to stop on y axis, (2) make a move to the right, (3) go back at his initial position, and (4) continue his way on y. I've tried with the following code but the sprite stops while going back to his position and keeps shaking. Is there an easier way to do what I'm trying to achieve? If not, how could I debug this code? Many thanks! PS: my sprite will have to consider collisions. if ({ let position_man =; let speed_man =; = 0; let tween = game.add.tween(;{x:200},100,"Quart.easeOut"); tween.start(); tween.onComplete.addOnce(retour,this); function retour(){ let tween2 = game.add.tween(;{x:100},100,"Quart.easeOut"); tween2.start(); } = speed_man;
  12. I am trying to load a texture atlas into the app when the user clicks on the canvas. 2 things happen on canvas click: 1. the animation already loaded plays, and 2. I fetch a new texture atlas from server. Newly fetched texture atlas plays on the next canvas click, and a new texture atlas is fetched. Think of it as endless loop. On every click, previously loaded animation is played, and the next one is fetched and repeat. It is absolutely essential that there is no freeze between animating. What approach do you recommend I take? My tests showed that there is some issues with dynamically loaded texture atlases - animation freezes, if texture atlas is being loaded at the same time. The issue really shows on mobile devices. I've got a hunch that there might be a problem that both PIXI.loader and object.gotoAndPlay() use the main thread, and they block each other, but I really don't know that much about Pixi. I've posted a similar question earlier today: , but I think I didn't correctly identify the reason for my bad performance. So this question is more in general terms. What is the best way to run texture atlas animation and load another texture atlas at the same time, so that the animation can run without any delay when wanted?
  13. I am running a current animation on click. At the time of click, I start loading the next animation. On next click event, I fire the next animation, and hide current one with the code below. It is essential that the animation fires without delay. $("#canvas").on("click touch touchstart",function(){ if (firstRun){ current.gotoAndPlay(0); //current is an animated sprite loadNext(); console.log("first run"); firstRun=false; }else{ if (canRunNext){ next.visible=true; current.visible=false; next.gotoAndPlay(0); console.log("can run next"); }else{ console.log("cannot run next"); } } }); I noticed, that pixi doesn't prepare invisible object. There is a freeze between next.visible = true and next.gotoAndPlay(); How can I "prepare" the animation, so that it gets loaded and ready to go, immediately after goToAndPlay() is issued, but is invisible before that? this is the loadNext function. I stripped away some other functions that I think don't matter. I will gladly add them if needed. var firstRun = true; var infiniteLoader = PIXI.loader; function loadNext(){ if (firstRun){ infiniteLoader.add('jimages/3.json'); infiniteLoader.load(function(loader, resources) { next = new PIXI.extras.AnimatedSprite(setupFrames("3_")); next.visible=true; next.animationSpeed = 0.5; next.loop= false; next.x = app.renderer.width / 2; next.y = app.renderer.height / 2; next.anchor.set(0.5); app.stage.addChild(next); canRunNext=true; console.log("next loaded"); }); }else{ infiniteLoader.add('jimages/3.json'); infiniteLoader.load(function(loader, resources) { next = new PIXI.extras.AnimatedSprite(setupFrames("3_")); canRunNext=true; console.log("next loaded"); }); } }
  14. Hi is it possible to get animation end callback for looped animations, I need to know how many loops have been done. Thanks
  15. animation

    Hello, I just want to share with you my solution to process some image operation on a sprite with animation. Note that I am working on Typescript so, you maybe have to transpile this code in pure javascript. I created a class that extend Phaser.Sprite. In this class after initializing the sprite : - i create a bitmap, that will not be added to the world, a the size of the spritesheet image and load the spritesheet image in the bitmap - i load this bitmap as a textureAtlas then I load the texture. To change color I modify the bitmap, then reload the terxture as Atlas an reload texture. (it is possible to set a different texture key in order to keep old state) As operating transformation on bitmap may be costly, it may be preferable to pre-run these transformations. class PlayerSprite extends Phaser.Sprite { private frameData: any; private bitmapBrother: Phaser.BitmapData constructor(key: string, position: Phaser.Point, game: Phaser.Game) { super(game, position.x, position.y - 32, null); this.createBitMap() .loadBitmapAsTextureAtlas() .loadTexture('heroes-sprites'); this.animations.add("down", ["sprite1", "sprite2", "sprite3"], 5, true); this.animations.add("left", ["sprite13", "sprite14", "sprite15"], 5, true); this.animations.add("right", ["sprite25", "sprite26", "sprite27"], 5, true); this.animations.add("up", ["sprite37", "sprite38", "sprite39"], 5, true); this.animations.add("stand-down", ["sprite2"], 5, true);"stand-down"); } createBitMap() { let game =; let cache = game.cache; let cacheSpriteSheet: any = cache.getImage('heroes-sprites', true); let bitmapBrother = game.add.bitmapData(cacheSpriteSheet.width, cacheSpriteSheet.height); this.bitmapBrother = bitmapBrother; this.frameData = cache.getJSON('heroes-sprites-atlas'); bitmapBrother.load('heroes-sprites'); return this; } loadBitmapAsTextureAtlas(prefix?) {'heroes-sprites' + prefix, '', this.bitmapBrother.canvas, this.frameData, Phaser.Loader.TEXTURE_ATLAS_JSON_HASH); return this; } modifiyBitmap() { this.bitmapBrother.shiftHSL(0.1); return this; } changeColor() { this.modifiyBitmap() .loadBitmapAsTextureAtlas('changed') .loadTexture('heroes-sprites' + 'changed'); } }
  16. Hi Just starting with pixi (and canvas). Looking to create something similar to this ribbon effect on mobile Any advise, can this be done? any tutorials available? lack of experience in this means i'm struggling to break it down into smaller tasks, any advice. Thanks
  17. function setupFrames(startName,endName){ var frames = []; for (var i = 0; i < 21; i++) { var val = i < 10 ? '0' + i : i; frames.push(PIXI.Texture.fromFrame(startName + val + '.png')); } for (var i = 21; i < 40; i++) { var val = i; frames.push(PIXI.Texture.fromFrame(endName + val + '.png')); } return frames; } //used with var anim = new PIXI.extras.AnimatedSprite(setupFrames("rot1","rot2")); anim.animationSpeed = 0.5; stage.addChild(anim);; I am trying to create an animation from 2 texture atlases. The problem I am facing is a glitch-a freeze in the middle, when I switch from startName to endName texture. I want to switch between texture atlases, because my textures are quite big, and if I wanted to place all in 1 atlas, it's size would be 20000x20000 px, which is not supported even by desktop machines. Are there any tricks I can use to eliminate that glitch? Thanks, Tim
  18. I'm a skilled 2D artist looking for job, here's the link to my portfolio If you like it don't hesitate to contact me Regards!
  19. Hi, I have scene with 2 objects and ArcRotateCamera on it. I choose it as I need to rotate around object and it does it job good. Now I want to create animation that changes camera target to second (fly to it) and than orbit around it. Is it possible with ArcRotateCamera or I should chose another camera as the base? Thx
  20. Hello everybody. I am trying to optimize my game, and would like to know, which of this two Phaser techniques would be more optimal in term of resource usage. On one side I got SpriteSheet - 'atlasJSONHash'. // preload game.load.atlasJSONHash('image', 'assets/image.png'); // create var foo = game.add.sprite(0, 0, 'image'); foo.animation.add('main');'main', 30, true); On other side I got just a sprite with a texture, and I'm changing it's texture in the Phaser render function, with another preloaded texture. // preload var textureArray = []; textureArray.push(game.load.image('image0', 'assets/image0.png') ); textureArray.push(game.load.image('image1', 'assets/image1.png') ); textureArray.push(game.load.image('image2', 'assets/image2.png') ); // and so on, 'in the game this is done by a loop'. // create var i = 0; var foo = game.add.sprite(0, 0, 'image0'); // render foo.loadTexture('image' + i); i++; In both cases there are same images [img0, img1, img2, ...], but in first example they are combined into a spritesheet, and in other they are separately loaded as a png images. I would like to know, which would you recommend, again in terms of resource consumption. Thank you in advance.
  21. Can someone tell me, please, why collision does not take place during animation? Here is a game :
  22. Hi All i was wondering if someone could help me with a phaser state query. I have been learning phaser from and its all for a html index file however the code seems to be different then to what i need if i was to build a game with states. For example i have a player walking animation but converting it for js states seems to be very difficult, i cannot find a tutorial anywhere. Any chance someone could point me in the right direction? happy to share the code Thanks
  23. Hello, I have a situation where i have different sprites ont the game, with the same frame rate. Actually they are all moving synchronously (see actual.png). What I want is to randomly shift the animation, to have a more natural feeling (see wanted.png). i tried to launch the play method in a randomly timeout, but it seems that there is unique timeline for every sprite. any clues ?
  24. If I hard code an enemy... var enemyData = { health: 20, attack: 40, animationFrames: [1, 2, 3, 4, 3, 2, 1] } ... it animates fine through the enemy prefab. But if I load an object with the same properties from a Tiled map - IT WONT WORK! I know to convert the strings to numbers with: =; But when I have an array, it doesn't seem to work
  25. Hi! My name is Andrey! I'm an experienced 2d Game Artist and Animator. I make any types of game art: characters, animations, gui, sfx, illustrations, assets and backgrounds. This reel will tell you about my abilities better than any words: My site and old portfolio. Sometimes I load assets to my gumroad. Now I'm looking for freelance and outsource work My email: My skype: murlyka.