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

  1. 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.
  2. 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
  3. 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
  4. 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.
  5. Hello everyone, I'm trying to get my head around how to work with animations in Blender and Babylon. I have no trouble exporting/loading etc and my animations works except in one aspect. I have added some movements to my object in Blender and with movement I mean that my object changes position. My problem now is that if I "walk" with my object in the browser each animation will begin where the object is added during the initialization. I have tried to find some data giving me the new position of the object when one animation is finished. Problem seems to be that the position of the object (mesh) doesn't actually change during the animation even though the object "moves". Does anyone have any suggestions of how to solve this issue? Or aren't you supposed to change position in Blender, only make animations where the object stays in the same spot all the time? Just seems strange if that would be the case...
  6. 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.
  7. 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.
  8. 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
  9. 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.
  10. Hi @Temechon How are you,.I purchase the babylon.js  book and the code samples so please point me in the book how I do this je je , by the way thanks for making book for your help in advance.

    ABOUT ME : Im a javascript programmer with experience in angular and js framework, but I'm new to blender and the 3D World (1 month using blender), I love babylon it's all in javascript.

    I have been working with many 3D SDK's and platforms, but all comes to the same problem, animation issues.

    I try Blend4Web but they want $999 for the technical support and there is little info about sample code, but they have an addon that exports JSON/Bin files  and if I bake every single mesh animation it will work but I think it crashes blender after baking 10 parts of the mesh a 720 frames each.



    then I try Play-Canvas (adult content) , it has VR camera ready and you can upload FBX files, so what I use to do is to Upload an FBX files for the mesh and another FBX with mesh and animations,  I delete it all in the one with the animation  and I use the just animation combined with the FBX with no animation and it works, but the platform is that it do not  accept may polygons meshes and you have to decimate making this more difficult and time consuming but works.

    I would like to try the previous method in blender but I dont know how can I combine the FBX files with the animation exported in a separate FBX in blender, so I can repeat this process on playcanvas .

    MY METHOD SO FAR so I also I import an alembic file

    Finally I created a .babylon file using alembics with cache vertex animation, , 


    here is information links for my files 


     it possible to do it with an vertex animation cache , meaning with out bones like an alembic file, I import the file into blender the animation plays well but I try the animated and its no working

    I created a .babylon file and added the animation attributes, e.g.' autoAnimate ... ' see below, then I drop the file in the sandbox

        "autoAnimate": true,
        "autoAnimateFrom": 0,
        "autoAnimateTo": 50,
        "autoAnimateLoop": true

    I tried before CTRL + A and add location, rotation, scale, and it worked on a simple animation

    I repeat the same with my files and it does not work :( 


    the files are big so please download it from this links the first one is the alembic the other ones are FBX and a BVH to capture the animation and also below I put pictures of my export options and the cube babylon code animated ready , ,


  11. 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?
  12. 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!
  13. 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
  14. hi. javascript and phaser noobie here. im building a game similar to the invaders example on the phaser website but i cant seem to get the explosion spritesheet im using to play the proper animation i want it to instead when i shoot an asteroid i get the entire sprite sheet spanned across the screen. also even though ive set 'loop' to false in the animation settings the explosion remains on the screen and after ive used all the explosions in the group the game crashes... ill give you the entire code for the game. its crap anyway but hey we all gotta start somewhere right? var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update, render: render}); function preload() { game.load.image('tileset', 'assets/tileset.png'); game.load.image('laser', 'assets/laser.png') game.load.image('player', 'assets/player1.png'); game.load.atlasJSONArray('asteroid', 'assets/asteroids.png', 'assets/asteroid.json'); game.load.atlasJSONArray('explosion', 'assets/explosion.png', 'assets/explosion.json', 100, 100); } //variables here var player; var asteroids; var tileSet; var lasers; var bulletTime = 0; var cursor; var fireButton; var explosions; function create() { tileSet = game.add.tileSprite(0, 0, 800, 600, 'tileset'); game.physics.startSystem(Phaser.Physics.ARCADE); game.renderer.renderSession.roundPixels = true; //player player = game.add.sprite(game.width/2, game.height,'player'); player.anchor.setTo(0.5, 0.5); game.physics.enable(player, Phaser.Physics.ARCADE); player.body.collideWorldBounds = true; //asteroids asteroids =; asteroids.enableBody = true; game.physics.arcade.enable(asteroids); asteroids.createMultiple(40, 'asteroid', 'asteroid');, addAsteroid, this); //pewpews lasers =; lasers.enableBody = true; game.physics.arcade.enable(lasers); lasers.createMultiple(5, 'laser'); //explosion explosions =; explosions.createMultiple(10, 'explosion'); //controls fireButton = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); cursor = game.input.keyboard.createCursorKeys(); } function update() { //scroll map tileSet.tilePosition.y += 7; //if alive if(player.alive) { //movement if (cursor.left.isDown) { player.body.velocity.x = -500; } else if (cursor.right.isDown) { player.body.velocity.x = 500; } else { player.body.velocity.x = 0; } if (cursor.up.isDown) { player.body.velocity.y = -320; } else if(cursor.down.isDown) { player.body.velocity.y = 320; } else { player.body.velocity.y = 0; } //firing button if(fireButton.isDown) { fireBullet(); } } //debugging //game.debug.body(player); //game.debug.body(lasers); //game.debug.body(asteroids); //collisions game.physics.arcade.overlap(lasers, asteroids, asteroidVsLaser, null, this); //game.physics.arcade.overlap(asteroids, player, playerDie, null, this); } //debugging function render() { //asteroids.forEachAlive(renderGroup, this); //lasers.forEachAlive(renderGroup, this); } //function renderGroup(laser) { //game.debug.body(laser); //} //add asteroids function addAsteroid() { var asteroid = asteroids.getFirstDead(); if (!asteroid) { return; } //set x values for asteroid to random number (0, 1500) asteroid.reset(game.rnd.integerInRange(0, game.width), -50); asteroid.animations.add('tumble', [0, 1, 2, 3, 4, 5, 6], 5, true);'tumble'); asteroid.body.setSize(30, 30, 20, 20); asteroid.body.gravity.y = 150; asteroid.checkWorldBounds = true; asteroid.outOfBoundsKill = true; } function setUpAsteroid(asteroid) { asteroid.anchor.x = 0.5; asteroid.anchor.y = 0.5; asteroid.animations.add('boom'); } function fireBullet() { if( > bulletTime && lasers.countDead() > 0) { var laser = lasers.getFirstDead(); laser.reset(player.x, player.y - 10); laser.anchor.setTo(0.5, 0.5); laser.body.velocity.y = -500; laser.checkWorldBounds = true; laser.outOfBoundsKill = true; bulletTime = + 300; } } function asteroidVsLaser(laser, asteroid) { var explosion = explosions.getFirstDead(); explosion.reset(asteroid.x, asteroid.y); explosion.animations.add('boom', [0, 1, 2, 3, 4, 5], 5, false)'boom'); laser.kill(); asteroid.kill(); } function playerDie(player, asteroid) { //player.kill(); //asteroid.kill(); //explosion.reset(player.x, player.y); } thanks for any help in advance and may the force be with you
  15. Scenario: I want to move a mesh along the z axis. Option 1: set up a Babylon Animation using keys etc to move the mesh to desired position Option 2: update the meshes position.z (+1 or -1) in the render loop until the desired position Question: Which of these options would be the most CPU intensive? Is there something special about Babylon Animations that make them worth using over option 2? Thanks
  16. I wrote a simple function to pause rendering. window.addEventListener('blur',function(){ _ENGINE.stopRenderLoop() console.log('paused'); }); window.addEventListener('focus',function(){ _ENGINE.runRenderLoop(function(){ _SCENE.render(); }) console.log('resumed') }); When the playground code is running, i tried to pause the game by clicking the outside elements of my web browser (you can click on the console log, or the URL tab to activate the pause). The funny thing is, when I click on the scene to resume the rendering, the cube has already travelled a lot. It's as it the computations for the cube (its animations) wasn't paused. Playground link: Any ideas?
  17. I have a sprite animation for making a sprite jump which has a a crouch before it actually jumps and I have a function to check for when it actually is time to lift off. But when the sprite it falling its height is taller than the sprites I have for the next animation which is landing and contains the crouch in reverse. What is the best way to stop the sprite from working jumping back up to its current y value at the top of the sprite but rather further down so it doesnt look like its crouching in mid air.
  18. I'm working on a game where the player character can change into different colors, depending on which power-up he takes. All animations are basically the same, except the sprite index is offset. The player sprites at index 0 through 7 are red, 8..15 are the same sprites but green, and 16..23 are blue. If the walking animation sprites are index 1,2,3 etc. for red, they are index 9,10,11 etc. for green (just add +8), and for blue add +16. See the sprite sheet example in the attachement (they are ripped and edited Megaman sprites, but that's just a placeholder graphic for now). I can't change the frames array of an animation AFAIK, so should I just add all the separate animations for each color, so something like this? this.animations.add("walking_1", [ 1, 2, 3, 4], 6, true); // red this.animations.add("walking_2", [ 9, 10, 11, 12], 6, true); // green this.animations.add("walking_3", [17, 18, 19, 20], 6, true); // blue this.animations.add("jumping_1", [ 5, 6], 6, true); // red this.animations.add("jumping_2", [13, 14], 6, true); // green this.animations.add("jumping_3", [21, 22], 6, true); // blue // and then later"walking_" + this._powerup_idx); // red green or blue The thing is, I want to expand it to 6, or maybe 8 power-ups and colors, so is there maybe a more clever way to handle this sort of sprite index offset in Phaser? Or is this the way to go?
  19. Hi guys. I have to implement a fbx animation file with threejs. I convert fbx to dae, and try to implement, but it seems to not work. And trust me, I tried autodesk dae, opencollada dae, json from I don't know what to do more. First it say that not find skeleton. I found a similar issue and there say to add manual in dae the skeleton. But now it say "could not find joint Joint1".... Animation is made with mixamo. Please help me. I'm not familiar with maya or 3ds max, and I don't know where is the problem. Thank you. walking.fbx
  20. Hi everybody! So I've been working with Babylon's Animation system and I've been stuck with one issue lately. I'm trying to execute an animation but also trying to keep the current position as it is. I've been trying to get this to work here but failed miserably
  21. Hello, I have a sprite player = game.add.sprite(50, 550, 'player');When i try to load some animations player.animations.add('left', [4, 5, 6, 7], 10, true);player.animations.add('right', [8, 9, 10, 11], 10, true);player.animations.add('up', [12, 13, 14, 15], 10, true);player.animations.add('down', [0, 1, 2, 3], 10, true);I get this error TypeError: Cannot read property 'index' of undefinedThis is my full code var menu = function(game){ console.log("%cStarting my awesome game", "color:white; background:red");}menu.prototype = { preload: function() { game.load.tilemap('level_json', '/maps/level1.json', null, Phaser.T ilemap.TILED_JSON); game.load.image('tiles', '/res/tiles_level2.png'); game.load.spritesheet('player','/res/player.png', 32, 48); }, create: function() { game.physics.startSystem(Phaser.Physics.ARCADE); // Load the map. map = game.add.tilemap('level_json'); map.addTilesetImage('tiles_level1', 'tiles'); layer = map.createLayer('Tile Layer 1'); layer.resizeWorld(); layer.wrap = true; player = game.add.sprite(50, 550, 'player'); player.animations.add('left', [4, 5, 6, 7], 10, true); player.animations.add('right', [8, 9, 10, 11], 10, true); player.animations.add('up', [12, 13, 14, 15], 10, true); player.animations.add('down', [0, 1, 2, 3], 10, true);; game.physics.enable(player, Phaser.Physics.ARCADE); player.body.collideWorldBounds = true; cursors = game.input.keyboard.createCursorKeys(); }, update: function() { if(cursors.left.isDown) { player.body.velocity.x = -150;'left'); } else if(cursors.right.isDown) { player.body.velocity.x = 150;'right'); } else if(cursors.up.isDown) { player.body.velocity.y = -150;'up'); } else if(cursors.down.isDown) { player.body.velocity.y = 150;'down'); } else { player.body.velocity.x = 0; player.body.velocity.y = 0; player.frame = 0; } }}
  22. Hi everyone, I've made an online Box2D editor in HTML5 and JS with Box2D and liquidfun JS versions. It's called Dynamo. You can edit your Box2D world with a graphical editor, save and load your work, reuse others' work and code specific behaviours with a javascript editor if needed. You can then embed your animations / game inside your webpage with a generated embed code ( like a video youtube ). You cant test it there : The about page explains a little more : It supports, for now : - Creation of simple bodies from shapes like box or circles - Creation of more complex bodies by adding simple shapes to selected body - Edition of vertices - Edition of physics parameters like gravity / timestep / friction / restitution / density / collision group ... - Import of images and texts with auto-generation of the physics geometry ( images must be png with opacity ) - Shape color edition - Joints creation ( for now : Revolute, Distance and Pulley ) - Multi-selection - Copy / Paste - Open several tabs for several worlds and Copy / Paste from one to another - Undo / Redo - Save / Load online ( sorry, but you have to be logged to use the editor, but it's less complex than the Box2D forum to register : mail - Facebook - Google - Twitter ) - A Search function to view other's work and reuse it - Javascript code editor to make specific behaviours or to communicate with your website - An Embed code to import your motion into your website or blog So, feel free to use it, make comments and report bugs. Here some links to see what kinf of stuffs you can make with Dynamo : Thank you everyone Enjoy
  23. Hey All, For a while and without success, I was looking for a way to transition between animations in babylon 2.0. By transition, I mean transform the bones over time to be exactly where they would be in the first frame of the animation that is about to play before the animation itself plays. This way it won't look weird when moving, say, from a walking animation to an idle animation or vice versa. I am trying to avoid having to create transition animation in blender for every possible combination. Since I could not find a way to do it, I was going to attempt to create a way myself. However, when iterating through the bones I realized that the only when to modify their transforms is to update their matrices. This is where the problem comes in. I am not very familiar with matrix math and would like to see if anyone could point me in the right direction as far as what calculations I need to perform on a bone to move it to the first frame of an animation that is about to play. Thanks in advance for the help!
  24. I have a question about the tweening system in Phaser. If I perform a complex animation with multiple sprites (or a simple animation involving only 1 sprite but with scale and alpha) I have to write something like this: this.halo.scale = {x:0, y:0}; this.halo.alpha = 1; if (this.halo.scaleTween) { this.halo.scaleTween.stop(); } if (this.halo.alphaTween) { this.halo.alphaTween.stop(); this.halo.alphaTween = null; } this.halo.scaleTween = game.add.tween(this.halo.scale) this.halo.scaleTween .to({x:1, y:1}, 1000, Phaser.Easing.Bounce.Out) .start() .onComplete.addOnce(function() { this.halo.alphaTween = game.add.tween(this.halo).to({alpha:0}, 1000).start(); }, this);When I'd rather write something like this:game.stop.tween("halo bounce"); // No error if not foundgame.add.tween("halo bounce") .then(this.halo.scale, {x:1, y:1}, 1000, Phaser.Easing.Bounce.Out) .then(this.halo, {alpha:0}, 1000) .start();Is this sort of system possible at all? Am I using the existing Phaser API wrong? Additionally, in our C++ engine, we had an 'also' function as well. This would allow you to add new tweens in the dot chain, but they got added at the same point as the previous one:game.add.tween("game over") // The name is optional. Anonymous tweens are the default .then(1000) // Delay before starting .then(, {alpha:1}, 100) .also(, {x:1, y:1}, 100) // This one runs ALONGSIDE the 'alpha' tween .then(function() { this.openScoreScreen(this.stats); }, this); // This one runs at the END of the 'scale' tweenIf this system looks exciting (I think it is, we've shipped a lot of triple-A casual games on all platforms (except HTML5) with it...) I would be happy to work together to add it to Phaser. Luc Bloom
  25. So I have this game that I made a while back that I am now trying to port with phaser. In this game I used individual PNG files for all my animations. From looking through the docs, it seems Phaser's animation support is just for spritesheets? Is there a way to do something like: player.sprite.animations.add('idle', ['images/s_snailIdle_0.png', 'images/s_snailIdle_1.png'], 60, true, false);'idle');If not, how can I change the frame for an individual sprite so I can maybe implement my own animation system?