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

  1. 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
  2. Hi, wanted to discuss behaviour of animation stop and onAnimationEnd callback. Right now it is called on 2 scenarios if your animation played through or you stoped animation. Should we have some boolean that indicated if onAnimationEnd should be called if animation is stopped? Or everyone is ok that callback is triggered always? Had some weird issues till found that out
  3. Hi, An interpretation of Picasso's Guernica; my tribute to you Frenchmen! Press "Start Animation".
  4. Hi there! I'm new to the community, and also to Blender and Babylon.js. I made my first model in Blender v 2.78 (a basic creature, humanoid type), rigged it and animated a simple walk movement (or a half one, right foot forward, left foot back). I baked my IKs, then exported the whole animation and mesh with the babylon exporter (v. 4.6.1). When I import the animation in Babylon it gets distorted. When the arms and legs goes forward/backward, they move too much upwards. I attached the .blend file, and i have a working online demo also: It is password protected: thyalie:iso88591 First of all, I want to find out that the babylon settings cause this, or the blender exporter, or i did something wrong in blender (this last seems the most likely, but i dont know what i missed). Thanks for helping in advance! cube.blend cube_baked.blend
  5. Found an issue with Animation/AnimationEvent where an event set for an earlier frame is immediately triggered when playing the animation starting at a later frame. Here's a playground example of the problem (you'll need to open your JS console): Edit: Taking a look at the code, I can already see the problem. I'll see if I can't whip this one myself.
  6. hello, I need your help guy, i would create an animation with my character. When i push left click (mouse), the animation start but she is infinite. How stop my animation? my code: create: function() { this.player.animations.add('atk', [529, 532, 535, 538, 541], 10);, this); }, atk: function(){ this.atkBool = true; }, update(){ if ( && this.atkBool == true){ var anim ='atk'); } I want just 1 loop so stop animation after my "541" frames. Sorry for my english langage. I hope you can help me. Good day
  7. I have a Blender file with some meshes with Actions assigned to them. I'm exporting it using version 5.3.-1 of the Babylon.JS exporter and loading the resulting .babylon file with Scene.ImportMesh. There are no bones in this scene; all animations are applied directly to meshes. I can trigger my animations without issue; everything behaves as expected (more or less). However, after loading the file, the orientation and positions of all of my animated meshes begin at the final frame of their Actions, as opposed to frame 0, as I would expect. My first thought was that the animations were playing automatically upon loading. I scoured the forums here and discovered the autoAnimate flag. I opened my .babylon file, but no such flag was present. I re-exported and checked autoAnimate intentionally, opened the .babylon file again, and explicitly set each autoAnimate flag to false. No effect. Next, I set breakpoints at all relevant beginAnimation functions in my babylon.js, but none were triggered. As far as I can tell, none of these animations are being automatically played, yet the problem persists. Any thoughts? I can work around this issue by making sure that the keyframes at the first and final frames of my Actions are exactly the same (and simply not play that final frame), but it seems there might be a bug in play here.
  8. Hey everyone, So Im new to game development, although Im a full stack JS dev for general sites and apps. I started getting into canvas animation and now Im here trying to learn some game animation stuff. My question is this: Do you generally do just about all animation in the game loop with requestAnimationFrame()? Or can you simply have renderer.render(stage) called in the game loop while outside of it you use GSAP or some other tweening mechanic to change the positioning props on objects/sprites? Iv tried it and it works, I just would like to know if its dumb or nonperformant. I also tried using my regular js tweening library to call `renderer.render(stage);` in its update callback and it looks the same (im just doing a simple animation generating snow-like particles that float down). I know that the supported game loop in PIXI has stuff for velocity and whatever but I really like my animation library's ( easing and elasticity options. Will calling renderer.render(stage) in the game loop while tweening outside the loop still be 60FPS? Or do I need to be updating in the game loop? If I have to do it in the game loop, does anyone have any tips/references for easing and all of that? Because I dont want to have to write my own easing functions to update in the game loop (and I suspect most people arent), and rather use an animation API for that. Im also brand new to PIXI and maybe it has its own easing and whatever that works inside the game loop. Cheers
  9. Does the Blender exporting process still require de-parenting rig from mesh, resizing and rotating, then parenting back again? When I do that it messes up my weights so I'm wondering if there's a better way yet.
  10. Hy guys my first post here: Is it possible in threejs to start a rigged model animation with a function like playAnimation(from frame 1, to frame 4, loop, etc)
  11. Hello there, I'm new to phaser and the first thing I had a minor quip with was the way animation calls were handled (they look messy and unorganized). I have experience coding in engines such as Vylocity ( ) where icon states are handled and managed by the direction the player/npc has chosen to go in. A player is set with an icon "state" which is a specific type of animation, each with its own directional states spit up (with the same number of states for each direction). This state references a file that is icons from a number to a number that those states are bound to. Here is an example of how the icon file looks, and i was wondering if there'd be an easy way to split up these images manually in code by specifying where each direction is, and then storing the file that they are referenced to as a string that would then be called. Then to set a character's animation, you would call this function that assigned the animation to it, grab the direction, and select the chosen section of the png file that contained that character's movement state. Maybe if I were to reorganize the icon file into something a bit easier for the engine to keep track of it wouldn't end up messy code-wise, especially when I needed to edit something. I could just split up each character direction into it's own file - the initial state would be for inactive movement while facing that direction, while the rest of the states would play while moving (e.g. while the key is being held) Can I get some idea on how I'd go about coding this. or if there already exists a library that simplifys animation calls.
  12. Hi, I'm trying to import meshes with multiple animations (from Blender). Is there any description of correct workflow on how to make Babylon compatible animations in Blender? Single animation works nicely when you just manually fix scaling and rotation problems. But no matter how you append more animations into one Blender file it seems to me that transformations get messed up in export process. I've tried using Action Library and Pose Library, but both strategies produce weird twisting and morphing of the mesh. The result does somewhat resemble the intended animation, but it's hard to say what exactly goes wrong. Of course obvious workaround is to put every animation in separate file but that quickly makes download sizes unpractical (several 100 MBs).
  13. Hi, I have animation of camera target (works only if some other property like alpha is animated at the same time) PG. If I switch tabs and wait a bit and come back to playground, alpha animation jumps to last frame as expected but target is moved to correct position but focus of camera stacks at last target positon before tab swicth. probably related to the same issue described here:
  14. 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...
  15. Hi all, I want to put together a little snake game to teach myself PixiJs. What I'm trying to achieve is a smooth gliding effect when moving this block around. (press left/right to start moving). Unfortunately, I simply cannot get rid of the occasional 'stuttering' when rendering - so I'm starting to think I might be going about it the wrong way. Could somebody tell me what I'm doing wrong here? see: fiddle const graphics = new PIXI.Graphics(); const app = new PIXI.Application(); const movementSpeed = 150; const stage = app.stage; const blocks = []; stage.addChild(graphics); class Block { constructor(position=[0, 0], direction=[0, 0]) { this.width = 20; this.position = position; this.prevPosition = position; this.direction = direction; } render (alpha = 0) { let offsetX = (this.position[0] * alpha) + (this.prevPosition[0] * (1 - alpha)); let offsetY = (this.position[1] * alpha) + (this.prevPosition[1] * (1 - alpha)); graphics.drawRect(offsetX, offsetY, this.width, this.width); } update (delta = 0) { this.prevPosition = this.position; this.position = this.calculateNewPosition(delta); } calculateNewPosition (delta) { let movementOffset = movementSpeed * (delta / 1000); return [ this.position[0] + (movementOffset * this.direction[0]), this.position[1] + (movementOffset * this.direction[1]) ]; } }; function render (delta) { graphics.clear(); graphics.beginFill(0xFF0000); blocks.forEach((block) => block.render(delta)); graphics.endFill(); }; function update (delta) { blocks.forEach((block) => block.update(delta)); }; function changeDirection (direction) { blocks.forEach((block) => { block.direction = direction }); } const fps = 30; // Frames per second const frameDuration = 1000 / fps; // Maximum time per frame. const maxFrameDelta = 1000; // Upper limit on how long the frame takes to render. let previousTimestamp = 0; // Last timestamp. let accumulator = 0; // Remainder of time that we could not simulate in our fixed-step physics. (used to smooth out temporal aliasing) function gameLoop(timestamp = 0) { requestAnimationFrame(gameLoop); //Calculate the time that has elapsed since the last frame let frameDelta = timestamp - previousTimestamp; //Optionally correct any unexpected huge gaps in the elapsed time if (frameDelta > maxFrameDelta) elapsed = maxFrameDelta; //Add the elapsed time to the accumulator accumulator += frameDelta; //Update the physics simulation in discrete chunks, and keep whatever remainder is left in the accumulator. while (accumulator >= frameDuration) { //Update the physics simulation update(frameDuration); accumulator -= frameDuration; } // After performing the physics steps, we might have some remaining time in the accumulator. // This causes 'stuttering' (temporal aliasing), so we interpolate where the block should be rendered. // That is: we don't draw the block exactly where the physics simulation has placed it, but where it should be to get the smoothest animation. // (Thank you Glenn Fiedler!) let renderOffset = accumulator / frameDuration; render(renderOffset); previousTimestamp = timestamp; } function initStage() { document.body.appendChild(app.view); blocks.push(new Block()); // Keyboard input. document.addEventListener('keydown', function(event) { if(event.keyCode == 37) { changeDirection([-1, 0]); } else if(event.keyCode == 39) { changeDirection([1, 0]); } }); gameLoop(); }; document.addEventListener("DOMContentLoaded", initStage);
  16. I have 29 different images named "ocean-0" to "ocean-28" that I preload using game.load.image(). I'm trying to make an animation with them using the following: var frames = Phaser.Animation.generateFrameNames('ocean-', 0, 28); this.water.animations.add('ocean', frames, 10, true);'ocean', 10, true); However I get this error: TypeError: this.currentFrame is undefined[Learn More] What am I doing wrong?
  17. Hi All, I'm new here, So first of all, Kudos to all working in BJS. I'm impressed. And Kudos to the community, as I can see it is a very active community. Coming to my problem, I have a babylon file, which contains a set of meshes, each having its own key-framed animations. After a lot of trial and error, I could animate them using scene.beginAnimation(mesh, 1, 100, false, 0.6, function() {}); And Iam not sure what values I need to give for speedratio, I tried with 1 and couple of other numbers and right now on 0.6. Yay ! now it is working. It Played. Now I have two problems or worries, 1. I had to cycle through a loop to animate the each of these meshes found inside this file, while I have attached them all into one parent (empty) node, so that I thought if I can say BeginAnimation on that mesh, the rest of the child will play the keyframes... but nothing happened... so I had to end up cycling through the whole set of meshes in the scene and animate them if the the names match. 2. Now I tried to reverse the animation cycle, to play it backwards, all it does is jumps back to the first frame. I tried different way, I gave different combinations like below, changed from as 100, and to as 1, changed speedratio as -0.6, but no effect. scene.beginAnimation(mesh, 100, 1, false, -0.6, function() {} ); looking for some enlightenment on both of these. Thanks and Keep up the good work.
  18. Hi, I have animation that plays only part of it , PG, if loop type is BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT and loop is false box stops at the frame and than jumps to end of animation, but if loop is true it stops at correct frame. BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE works as expected. Is it desired behaviour for BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT ?
  19. Hello, I'm having an issue with the tween. For example a card flip. this.cardChoice = game.add.sprite(213, 255, 'normal_cards', 'back_card'); this.cardChoice.anchor.setTo(0.5, 0.5); this.cardChoice.scale.setTo(0.84, 0.80); this.cardChoice.scale.setTo(0.84, 0.80); public cardFlip() { this.tweenPCard = { x: 0 }, 200, 'Quart.easeOut'); this.tweenPCard.start(); this.tweenPCard.onComplete.add(this.choiceCardFlip, this); } public choiceCardFlip() { this.tweenChoice = { x: 0.84 }, 200, 'Quart.easeOut'); this.tweenChoice.start(); } In the first few plays the tween is good but after several plays the card is not flipping and it's like the this.tweenCard = { x: 0 }, 200, 'Quart.easeOut'); is disappearing. Thanks.
  20. Say I wanted to do a frame animation for a pixel art object. where it Glows and the glow effect expands around the core of the object. (Like a light turning on). I have collisions set on this object, so obviously I don't want the hitbox to expand based on the glow frames I'm adding. How would you guys suggest I manage this in pixi? I thought about adding an entirely separate container just to handle effects animations. But that sounds like it might be a headache to manage with my code, and like it might be taxing on the system. Thanks!
  21. I'll be participating in a game jam in a month or so, and was hoping to use Babylon.js. However, I'm finding the workflow... less than optimal. I'd like to able to use models and animations both from online resources and created my 3D artists on the day. The most common format appears to be fbx, which sadly is not supported by Babylon. So additional steps are required to convert to the .babylon format (with the use of yet another program, be it Blender or Unity). This is just too time consuming, arduous and error prone. A specific example: model appears inside-out and no way to switch facing between back, front and front_and_back. I know Babylon is planning to support glTF, but the standard for glTF 2.0 has only just been finalised and is not presently supported widely. I would strongly recommend the support of .fbx if for nothing more than access to the existing library of assets. So, questions: Is there a way of streamlining the workflow? There are many great looking demos available. What pipeline did they use? What format were the assets?
  22. Hi there, Can anyone here point me in the direction of a Live2D tutorial or library that would work with Phaser? This seems like an interesting concept and I have not seen anyone try this yet to my knowledge. Thanks in advance!
  23. I have a mesh imported from .babylon file, and it has its animations. I put MeshImpostor in, expecting it to update with the animation, but it's not. It seems like it uses the first frame as the reference to the collision detection. Is there any way to update it? Code is something like this: var mesh = scene.meshes[0]; mesh.physicsImpostor = new BABYLON.PhysicsImpostor(mesh, BABYLON.PhysicsImpostor.MeshImpostor); //I tried to force it update it too, but doesn't seem to work. function update() { mesh.physicsImpostor.forceUpdate(); }
  24. Hi, I have rotating platform and target on it that rotates together with it. Also there is player that has jump animation, so I want to calculate when I need to jump to land on target. I created naive implementation in this PG. It works fine if FPS is above animation FPS (25), but I as soon FPS drops player starts to miss target. (Added function to generate knots and added performance CPU throttle on chrome 20x); Probably because interpolation that I need to include un calculation. Is it even possible to predict where will be target after jump animation is completed? Any suggestions are welcome
  25. Hi, What I am trying to do here is a bit too complex to simulate it in a playground. I hope i can explain it. I have a mesh that was build from raw vertices and polygon data. I have added the bones weights and indices. I am sure these two arrays are fine, they come from the same original model as the vertices and polygons. I have checked this too. // The code to add the indices and weights to the mesh base_model.mesh.setVerticesData(BABYLON.VertexBuffer.MatricesIndicesKind, base_model.bonesIndices, true); base_model.mesh.setVerticesData(BABYLON.VertexBuffer.MatricesWeightsKind, base_model.bonesWeights, true); I then load a skeleton - also from the same origin, so the bones indices match those in the indices array. The skeleton is attached to the mesh. When I rotate bone #0, the entire mesh rotates accordingly. No surprises there, and to me this is proof that the weights and indices are effective. when I scale the bones, parts of the body also scale. Now, when I rotate bone#1- upper leg -, nothing at all happens. And nor does rotating the other bones have any effect. //The rotation command I use: rig.bones[1].rotate(BABYLON.Axis.X, .01, BABYLON.Space.WORLD, base_model.mesh); screenshot #1: you can see the bone rotates, but the mesh does nothing. screenshot #2: this is the original model, that does rotate the leg with the bone. screenshot #3: rotating bone #0 rotates the entire model. I know I am doing something strange here, but I assure you it is necessary to the application I am working on. I hope any of you have some suggestions where to look for an answer.