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

  1. Hello, I'm having a bit of trouble working out how I can dynamically change the animation speed, while still maintaining the current frame the animation is up to when I make the change. See demo here When the speed changes I would hope that the current frame was not affected, so I can ramp down to a period of slow motion then resume back to normal speed I suspect I might be mutating the wrong variable to change the speed, but I can't work out what might fix it
  2. Realtime rigging

    Is it possible to place a t-shirt over a rigged human mesh and transfer skeleton and weights of human to the t-shirt in Babylon.js? So then you can animate the t-shirt with the human I know you can do all this in Blender, but I'm wondering if it could be done in real-time using Babylon.js
  3. Hello, I used to go to a specific frame in an animation by launching this command : scene.beginAnimation(box1, 100, 100, true); There is now an error saying : Uncaught TypeError: Cannot read property 'frame' of undefined Is it possible to go to a specific timeframe another way ? Right now my solution is to be sure that the start and end frames are always differents. Would be cool to make it work like before if there is anything that could prevent it.
  4. Hi! My name is Nikolay and I can do pixel art animations for your games. Here's some examples:
  5. Hey! My name is Andrey! I'm an experienced 2d Game Artist and Animator. I make any types of game art and assets: characters, animations, gui, sfx, illustrations, tiles and backgrounds. This reel will tell you about my abilities better than any words: My site and old portfolio. Some of my new works you can find on my instagram and twitter. Sometimes I load assets to my gumroad. Now I'm opened for commissions and looking for a freelance task and outsource work. My email: My skype: murlyka.
  6. Sprite Movement

    Hey Guys, I'm currently moving my camera around a series of sprites but the movement is painful to look at and jerky when moving the sprites and especially with higher speeds, is there anything you can do to fix/help the lag/poor performance as it isn't really usable as a build in this current state. I also as @Wingnut said have the issue that the transparent background is still clickable. Here is my current playground: @Deltakosh @Wingnut @JohnK Any incites Guys?
  7. Hey Guys! I have a video demo of what my build, What i'm struggling with is how to make it seem flatter when panning from left to right and hiding the fact you can see the edges or the circle the sprites are positioned in and can tell they are coming round in a circle not across a flat image, which is the effect i'm after. Here is a youtube video of my current build, and a babylon playground with broken textures (sorry!) to view how i'm going about the build! Playground: Youtube:
  8. Hey guys, I'd like to know if there is a way to represent an animated polyline moving from point A to point B on a mountainous terrain. The idea would be to show a track like this: , you can see it in the demo video. I understand that this functionality does not exist in Babylon, and from what I've read, the Babylon.Ribbon only allows for vertices to change position but not for adding new vertices. But anyways, what would be the steps for me to implement it from scratch? Thanks!
  9. Hey guys... I got yet another one... I am currently using an animation to control a curve... List call that animPosition... I encode root transform positions into the animation and the animation updates the from the BabylonAnimationKey... I use this to move the character... works great except my logic for when the animation loops (even with relative cycle mode)... Basically if the animation controlling the animPosition rotates the chaterter 0 to 90 degrees... when the animation loops the values are the same as before it just loops to when replayed it SNAPS back to 0 and goes from 0 to 90... again... What I need is to offset so that when the animation loops a second time this values in the animation 'Contribute' to the move of the character movement so when looping that animation with the sample numbers again a second time will make go from 90 - 180 and so on... so that values coming from the root motion accumulated (I guess): My animation state machine exposes that 'animated animPosition' as rootPosition and calculates the delta from the lastPostion... and it is exposed as: getDeltaPosition... that little bit off delta position is then use to move the character... _chacter.move() really call physicsImposter.setLinearVelocity anyways this is how I am taking the 'delta from the last position and using that as movement: if (this._animator != null) { var deltaTime:number = this.manager.deltaTime; var deltaPosition:BABYLON.Vector3 = this._animator.getDeltaPosition(); var rootPosition:BABYLON.Vector3 = this._animator.getRootPosition(); if (this._character != null) { this._inputVelocity.x = (deltaPosition.x * this.moveSpeed) / deltaTime; this._inputVelocity.y = 0.0; this._inputVelocity.z = (deltaPosition.z * this.moveSpeed) / deltaTime; var jumped:boolean = (this.manager.getKeyInput(this.keyboardJump) || this.manager.getButtonInput(this.buttonJump)); if (jumped === true) this._inputVelocity.y = this.jumpForce; this._character.move(this._inputVelocity, jumped); } } that moves everything great UNTIL the animation loop that resets the main animPosition (that delta is calculated from) to the values in the animation at starting frame... lets say for simple sake that is facing forward with no rotation.. call it 0... when the animation stops its at 90... the loop reset back to zero INSTEAD of continuing to turn to 180 (which is what I want) I know that a mouth full But if can figure this last part out... I will have root motion working for BabylonJS... Note: If anybody wants to help with issue (Animation State) or any of the other small issues I have outstanding... LET ME KNOW... I will send you a copy of the BabylonJS Toolkit Version 3.1 Beta and we can work together... I would love to be able to work with (and actually talk to) someone... We can GOTOMeeting and show each other code pieces and work on it together.... Outstanding Issues: - Animation System (including Blend Trees if can be done in BabylonJS) - Terrain System... Need to be able to use a Texture Atlas in GLSL Shader... right now the only way I know is to use 'fract' call... but that LEAVES EDGE SEEMS - LDR Skyboxes - you can't really use a HDR for the whole sky... (maybe for just HDR reflections which should be a MUCH smaller scaled down version of a full panorama HDR file)... So I created a HDR to LDR Tone Mapping Tool... To use it I need a babylonLDRCubeTexture.ts to be create that work like HDRCubeTexture EXPECT use the ALREDY encoded LDR Tone Mapped pixels as a JPG or PNG. Particle System - Fine tune my ShurikenParticleSystem class I created to give a Shurken time based particle system ike the used in Unity... I got everything going except some 'Update-Over-Time' functionally I need to give additional 'Velocity' to the 'AGED' particle over time... NOT just adjust the 'EMITTER POWER' which starts the particle on it way... but use a curve to control the velocity of the particle over time... I think it uses a property called 'Age' for that... So let say 5 seconds into the particle system playing I was to start giving a velocity that might adjust a partialce that Is going start up... to start going left... But not at the emitter... once the particle has left the emitter and is 5 sec into its life... or what ever the curve is keyed to. Anyways... Let me know if anybody can help with those outstanding issues I need to clear up before release the version 3.1 of the BabylonJS Toolkit
  10. Hi I'm a newbie of BJS, when i try the particle system, after set the particle texture, how to animation it? I used the texture as below: Thanks for any assistance!
  11. Blending Speed

    Yo @Deltakosh .. Just cause I like to tag you into everything In Unity Animator, they have transition that they use to switch states and play other animation clips... in the the transition properties they have transition speed: Transition Duration The duration of the transition, in normalized time, relative to the current state’s duration. This is visualized in the transition graph as the portion between the two blue markers. Transition Offset The offset of the time to begin playing in the destination state which is transitioned to. For example, a value of 0.5 means the target state begins playing at 50% of the way through its own timeline. Now would we use 'animation.blendingSpeed' to handle that ??? I finally figured out how to get to ALL the UNITY Animation State Machine properties to serialize all the states, events, transitions and blend tree metadata from ALL layers and including any nested sub-state machines... Now I can start to implement a state machine on the Babylon side... I already got gerbil animation clip and animation event working great... Nut would like to get transitions working next... My logic is going be something like 1... Get transition info (metadata) from the state about to be switched to (which has destinationState) 2... If transition.destinationState === self then playAnimationClip with LOOPING 3... If transition.destinationState !== "" playAnimationClip(onAnimationEnd--->switch To transition.destinationState) and start whole thing over... 4... Check state parameters and conditions in update loop to switch state which also starts whole thing over...Of course taking into account 'interruptions' and what ever else comes up but that would be a simple to start to Anyways... I need to to control the 'Transition Time' like in Unity to Keep in spirit with and use the actual time from the the little GIZMO unity uses to setup transitions Then I will try and tackle 'Blend Trees'
  12. Hi, An interpretation of Picasso's Guernica; my tribute to you Frenchmen! Press "Start Animation".
  13. How to use Spriter in Phaser

    How to use spriter in phaser/javascript, and how to export it?
  14. Animation Question

    Hey Everyone! Still working with my same project looking at the depth perspectives and minor animations, I'm either looking for a page which is better structured than babylons own help page - Find it very unhelpful and vague personally, or some suggestions from everyone on here. I am looking to see if i can create the animation affect to give a sense of depth to the build, the best online example effect of what I mean is here: - You can see as you go across the team, you are able to see the effect i'm trying to describe and aspire to build, as you look for example at Pharrell Williams sat on the stool and the tall guy with glasses behind him, as you go from the leftmost view to rightmost. If anyone can help me with this I would be very appreciative. as I am currently struggling to find a start point, I will attach a playground of my current project to see what I currently have running and if possible could even demo the effect i'm after using it would be great! Please note that the FOV I wish to use is 0.30, but is set to 1 in the example as the texture error boxes are rather big. Playground: Thanks everyone! Mezz
  15. Hi Guys, I'm currently making a game and I've run into a bit of an issue with one of the states that is loading multiple animations. There are 5 animations in total that play as soon as the state loads. They also loop. The problem that I'm having is that the state with the animations is taking around 5+ seconds to load, even though the spritesheets have been loaded in the Preload State. I feel this might be because the animations are being set so 60 FPS. I would prefer it if I could add this extra loading time to the Preload State if possible (because it has a loading bar) so I was wondering if there is a way to create the animations in a previous state and then have them play instantly on the page I need them to. Any help would be appreciated.
  16. Issue with sprite animation

    Hello, I am doing a simple Platformer game with Phaser, for learning purposes. I have a sprite that is 2 columns x 2 rows (see attached image), with the upper-left image being the "idle" status. And I put this code in my player prefab file: this.animations.add("idle", [0]); this.animations.add("jump", [1]); this.landAnimation = this.animations.add("land", [0]); this.animations.add("run", [1,2,3]); The problem is that my "idle" status is going to repeat frames 1,2,3 instead, again and again, as if the character is moving, and the other statuses are all [0] (what I wanted for "idle"). The result is always the same, whatever numbers I put into the arrays. I am a bit stuck, and cannot figure out where the problem is... Any help or ideas should be greatly appreciated. Thanks.
  17. Sprite Manager

    Hello! I am looking at around 40 sprites which are actually being replaced with HD Images, I was wandering if there are ways to animate or any alternative solution as i'm struggling to find a solution to the lag and drop in frames currently which makes it look bad, I will insert a playground here with my current working version, but the main issue being the playground doesn't lag as it won't be loading my images and the size and scale of my images is far higher than the can't load texture issue. Secondarily, if anyone could tell me how to add a small amount of movement to look up and down but I want to prevent the camera looking more than 10/20 degrees above or below the mid point to keep it focused. The example mouse movement camera rotation and general project i'm using as inspiration can be found here:
  18. Hi Everyone, I'm trying to do something like this: Load a .babylon scene using SceneLoader.Load. This scene has a skinned mesh and an idle animation. Then, I want to load a second .babylon file using SceneLoader.ImportMesh. This file has multiple LODs so I only want one of them (hence the ImportMesh) and has no animation. The mesh is also skinned using the same number of bones as the first. When I load this, I replace the Skeleton on the imported mesh with the one from the main scene so that it animates. However, here's the rub. The first frame of the idle animation has the arms down by the side of the character but the second skin has the arms in the typical T-Pose. When it's animating, the arms are adjusted but relative to the T-Pose and not the first frame of the anim. I *think* this is because something isn't correctly getting configured for the skin bind pose. I've tried all sorts of things to correct the problem so if anyone has any ideas or insight, it would be most welcome! Thanks, Roc
  19. Hi, i'm facing a issue animating a char with spritesheet. I'm trying to animate a character with up/left/down/right animation. I'm using this one : Here's my code : Left and right moves work well, the error appears when using "up" moves, the character does not start animating with the good frame (i want it to start with first column 6 rows), instead it starts with 7 cols 6 rows ). Maybe i dont understand how case numbers work xith multiples rows spritesheets. By the way, i'm very new to Phaser, i'm up to hear advices if there's a better way to do this. Here's the first frame of up move. Thanks
  20. Hi there! I've been busy working on a modification to the Blender exporter and Babylon in an effort to support smooth interpolation natively, based on FCurve handles, as opposed to having to bake every frame of every animation prior to export, which can be rather time and space-consuming. So far, I have a system which works fairly well, feeding the "right handle" offset of each keyframe to Babylon which then packs that information into the inTangent and outTangent properties of each imported keyframe. This has smoothed out my animations considerably, but it's not a 1:1 reproduction, and I feel like I could do more. inTangent and outTangent data is currently fed to Babylon's Hermite interpolation equation, which is certainly better than the Linear default, but still not as sweet as it would be if it used Bezier just as Blender does. Unfortunately, my Bezier kung-fu is weak, and making the translation from X/Y handle coordinates to Bezier coordinates for each axis is confusing me. So, in summary, I'm now able to import the key and handle coordinates for each frame in Blender animations. I'm just having some trouble figuring out how to translate those into a contiguous Bezier curve at the time of animation. I'm familiar with the vector3InterpolateFunctionWithTangents() function, but inTangent and outTangent data doesn't seem to be enough for a full Bezier calculation. I could add more easily enough; I'm just a little fuzzy on how to go about it, and my experiments so far have resulted in some pretty crazy animations. Any thoughts? I would love to be able to wrap this up into a nice and tidy pull request.
  21. Hello all, Just wanted to let you know the Creature Animation Runtimes have been updated for Pixi.js: The new updates also involve support for the latest features, including Skin/Item Swapping, Anchor Points etc : Here is a short trailer of what Creature Animation Results look like: Cheers
  22. Hello all, Just wanted to let you know the Creature Animation Runtimes have been updated to work with Phaser 2.8 CE: The new updates also involve support for the latest features, including Skin/Item Swapping, Anchor Points etc : Here is a short trailer of what Creature Animation Results look like: Cheers
  23. First of all I'd like to say that Phaser 3 seems very nice, flexible and lightweight. I got it to work but I get two errors in the console when I create a new Phaser game (I use the newly released alpha version): Uncaught TypeError: Cannot read property 'createTexture' of null at new TextureSource (TextureSource.js:119) at new Texture (Texture.js:58) at TextureManager.create (TextureManager.js:252) at Image.image.onload (TextureManager.js:45) Edit: this is in Chrome. In FF the error is: TypeError: game.renderer is null TextureSource Texture create addBase64/image.onload This is the config: var config = { type: Phaser.WEBGL, width: 800, height: 600, backgroundColor: '#bfcc00', parent: 'content', scene: { preload: preload, create: create, update: update } }; It happens when this line is run: var game = new Phaser.Game(config); Though the errors doesn't seem to do anything. Now onto the animation part, I have two pieces of feedback. 1. I tried to create a simple animation from a spritesheet. It is a standard sheet with four walk animations, every animation has three frames which should be run like 0, 1, 2, 1 in a loop. My problem was that I cant find a way to make that happen. When I use generateFrameNumbers it runs frames 0, 1, 2, 0, 1, 2. Which is of course the intention. I use this code: var config = { key: 'walkDown', frames: this.anims.generateFrameNumbers('playerSheet', { start: 0, end: 2 }), frameRate: 8, repeat: -1 }; So what I would like to see is either a function so I can tell it to use frames [0, 1, 2, 1] or maybe an example on how to create some object that does that. I'm not so good at JS yet but I think that the frames property need such an object and that is what generateFrameNumbers return. Basically I just want to tell an animation what frames in a spritesheet to use, just like you can do in Phaser 2.x. Like this: this.player.animations.add('walkDown', [0, 1, 2, 1]); 2. To make the animation repeat I have to set repeat: -1. I found that to be very odd and unintuitive. I would have expected it to be 1 for repeat and 0 for non-repeat. Keep up the good work.
  24. Animate showing all three panels

    Hi, I think that I have typed my code in correctly, but when I try to play the game all three panels of my sprite animation show. Can someone please tell me what I am doing wrong? I am stuck! Thank you so much in advance!! var GameState={ preload:function(){ this.load.image('background', 'background.png'); this.load.image('arrow', 'arrow.png'); /*this.load.image('chicken', 'chicken.png'); this.load.image('horse','horse.png'); this.load.image('pig', 'pig.png'); this.load.image('sheep','sheep3.png');*/ this.load.image('chicken','chicken_spritesheet.png', 131,200,3); this.load.image('horse', 'horse_spritesheet.png', 212, 200, 3); this.load.image('pig', 'pig_spritesheet.png', 297,200,3); this.load.image('sheep', 'sheep_spritesheet.png', 244,200,3); }, create: function() { //scaling options this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; //have the game centered horizontally this.scale.pageAlignHorizontally = true; this.scale.pageAlignVertically = true; //create a sprite for the background this.background =, 0, 'background') //group for animals var animalData=[ {key:'chicken', text:'CHICKEN'}, {key:'horse', text:'HORSE'}, {key:'pig', text:'PIG'}, {key:'sheep', text:'SHEEP'}, ];; var self= this; var animal; animalData.forEach(function(element){ animal = self.animals.create(-1000,, element.key, 0); animal.customParams={text:element.key}; animal.anchor.setTo(0.5); //animal animation animal.animations.add('animate', [0, 1, 2, 1, 0, 1], 3, false); animal.inputEnabled=true; animal.input.pixelPerfectClick=true;,self); });; this.currentAnimal.position.set(,; //left arrow this.leftArrow =,, 'arrow'); this.leftArrow.anchor.setTo(0.5); this.leftArrow.scale.x = -1; this.leftArrow.customParams = {direction: -1}; //left arrow allow user input this.leftArrow.inputEnabled = true; this.leftArrow.input.pixelPerfectClick = true;, this); //right arrow this.rightArrow =,, 'arrow'); this.rightArrow.anchor.setTo(0.5); this.rightArrow.customParams = {direction: 1}; //right arrow user input this.rightArrow.inputEnabled = true; this.rightArrow.input.pixelPerfectClick = true;, this); }, //this is executed multiple times per second update: function() { }, animateAnimal: function(sprite, event) {'animate'); }, switchAnimal: function(sprite, event) { if(this.isMoving){ return false; } this.isMoving=true; var newAnimal, endX; if(sprite.customParams.direction >0){ newAnimal=; newAnimal.x = -newAnimal.width/2; endX= 640 +this.currentAnimal.width/2; }else{ newAnimal=this.animals.previous(); newAnimal.x= 640 + newAnimal.width/2; endX= -this.currentAnimal.width/2; } var newAnimalMovement =;{x:}, 1000); newAnimalMovement.onComplete.add(function(){ this.isMoving=false; }, this); newAnimalMovement.start(); var currentAnimalMovement=;{x:endX}, 1000); currentAnimalMovement.start(); this.currentAnimal = newAnimal; } }; //initiate the Phaser framework var game = new Phaser.Game(640, 360, Phaser.AUTO); game.state.add('GameState', GameState); game.state.start('GameState');
  25. Hello everyone, I am making a spaceship game. When a player ship shoots at another ship I am already calculating if it is a hit/miss. I am not going to use any collisions, its just a calculation. Given this, I would like to a bullet tracer (probably a polygon). It will be going very fast, so its more of a visual indication rather than any physics involved. The bullet will just move from the gun vec3 to the target vec3. Rather than building a system to track each bullet type and its position and progression, I would I would use the inbuilt animation system as it seems like a good 'fire and forget' system for this type of thing. Is this a wise decision, is it an expensive (CPU) system if there are many animations present? I also saw I can pickup on an end-frame event. Is it wise to destroy the mesh and attached animation when it gets to the end-frame? Thanks