Search the Community

Showing results for tags 'animations'.

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

  1. I'm trying to create a sprite with two animations. The first animation play constantly, and the second one after some events, then stop and the first keep playing. I'm loading an atlas like this game.load.atlas('girl', '../../spritesheet.png', '../../sprites.json') where game is my Phaser.Game instance. Then I'm creating animations like this girlSprite.animations.add('idle', window.Phaser.Animation.generateFrameNames('idle', 1, 16), 5, true) girlSprite.animations.add('walk', window.Phaser.Animation.generateFrameNames('walk', 1, 20), 20, false) where girlSprite is my character sprite. My animations run like this'idle', 16, true) // some events later var idleAnimation = girlSprite.animations.getAnimation('idle') var walkAnimation = girlSprite.animations.getAnimation('walk') idleAnimation.paused = true //'walk', 20, true) girlSprite.animations.currentAnim = walkAnimation'walk', 20, true) This only pause my first animation and then throw an exception saying currentFrame is undefined. After that I debugged a little and found out that my girlSprite had the second animation with wrong frames defined, because when I created the second animations it used the frameData from the first animation and the currentFrame get never defined. So, I'm a little lost. I'm doing it right? is there a better method to define multiple animations on the same sprite? Any help would be appreciated
  2. Hey guys... This is a little video to show some of my new Character Animation System features and MORE specifically WHERE I NEED HELP... Basically I new help Computing What should be animation.blendingSpeed from a transition duration time... Yo @Deltakosh PLEASE WATCH THIS VIDEO SO YOU CAN SEE EXACTLY WHAT I TALKING ABOUT Sorry for the capital letters... I just really want you to see this (WHEN YOU GET A CHANCE) Take a look: BabylonJS Toolkit - Animation System Help Required
  3. Hi guys ... I am creating transitions and blend trees for BabylonJS toolkit... The very nature of the transition system in unity DOES NOT ALLOW traditional looping... EVERYTHING is a transition condition check... if NO conditions are meet after ANY animation is play it is stopped... the have various of way they id to LOOP back on itself with ANOTHER transition set state.... So basically they ALWAYS play one iteration of an animation and check it transition condition (which may be itself) and plays that animation clip... Now I am wonder what the performance impact of babylonJS of doing ANOTHER scene.beginAnimation in the OnAnimationEnd end event in the same frame as the on animationEnd Event (so its not choppy) VS playing it with a loop cycle... I won't know if cam to loop back onto itself until AFTER the animation has been played and its conditions are check... So I gotta 'Manually Loop Animations' even small few frame animations: Yo @Deltakosh ... Pinging you in too Here is an example of some of my state machine update logic, tell me why you think the impact performance of manually looping animations this way will be: private setCurrentMachineState(name:string):void { if (this._state == null || !== name) { this._state = this.getMachineStateInfo(name); } if (this._state != null) { this._state.interupted = false; this._state.sts = BABYLON.MachineStatus.None; if (this._state.motion != null && this._state.motion !== "" && this._state.type === BABYLON.MotionType.Clip) { var local:BABYLON.MachineState = this._state; var blend:number = BABYLON.Constants.NoBlending; var speed:number = local.speed; local.sts = BABYLON.MachineStatus.Playing; this._animataions = this.manager.playAnimationClip(local.motion, this.owned, false, speed, blend, true, ()=>{ local.sts = BABYLON.MachineStatus.Finished; this.updateStateMachine(); }); } } } NOTE: this.manager.playAnimationClip basically calls scene.beginAnimation on all required components as well... then on this.updateStateMachine will cause the component to call this.setCurrentMachineState on WHATEVER the first transition CHECK says... including it might be itself again... Hope I explained that good enough
  4. In Place Animations

    My Man... @Deltakosh got another one for your review In Unity for animations that move around (like walk that actual move the skinned mesh forward) they have switch 'Apply Root Motion' when apply root motion is off and they ar using an animation that IS NOT INPLACE they do something to make that skin the bones are on stay 'IN PLACE' ... Does anybody know how I can do something to make my animations stay in place... Maybe at the transform matrix level that I encode into the animation. This is where I 'Sample' the transform compute the matrix to get key for each bone and stack all those on the bone.animation... Maybe I could do something here that 'Keeps' the X,Y AND Z at the original position (like an in place animation)... Or is there some other trick to using NON IN PLACE animations as character movement in BabylonJS ??? Otherwise you will have to go replace ALL the individual animations on a Unity character controller with in place animations for each blend tree node walk, strafe, crouch etc... If you can find IN-PLACE animations to fit your existing Avatar Controller setup. If I can somehow do what unity does (Preferable at the export level when build that bone matrix so I would not have to compensate at runtime or anything like that) and 'DISABLE ROOT MOTION' which keeps a NON-IN-PLACE animation in-place ... Here is how I build the bone.animation for your reference: AnimationMode.BeginSampling(); for (var i = 0; i < clipFrameCount; i++) { clip.SampleAnimation(source, i * frameTime); var local = (transform.parent.localToWorldMatrix.inverse * transform.localToWorldMatrix); float[] matrix = new[] { local[0, 0], local[1, 0], local[2, 0], local[3, 0], local[0, 1], local[1, 1], local[2, 1], local[3, 1], local[0, 2], local[1, 2], local[2, 2], local[3, 2], local[0, 3], local[1, 3], local[2, 3], local[3, 3] }; var key = new BabylonAnimationKey { frame = (i + frameOffest), values = matrix }; keys.Add(key); } AnimationMode.EndSampling(); frameOffest += clipFrameCount; totalFrameCount += clipFrameCount; then dump on the bone: var babylonAnimation = new BabylonAnimation { name = + "Animation", property = "_matrix", dataType = (int)BabylonAnimation.DataType.Matrix, loopBehavior = (int)BabylonAnimation.LoopBehavior.Cycle, framePerSecond = frameRate, keys = keys.ToArray() }; if (animationState != null) { babylonAnimation.loopBehavior = (int)animationState.loopBehavior; babylonAnimation.enableBlending = animationState.enableBlending; babylonAnimation.blendingSpeed = animationState.blendingSpeed; } bone.animation = babylonAnimation; As always .. any info will help
  5. I've been playing around with animation, but Blender's methods are a bit unreliable on the usual export/import, let alone Babylon.js's plugin. Importing Collada files and turning them into Babylon's files has resulted in a mixed bag of bugs. Mostly, the meshes don't fit the skeleton and are shifted very far off. However, the resting posiion of my armature and the way I've skinned the meshes (Mixamo mostly) don't reflect the bugs I get. In addition, the animations are distributed between the bones, and are not stored in the main skeleton, though I feel like that's not a problem- just kind of inconvenient. I worry now that perhaps I've been going about it the wrong way, so is there anything I'm doing wrong? I'd really appreciate tips on what I'm doing. Example included of a distortion of a woman fist-pumping. The skeleton is so small, you can't see it if you want to also include the full mesh. In blender, it imports fine (when it successfully imports) but upon exporting the file kind of changes.
  6. Hello my dear friends, I am trying to add animation to my bird object and I added for normal flying and It worked but when I try to add any other animation to same object it gives an error can you help me, I am adding my codes and the error message here, thanks! create: function() { this.bird = game.add.sprite(150, 200, 'bird'); this.bird.scale.setTo(0.1, 0.1);; this.bird.body.gravity.y = 1000; this.bird.animations.add('right', [0, 1], 5, true); this.bird.animations.add('dead', [2, 3], 5, true); this.bird.anchor.setTo(-0.2, 0.5); var spaceKey = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); spaceKey.onDown.add(, this); }, update: function() {, this.blocks, this.killBird); }, fly: function() { if (this.bird.alive == false) return; this.bird.body.velocity.y = -325; var animation = game.add.tween(this.bird);{angle: -20}, 100); animation.start();'right'); }, killBird: function() {'dead', 8, true); game.state.start('menu'); }, And I add the error message, and also my other problem is about pixel reformatting errors, how can I get rid of them, thanks.
  7. Help with animations!

    Hello! Im new here, and I'd like some help. I was coding, made a new spritesheet and tried making it play while I press a key. It doesn't seem to be working, and I don't know why. If you could help in any way, it'd be greatly appreciated. Thanks! CODE - SPRITESHEET -
  8. Hi Guys, I created this post hoping to find people interested in helping on the development and documentations of the unity toolkit. The unity editor allows to put an scene together very easy and export it all ,(lights cameras, meshes etc) with out a line of code How this works? Well @MackeyK24 started developing in visual studio the exporter tool and he saw a way to transform the camera , light or mesh from unity to babylon metadata, then later he add support for animations, splat maps painting, particles system and PBR materials, all of these trough the C# and the unity exporter. Furthermore, I join him on the project 6 months ago and I'm no as good as he is as developer but he took the time to show me and recorded videos to show people how to use it and improve it. I was not easy to pick it up if you dont have a strong object oriented programming skills winch most java script developer lack of, but this is an excellent way to learn or improve your coding skills So if you want to joins us and have some spare time to learn, please feel free to contact me, I can try to put you guys up to speed so we can continue with this great tool for development
  9. Hi all - Quick question about Babylon files. I have one with meshes, cameras with animations, etc. All sorts of goodness: what is the recommended method of importing this file, and having access to all the associated objects inside? I've been using ImportMesh, which works fine for importing meshes and textures. It's not clear to me, though, how I instantiate the other data types within the babylon file. Many thanks!
  10. Hello! I have a parent sprite (which is a human body) and it has a child sprite (it's a piece of plate mail). The sprite sheet for the human and the sprite sheet for the plate mail are the exact same layout with the exact same animation frames. I was wondering if there was a way to have the plate mail follow the same animation sequence as the human, without having to map out its own animation sequences. Thanks!
  11. Hello: So I'm trying to make a bubble popping game where once the balloon pops it shows an animation before getting deleted off the screen. but I can't get the to work if it's in a different function, but once I place it in the create function it works fine so it's not a syntax error(i think). This is where I initialize the enemy playState.prototype.spawnEnemies = function(){ if (this.waveProperties.counter > 0) { while ( < this.waveProperties.max / 2) { var type = Phaser.ArrayUtils.getRandomItem(["enemyLarge", "enemyMed", "enemySmall"]); var enemy = this.enemies.create(null, null, enemyProperties[type].img); enemy.reset(game.rnd.integerInRange(80, 1400), game.rnd.integerInRange(50, 400)); enemy.anchor.setTo(0.5, 0.5); enemy.body.collideWorldBounds = true; enemy.body.bounce.set(1); enemy.body.allowGravity = false; enemy.animations.add('pop', [1,2,3,4,5],30,false); enemy.body.velocity.y = game.rnd.integerInRange(enemyProperties[type].minV, enemyProperties[type].maxV) * game.rnd.pick([-1, 1]); enemy.body.velocity.x = game.rnd.integerInRange(enemyProperties[type].minV, enemyProperties[type].maxV) * game.rnd.pick([-1, 1]); enemy.nextSize = enemyProperties[type].nextSize; enemy.hp = enemyProperties[type].hp; enemy.dmg = enemyProperties[type].dmg; enemy.points = enemyProperties[type].points; enemy.bubbleSfx ='bubbleSfx'); enemy.bubbleSfx.allowMultiple = true; this.waveProperties.counter -= enemyProperties[type].points; += enemyProperties[type].points; } } else { console.log("Next wave started.."); //add text that shows PREPARE FOR NEXT WAVE here. this.waveProperties.max *= 2; this.waveProperties.timeCheck += this.waveProperties.timeCheck; this.waveProperties.counter = this.waveProperties.max; } }; this is where it checks if the bullet collided with the enemy and if health is 0 it will play the animation then get destroyed playState.prototype.hitEnemy = function(bullet, enemy){ switch(bullet.key){ //checks which kind of weapon hit the enemy by looking at it's image name case 'bullet' : enemy.hp -= 10; break; } bullet.kill(); //bullet dies on impact if (enemy.hp <= 0) {'pop'); this.bEmitter.x = enemy.x; this.bEmitter.y = enemy.y;; this.bEmitter.start(true,2000,null,20); enemy.destroy(); this.splitEnemy(enemy.nextSize , enemy.x, enemy.y); -= enemy.points; } }; if anyone could help me it would be greatly appreciated I'm at a loss atm.
  12. So I have 2 animations that both work independently. I can pause and unpause either of them fine but I can't pause one, play the other and then unpause the first. This doesn't and no animations play in the end Any ideas?
  13. Tiled Map Editor Animations in Phaser

    I'm attempting to keep my animated tiles in phaser, but it don't seem to work by default. Does anyone know of a work around? I've included an image of the animated tile map.
  14. Hi, guys! I have some problem. I am using function attachToBone for attaching a pistol to a hand of my game character. Sometimes if I change a character animations between shot and idle, pistol detaches from bone like on video. I think this is becouse in one moment a bone with pistol dos't animate, when an animation changes. But it is happens not always, often at low fps. And in old version of babylon 2.4 all works fine. But in version 2.5 it problem is appeared. Thanks for any considerations and ideas about it is problem. And it is problem if you ask me share on playground, this projects have many codes and models and other materials I shot the video
  15. Hi all, I am designing the subsoil of terrain in my scene. This subsoil is formed by tubes which represents water 's canal or electric 's net. Well, to allow the view under terrain I have to show it as a wire object. My first question is: how can I show only the ground object as wire mode? I have made this but changing to this mode the visualization of all elements of scene... The second question is relative to animations. Inside the tubes I would like to add animation of water to get a better level of realism. Firstly, I can give some transparency to material of tubes and after i should add this animation. Do you know how can I add this animation inside of tube? In thefollow image you can see my scene to understand me better: Thanks
  16. Animation Scrubber

    Just wanted to know if it was possible to build an animation scrubber. One that would allow me to create an animation and then use a slider to "scrub" the animation. I have seen this in editors before. Where you can view different frames in the animation using a horizontal slider.
  17. Hello guys, I'm moving on with my scene and I got stuck on skeleton animations. I have situation when my soldier model is running and while running animation is playing (or any other animation) he is being hit. The results of such situation is that running animation is stopped and hit animation starts playing, while my model is still moving forwards. So I have few different options here: Stop model movement and continue run animation when hit animation finishes Blend two animations with different weights. I know that this is possible with Three.js' animation mixer but I could not get it to work with babylonjs is this even possible? Any other thoughts? I was going thought this forum but I only found topics on blending when one animation changes other animation.
  18. so i have a game where there are different enemies who look different and so have different spritesheets. and i have a pool of objects mechanism to recycle the dead enemy objects into new ones, kinda like this: var enemy = this.state.enemies.getFirstDead(); if (!enemy){ enemy = new MyGame.Enemy(this.state, cords.x, cords.y, data); this.state.enemies.add(enemy); } else { enemy.reset(cords.x, cords.y, data); } so the problem is like this: sprites are not properly having their animations changed from their old selves to their new selves. their sprites change properly for the most part but are keeping bits of info from the old animations, ie they are not being fully replaced when i call the this.animations.add again. the data parameter is an object with a buncha info about each enemy, including animation info. kinda like this: { key: 'troll', scale: 0.8, health: 20, movementSpeed: 60, attack: {amount: 2, delay: 0.5, type: 'physical', frames: [0, 1, 2, 3, 4, 5, 6, 7], fps: 16}, death: {frames: Phaser.ArrayUtils.numberArray(0, 31), fps: 32} } so in my modified reset method, which runs actually every time an enemy is created, these animations are made, pulling the frames and stuff from data and making an animation, like this (in the reset method of Enemy): this.animations.add('attack',, || 12, false); and when i run that line with different data on a sprite that was recycled, the data is not fully over-written, resulting in these mutating enemies that change from trolls to scorpions as their various animations play. the first thing i tried was calling this.animations.destroy() on my modified .kill() method that is called on all dying sprites, i thought that shoulda fixed it... but then i immediately get this error, 'Cannot read property 'getFrameIndexes' of null(…)', as if the animations were not being properly cleared and then added freshly again. i hope this made sense, thanks for the help guys.
  19. I want to animate a camera between two points. Think of it like a camera on rails. A bit more tricky is that the rails are interconnected. e.g. Point: A moves to B moves to C moves to A moves to D etc. Therefore, any combination could work. In my local example, I have an event that will trigger this switch. For this example lets just use a click or interval to iterate. PROBLEM/QUESTION: How can I reset/append the keyframes of an animation? Typically my logic will either not run or replay the same animation. I hope, this animation, I made will help communicate the interaction. Note that this is the camera moving, not the meshes. At some point, the meshes may slightly move relative to the camera; however, that's for next iteration.
  20. Hello guys, Just started using babylon JS more than a week ago at work. Everything was going quite smooth so far. However I am struggling to export .babylon file from blender. Most probably it's because I have pretty much no experience with blender and 3D models in general. The mesh gets exported correctly but the main problem is with animations/animations actions, when I import .babylon file to the babylon engine and start any of the animations the mesh goes all over the place... I add .fbx file and .babylon file I get when I export it form blender. I hope someone can help me. I really need a help on this one. ArmyPilot_babylon.rar ArmyPilot_fbx.rar
  21. Hi, i am actually thinking about how to load animations at runtime. Reason is that our project includes almost 3000 unique animation takes (7 years of hard work ). That includes overrides of walk/run/idle/jump animations, actions (dance, etc) and gestures such as sit or laydown wich we need to bound to mesh objects. The overall file size is of course far too large to preload and must be somehow loaded and triggered at runtime on demand. I couldnt find anything about this in the docs. Maybe someone could give me a hint?
  22. The Grim Panda Design team is currently accepting new art and design projects. We have a team of experienced and seasoned 2D & 3D artists and animators who have provided assets for many of the best-selling mobile game companies on the market today. We work with any budget, large or small, and can quote prices on a project level, per-diem, or hourly. With the ability to work in vector, concept, and realistic styles, our team is dedicated to making your project come to life. The quality of your assets will be precise, clean, and look brilliant in your mobile IP. We pride ourselves on bringing your player into the world you have envisioned. Due to legal obligations with many of our clients, we cannot publicly post our complete portfolio. Please contact me at for samples. Thank you, and we look forward to bringing your creative design to the next level.
  23. Hi everybody! I've just started using Babylon.js for a small project for an exam, but I'm having some troubles... I have a box that moves pressing arrow keys; when it collides with a fixed object, as a wall, the game ends. This part of the project works, and I've used the intersectMesh method to do this. The box moves updating its position each time that a key is pressed. (I don' t know if this is important but the box has a physics state, in order to properly move on the ground, that is made with an height map). Now, I'd like to add some small objects that the box can "collect" while moving, just colliding with them. I've created my meshes and I've added two animations, one for position and one for rotation; if I try to use the intersectMesh method for the box and the new mesh, it simply doesn't work... Can someone please explain me why this doesn't work? Thank you!
  24. Hey guys, I have just made a little mesh and a simple animation on maya, but since there is no exporter from maya and no 3dsmax on mac.. im using unity to export. It works great for the mesh, texture etc, but I cant manage to access the animation... it is in the babylon file, but it's exploded by property like in the picture, I have two of those for each property probably because my mesh has two separate parts... Somebody knows how I can call the animation to run once ? Thanks