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

  1. Not sure this is a bug, but why would I only in some cases need to clear the animations array? I have created a PG to repro: (see line 151) Basically the yellow box keeps replaying the 'position.z' animation, while the orange box that has the animations cleared is working as intended. If this is a confirmed bug, I am happy to try to create a PR. I am expecting in the callback on animation completion to have the 'position.z' animation removed (or only played once). cheers.
  2. HI guys, Our City game is progressing well . Now I wanted to animate cars to ply on the roads which is created by the players in the game. After creating the roads i want the car to move on the same road, The roads are created by clicking each tile by the user. The entire road length is saved in a array. I need the cars to move from starting point of my road to end point of road where the user has plotted. can some one tell me what method i can use to achieve this, for now I am trying with patrol method. I am having trouble with my co-ordinates because patrol is in 2d but my game is in isometric , And If I move or pan the screen car was not sticking with my game world rather its taking the browser screen. tried using functions like .toiso(),localToWorld() . But of no luck can some one tell me is their any other way to achieve it or solution for this. Thank you HAPPY GAMING...
  3. First post! I want to animate an object's position based on input from the user's mouse wheel. The mouse wheel can fire events many times per second. I don't want to destroy the old animation, and create a new one, for each of these many events. I'd prefer to "update" the keyframes of the existing animation instead (i.e. continue the animation from its current frame and position, to a new endPosition at a new keyframe). I'd also like to "restart" the animation again from its current value, if it happens to reach the final keyframe and stop, then the user scrolls again later. What is the preferred way to "update" an animation in Babylon.js? Can I just use animation.setKeys() again to update the keyframes? Also, if the animation completes, then more scroll events are fired later: how can I "restart" the animation from its previous end position, and trigger it to run again to a new end position? Thank you so much in advance for your help!
  4. So I'm experimenting with electricity (again). : ) Didn't see anything in searches. Ever see anything like that? Thinking low-poly, or cartoonish aok: - particle system with little glowing star-diamonds...? - animated line bezier (or zig zag line) with emissive light? - import from blender animation(possible) - and or... spherical harmonics, lasers, and small godray?!? What would you try first? - YouTube has some videos of Blender, electric arc's or - Hook Wave: looks like a sine wave! Only the spark is needed - not the anodes or y movement. Idea: glowing low-poly sine-wave would be cool.... looking at this: Thanks,
  5. Howdy Everyone! We are looking at creating a game in phaser for the first time and were leaning towards creating something in vein of "Limbo" (yes, I know that game was all 3D made to look 2D). What are good tools for exporting bone based animations to phaser for development/programming? We would be using bones on flat geo with sprites. We are BabylonJS veterans and we've used a combo of Maya and Unity3D to export animations to that platform, but Phaser I'm not sure what programs export to a Phaser friendly format. Trying to figure out the workflow for our artists. Thanks for any input! -Chad
  6. I have two .babylon files. One with meshes and skeletons, but no animation. The other one has skeletons and animation, but no meshes. Turns out BABYLON.SceneLoader.ImportMesh doesn't load the skeletons at all, because there's no mesh in the file. Is there any way to import .babylon file with just skeletons and animation?
  7. Hello, I'm Emily and I'm a freelance artist looking for paid projects, small or part-time. I'm currently booked up on revenue share projects, so I'm only available for gigs that pay as I work. I specialize in 2D game graphics, including: - UI - backgrounds - 2D animations - illustrations/concept art I'm also open to doing anything else 2D animated or fully illustrated (cover art, comics...) For samples of my portfolio, please visit: If you feel my style of art would be suitable for your project, please contact me at: [email protected] Otherwise, please feel free to check out/play some games I've worked on: Thank you for your time and consideration. I hope you enjoy my work
  8. Hi ,is there some build in way to animate mesh and all its children together? Or I need to loop through all child meshes and apply animation separately? I have invisible mesh as container and I add children to it as I need group control. Works well for position changes but I need also to fade out children (opacity).
  9. Hi guys, I'm having a hard time figuring out how to move a given object to the destination of a clicked mesh. Playground link (similar recreated scenario): As you can see, the first two actions (hovering mouse in/out effect) work fine with every tile, but the animating action seems to always extract the position of the last added tile. I'm suspecting it's because I'm overwriting the tile variable (and thus its position values) or something. I also suspect that using instances for the tiles might be a better option, since in the game they also just use 5 different materials that are loaded before-hand...but first things first. Thanks in advance for taking a look!
  10. Hello. I'm new here and finally found a reason to post. I'm also new to this kind of development. To the point: I am creating a transition using Tween and a container. My issue is when the play/user clicks on the hit box to start the animation/tween it doesn't account for multiple clicks which then plays the animation again. How do I not allow the function to execute when is it already running? I'm developing with CreateJS in case that matters. Thanks in advance.
  11. Hi there, Here is the first version of GAF Player for PixiJs. If you know Flump or Dragon Bones, take a look at GAF, it's so much more powerful !!! At the moment, GAF Player for PixiJS is available for Haxe-Pixi but I will deliver a pure js lib soon . Enjoy PS: I'm really interested in bug reports !
  12. 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...
  13. 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!
  14. 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
  15. 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
  16. 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; }
  17. 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?
  18. 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.
  19. 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!
  20. 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 ?
  21. 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?
  22. 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;
  23. 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?
  24. 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"); }); } }
  25. Hi is it possible to get animation end callback for looped animations, I need to know how many loops have been done. Thanks