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

Found 542 results

  1. Hi, Excuse if this question is silly but I am noob in BJS! How can I evaluate when an animation has reached last frame (100) or first frame (0) if it is played backwards? Thanks
  2. Hi, I would like to animate a big machine and I have got some questions. The machine has got some rigid bodies (like a robot) and each other have some kinematic relations. rotation/translation ....depending on the physic axis Can I load the whole scene in blender and then export it to a babylon file or is it better to load each mesh as single components in a js file scene ? . Or any other way ? at moment, the machine comtains almost 10 meshes ,that are almost 1 to 2Mbytes stl ascii files each. Once the machine is loaded, there will be animation. The position values of each meshes are computed by a cnc post processor and the positions are available in an array for each ms. I don't know exactly how I will share these values to the babylon js model at the moment . any idea ? Regarding the vision of this project, I would need some advices on the way to implement it right in babylonjs . To give you a better overview of what I want ot achieve , here is a video of my actual project : Regards, Steph
  3. Is there a built-in way to apply a smooth animation on the active camera, given a start position, orientation, a final position, a final orientation and time frames?
  4. Its me again I can play animation of an imported model with: new BABYLON.PlayAnimationAction(BABYLON.ActionManager.NothingTrigger, MESH_NAME, 0, FINAL_FRAME, 0), But this only works if I know the number of frames to put it as "FINAL_FRAME", now, I need to know if an imported model contains an animation (1) or not (0) and if it contains animation to know how many frames it haves. Is this possible? How can I make it? Gracias.
  5. var game = new Phaser.Game(400, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); //creating score value and onscreen text var score = 0; var scoreText; function preload() { // preload assets game.load.image('sky', 'assets/img/sky.png'); game.load.image('ground', 'assets/img/platform.png'); game.load.image('star','assets/img/star.png'); game.load.spritesheet('baddie', 'assets/img/baddie.png', 32, 48); } function create() { // place your assets //enabling Arcade Physics system game.physics.startSystem(Phaser.Physics.ARCADE); //adding a background game.add.sprite(0, 0, 'sky'); //a group containing the ground and platforms to jump on platforms =; //enabling physics for any object in this group platforms.enableBody = true; //creating the ground var ground = platforms.create(0, - 64, 'ground'); //scaling to fit the width of the game ground.scale.setTo(2, 2); //stops ground from falling once player jumps on it ground.body.immovable = true; //create five ledges var ledge = platforms.create(-300, 400, 'ground'); ledge.body.immovable = true; ledge = platforms.create(200, 400, 'ground'); ledge.body.immovable = true; ledge = platforms.create(100, 300, 'ground'); ledge.body.immovable = true; ledge = platforms.create(-200, 200, 'ground'); ledge.body.immovable = true; ledge = platforms.create(300, 100, 'ground'); ledge.body.immovable = true; //create the player and its settings player = game.add.sprite(32, - 150, 'baddie'); //enabling physics on player game.physics.arcade.enable(player); //giving player a slight bounce player.body.bounce.y = 0.2; player.body.gravity.y = 300; player.body.collideWorldBounds = true; //walking left and right animations player.animations.add('left', [0, 1], 10, true); player.animations.add('right', [2, 3], 10, true); //create group for stars stars =; stars.enableBody = true; //creating 12 stars evenly spaced apart for (var i = 0; i < 12; i++) { //create a star inside of the 'stars' group each 33 px apart var star = stars.create(i * 33, 0, 'star'); //giving it gravity star.body.gravity.y = 6; //giving each star a random bounce value star.body.bounce.y = 0.7 + Math.random() * 0.2; } scoreText = game.add.text(16, 16, 'Score: 0', {fontSize: '32px', fill: '#000'}); } function update() { // run game loop //collide player and stars with platforms var hitPlatform = game.physics.arcade.collide(player, platforms); //built in keyboard manager cursors = game.input.keyboard.createCursorKeys(); //reset players velocity (movement) player.body.velocity.x = 0; //moving with arrow keys if (cursors.left.isDown) { //move to left player.body.velocity.x = -150;'left'); } else if (cursors.right.isDown) { //move right player.body.velocity.x = 150;'right'); } else { //stand still player.animations.stop(); player.frame = 2; } //allow player to jump if touching ground if (cursors.up.isDown && player.body.touching.down && hitPlatform) { player.body.velocity.y = -350; } //checking for collision with stars and platforms game.physics.arcade.collide(stars, platforms); //checking if player overlaps with star game.physics.arcade.overlap(player, stars, collectStar, null, this); } function collectStar (player,star) { //removes star from screen star.kill(); //add and update score score += 10; scoreText.text = 'Score: ' + score; } I can't seem to figure out why, but once I changed the sprite (which has fewer animation frames than the original), some strange errors popped up. The two error messages say: Uncaught TypeError: Cannot read property 'getFrameIndexes' of null Uncaught ReferenceError: stars is not defined The animation frame ranges don't seem to go out of bounds and I've already defined my 'stars' variable in the create function. Any ideas on why I'm getting these weird error messages? (the spirtesheet of the player is attached below)
  6. my animations

    var fog = this.add.image(500, 200, 'dragon').setOrigin(0); this.tweens.add({ targets: fog, x: -300, ease: 'Circle', duration: 30000, repeat: -1 }); var light1 = this.lights.addLight(280, 400, 200,2332,50); var ellipse1 = new Phaser.Geom.Ellipse(light1.x, light1.y, 70, 100); var light2 = this.lights.addLight(500, 386, 200,200,20); var ellipse2 = new Phaser.Geom.Ellipse(light2.x, light2.y, 30, 40); this.time.addEvent({ delay: 100, callback: function () { Phaser.Geom.Ellipse.Random(ellipse1, light1); Phaser.Geom.Ellipse.Random(ellipse2, light2); }, callbackScope: this, repeat: -1 }); var light3 = this.lights.addLight(500, 400, 200,200,20); var dummy = this.add.image(400, 400, 'dragon').setVisible(false); this.tweens.add({ targets: [ light3, dummy ], y: 150, ease: 'Sine.easeInOut', yoyo: true, repeat: -1, duration: 3000 }); Im stuck on this example in the examples for phaser 3 First create lights to make candles more realistic and typescript demands 5 arguments. i have no clue what to fill in fourth "RGB" it onli accept integers though nothing else and this.lights(enable) is set too but it not showing on the screen here. The fog animation tween works perfectly fine but it refuses to light is it me doin anithing wrong or is it updated allready to new code what can be the issue? kind regards.
  7. Hello Anyone knows how to check if a Spine animation is complete. Tried: player.onComplete();
  8. Hi, We're looking for an HTML5 games developer to help with a very simple soccer penalty game. Needs to work on an ipad and iphone. Looking for someone who is able to animate. please PM if you are available to help Thanks!
  9. animation doesn't loop

    Hi. I'm having trouble with an animation. The animation is 3 frames, and is a static image until the user ciicks in, and animates it, which should happen in a loop. Instead, the frames play once then the entire thing disappears from the screen. How do I get it to loop? Also, ideally I'd have it loop a number of times then stop. I see there's an example for loop counts in the Phaser documentation, but that doesn't seem to work either... preload: function () { this.load.spritesheet('spritesheet', 'pngs/sprites.png', 99, 79, 3); }, create: function () { this.sprites =, 60, 'sprites'); this.sprites.inputEnabled = true;, this); } spritesanim: function(){ this.animat = this.sprites.animations.add('swing');'swing', 20, true); },
  10. help with splitting an application

    <script>window.onload = function () { //Application 1: Dog 1 var app_1 = new PIXI.Application($(window).width(),$(window).height(), { transparent: true }); var dog1; document.getElementById('area').appendChild(app_1.view) $(window).resize(function () { app_1.renderer.resize( $(window).width(),$(window).height()); }); // load spine data PIXI.loader .add('dog1', 'assets/animate/dog1_skeleton.json') .load(onAssetsLoaded); app_1.stage.interactive = true; app_1.stage.buttonMode = true; function getRandomInt(max) { return Math.floor(Math.random() * Math.floor(max)); } function scaleScene() { app_1.renderer.resize($("#area").width(), $("#area").height()); var bottom_position_ratio = 50/800; dog1.position.set(app_1.screen.width / 4, app_1.screen.height - bottom_position_ratio*app_1.screen.height); var base_height = 800; var base_scale = .25; var ratio = .25 / 800; dog1.scale.set(ratio*app_1.screen.height); } $(window).resize(function () { scaleScene(); }); function onAssetsLoaded(loader, res) { console.log(res); dog1 = new PIXI.spine.Spine(res.dog1.spineData); // set current skin dog1.skeleton.setSkinByName('dog1_skin'); // set up the mixes! // dog1.stateData.setMix('neutral_breth', 'head_l', 0.2); dog1.stateData.setMix('head_l', 'head_r', 0.4); dog1.stateData.setMix('head_r', 'head_l', 0.4); scaleScene(); // play animation dog1.state.setAnimation(0, 'neutral_breth', true); dog1.state.setAnimation(1, 'tail_fast', true); app_1.stage.addChild(dog1); app_1.stage.on('pointertap', function () { // change current skin console.log('wgt>!'); // dog1.stateData.setMix('head_l', 'neutral_breth', 0.4); // dog1.state.setAnimation(1, 'head_l', .04); // dog1.state.setAnimation(3, 'head_r', fal); var rand = getRandomInt(2); if (rand == 1) { dog1.state.setAnimation(3, 'head_l', false, 0); } else { dog1.state.setAnimation(3, 'head_r', false, 0); } rand = getRandomInt(3); setTimeout(function () { dog1.state.setAnimation(4, 'blink', false, 0); }, getRandomInt(2000)); }); console.log(document.body); } //Application 2: Dog 2 *********************************************** var app_2 = new PIXI.Application($(window).width(),$(window).height(), { transparent: true }); var dog2; document.getElementById('area').appendChild(app_2.view) $(window).resize(function () { app_2.renderer.resize( $(window).width(),$(window).height()); }); // load spine data PIXI.loader .add('dog2', 'assets/animate/dog2_skeleton.json') .load(onAssetsLoaded); app_2.stage.interactive = true; app_2.stage.buttonMode = true; function getRandomInt(max) { return Math.floor(Math.random() * Math.floor(max)); } function scaleScene() { app_2.renderer.resize($("#area").width(), $("#area").height()); var bottom_position_ratio = 50/800; dog2.position.set(app_2.screen.width / 4 + app_2.screen.width / 2 , app_2.screen.height -bottom_position_ratio*app_2.screen.height); var base_height = 800; var base_scale = .25; var ratio = .25 / 800; dog2.scale.set(ratio*app_2.screen.height); } $(window).resize(function () { scaleScene(); }); function onAssetsLoaded(loader, res) { console.log(res); dog2 = new PIXI.spine.Spine(res.dog2.spineData); // set current skin dog2.skeleton.setSkinByName('dog1_skin'); // set up the mixes! // dog1.stateData.setMix('neutral_breth', 'head_l', 0.2); dog2.stateData.setMix('head_l', 'head_r', 0.4); dog2.stateData.setMix('head_r', 'head_l', 0.4); scaleScene(); // play animation dog2.state.setAnimation(0, 'neutral_breth', true); dog2.state.setAnimation(1, 'tail_fast', true); app_2.stage.addChild(dog2); app_2.stage.on('pointertap', function () { // change current skin console.log('wgt>!'); // dog1.stateData.setMix('head_l', 'neutral_breth', 0.4); // dog1.state.setAnimation(1, 'head_l', .04); // dog1.state.setAnimation(3, 'head_r', fal); var rand = getRandomInt(2); if (rand == 1) { dog2.state.setAnimation(3, 'head_l', false, 0); } else if (rand == 2) { dog2.state.setAnimation(3, 'head_r', false, 0); } else { dog2.state.setAnimation(3, 'fun', false, 0); } setTimeout(function () { dog2.state.setAnimation(4, 'blink', false, 0); }, getRandomInt(2000)); }); console.log(document.body); } }</script> I originally had 1 application with 2 dogs animated inside. I now split the application so each dog is separate dog 1 and dog 2. But I did not split it correctly, as the dogs do not appear anymore. What mistakes do you see in this code?
  11. Hello everyone After a long time i am back and with something for you maybe a banal issue but for me it's a nightmare . I am trying to make little adventure game and I have issue with my charakter.babylon... when i import him to the game without skeleton everything is ok but with skeleton is wrong everything, like some parts of his clothes is missing... the console is showing me endless error lines etc. I am struggling with this 1/2 weeks . I tried everything like remake my charakter.babylon and skeleton ....I treid google, youtube ... ect. Can you guys help me ? ... sorry for my bad english . I added a photo and a blende file helpblend.rar
  12. Animatable reset

    Hi, Wanted to ask why .animate was added to Animatable.reset function in 3.2? public reset(): void { var runtimeAnimations = this._runtimeAnimations; for (var index = 0; index < runtimeAnimations.length; index++) { runtimeAnimations[index].reset(); } // Reset to original value for (index = 0; index < runtimeAnimations.length; index++) { var animation = runtimeAnimations[index]; animation.animate(0, this.fromFrame, this.toFrame, false, this._speedRatio); } this._localDelayOffset = null; this._pausedDelay = null; } Is reset some sort of restart now ? could not find any info on documentation Thank you
  13. Hi, I try for a long time to create animations in Blender. In my case I have multiple meshes in one scene which mush have different independent animations. Bad result I get - both meshes share the same location/rotation/scale of their animations. PG demo: You can see that both meshes move and rotate together, like it is one mesh. However in Blender I try to make them independent, and inside Blender they really move like independent meshes - green box only rotates and red torus only moves. But when imported in BJS - they start to share position and rotation. I attach my .blend file here. I tried applying standard animations, tried Dope Sheet -> Action Editor to create different actions, but the same result. Is it possible to create different independent animations for different meshes in one scene? If yes - could you guide me step by step? Thanks! demo.blend
  14. Does anyone know if there's a reason why spatial audio doesn't work when animating a camera towards a mesh that has an audio source either attached or placed in the same position? My project has an Arc Camera parented to a mesh, which is then animated around a scene. I've set up end points where the camera parent will animate to, with the idea being as soon as it approaches the centre of the target position the spatial audio will kick in. However, in practice this doesn't appear to ever happen and in fact the only way I seem able to get it to work at all is if I manually zoom or move the arc camera past these audio zones. Any thoughts anyone?
  15. Hi there! How can i lerp animation from one frame to another like (from, to) with animationGroup?
  16. gltf animation skipping

    Hy guys!! My gltf model is skipping some frame so it's not animating smoothly as i want it to be
  17. Rotate WebVRFreeCam

    Hey guys, I got a question about the WebVrFreeCamera. How can I animate the rotation of a WebVrFreeCam? I would like to click on a button to direct the users gaze to something important. Hence the animation. THANK YOU FOR ANY TIP there is a code snippet:
  18. No problem with start end with frames frames: this.anims.generateFrameNumbers('horse',{start:0, end:3 } ), but when i try outputArray it doesnt work... (i have tried various syntaxes....) What is the right syntax? frames: this.anims.generateFrameNumbers('horse',{outputArray:[0,1,2,3,4] } )
  19. I want to make a tile based game. The tiles are animated, so I put tiles as AnimatedSprite 's inside a ParticleContainer. const allSpriteByPos =[i,j]) => { var tile = tileByIdx(i, j); var sp = animated(rFrames(tss, tile)); let fWidth = sp.width, fHeight = sp.height; sp.position.set(i * fWidth, j * fHeight); cbase.addChild(sp); return [i,j,sp]; }); Now I have trouble moving these tiles, while changing the animation. I set `textures` property for AnimatedSprite for every update: allSpriteByPos.forEach(([i,j,sp]) => { var tile = tileByIdx(i, j); sp._textures = rFrames(tss, tile); let fWidth = sp.width, fHeight = sp.height; sp.position.set(i * fWidth, j * fHeight); }); Here `rframes` returns the texture array for the animation. If I set the `textures` property every update, tiles don't animate. If I remove that line, the tiles do animate, without moving. So my question would be, how would I structure this code, so I would have my tiles mapped to animated sprites so I shall update both position and animation textures with regards to performance.
  20. Hi, I am trying to import an animated character from but without success. I am a developer, not a 3D Designer so I don't really understand what happening ^^ I go on, select a character and an animation (walking) I check "in place" animation", export with ".dae" extension, 24 frames/s, uniform key frames reduction, with skin, and finally download the the character (zip), I import the .dae in Blender, then export it with the BabylonJS exporter I go an error in log : can't export because of armature I read I just have to ctrl+A in Blender then scale => indeed, after that, the export is working, but it breaks the animation If I continue, load the .babylon in babylon I see the character loaded, with textures But... animation make absurd things, the character is not "moving in place" but totally go away It is not a direct Babylon problem : the problem is this "ctrl +A > scale" that breaks the animation. My question is simple : after imported the .dae in Blender, what I have to do to export it correctly, with animation, in .babylon format ? My goal is just to load ANY animated character in BabylonJS, ideally, a character moving, jumping, and crouching. That could be another question : how to get many animations from mixamo in a single export ? I understood we then just have to select frame index and play the good animation. So, loading few times the same character for different animation seems not very smart ^^ Thank you for your help
  21. Spine animation compatibility?

    I want to use Phaser3, but unfortunately I'm not sure if there's any way for it to utilize Spine Animation at runtime. Unless I'm wrong? Does anyone know if this is possible, and if not, are there any plans for this to be implemented? It makes little sense for a JS game engine of this caliber to not support a gamedev standard for beautiful 2D animation. Heck, even pixi.js does that.
  22. Good morining! From the API I believe animation is preloaded like so.... this.load.spritesheet('dude', 'src/games/firstgame/assets/dude.png', { frameWidth: 32, frameHeight: 48 } ); and then animated like so this.anims.create({ key: 'left', frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }), frameRate: 10, repeat: -1 }); However I would like to sometimes work off a list of .pngs eg face1.png, face2.png rather than a sprite sheet, how would I go about this via the animationManager, or would I have to manage it myself with a looping system of mine within the gameloop?
  23. Hi, I came across a problem where I couldn't have an animation behave as intended : Click on the plane (aka ground) to move the ball to clicked location. On animation end, the color of the ball randomly changes. The movement from point A to point B has a sort of easingFunction to it, and the onAnimationEnd is called much later after ball arrived. But I expected the animation easing to be linear by default ???, and the onAnimationEnd function be called right on time at "arrival" ??? If someone can shed some light on this for me, would be very cool ^^
  24. BUG:animationFrame is undefined

    Hi I get the following error message with Phaser 3.1.2 when trying to run the project from this tutorial:
  25. hey internet dudes So yeah, still working on this scene, although lately i've been on a different project so haven't been look at my issues with babylon for a little while. I've got this test scene set up here; From inspecting the html you'll see my super fantastic javascript code that is animating the helicopter (amongst other things). Some questions for the experts out there: 1) the helicopter has a brain fart at around 9 o'clock on the circular path it is following. Any idea why? It also has a very minor "course correction" at 3 o'clock. No idea why, is it my maths at fault here or something more fundamental? 2) if you click on the helicopter it does a little animation. Intention here was to blend the animations so that the user can interact with the object in a simple manner. Fundamentally it's working, but you'll notice the spin and bounce animations don't end exactly where the circular path is, and so often the helicopter "snaps" back in to position of the initial animation. This is probably a stupid question given the specifics of what i'm trying to do here but is there some technique I can use to ensure the end frame of the blended animation always ends perfectly so that the motion blends in to the original animation without snapping? Right now I'm having to hard code specific frame lengths and speeds and it's imprecise and a PITA, so I feel like there's got to be a better approach. My maths skills are awful though so if anyone can help that would be sweet. Cheers!