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

  1. If I hard code an enemy... var enemyData = { health: 20, attack: 40, animationFrames: [1, 2, 3, 4, 3, 2, 1] } ... it animates fine through the enemy prefab. But if I load an object with the same properties from a Tiled map - IT WONT WORK! I know to convert the strings to numbers with: =; But when I have an array, it doesn't seem to work
  2. Hi! My name is Andrey! I'm an experienced 2d Game Artist and Animator. I make any types of game art: characters, animations, gui, sfx, illustrations, assets and backgrounds. This reel will tell you about my abilities better than any words: My site and old portfolio. Sometimes I load assets to my gumroad. Now I'm looking for freelance and outsource work My email: My skype: murlyka.
  3. Hello everyone, I am working on a game project using BabylonJS (thank you for your hardwork on this amazing framework!) and using Blender to create model. I've been following this guy to create model and animation for my character: After I was done and ran the animation in BabylonJS, the model was fucked up and stretched everywhere unlike in Blender. I've looked for a lot of similar questions in the forum but still can't solve it (set LocRot, scale to 1, loc and rot to 0,...). Can you guys help me figure out what is wrong with the blender file? Blender file: Babylon file: This is the model from the guy above, if you can find the problem with this file, I can fix it on my (terrible) model too. You can drop the babylon file in sandbox to see the problem since I checked the autolaunch animation box. Thank you all! P/S: The file doesn't come with a texture sorry, it's not really important though.
  4. Hi, some time ago i started learn babylonJS, which some experience in phaser I made this: And now i have two problem to resolve: 1. Animation of walk of character stretching char - you can check it using keys WASD. 2. Mesh character have bones. I think about bone right hand, when i use function attachToBone sword has been attached in different position than bone. Thanks for help Tom
  5. Hello, I'm trying to add animations to a class which is extending Phaser.Sprite export class PlayerEntity extends Phaser.Sprite { constructor(game: Phaser.Game, x: number, y: number) { super(game, x, y);, y, "player"); // Error this.animations.add("down", [0, 1, 2, 3], 10, true); this.animations.add("left", [8, 9, 10], 11, true); this.animations.add("right", [4, 5, 6, 7], 10, true); this.animations.add("up", [12, 13, 14, 15], 10, true);"down", 4, true);; } } Stacktrace: Uncaught TypeError: Cannot read property 'getFrameIndexes' of null at c.AnimationManager.add (phaser.min.js:19) at new PlayerEntity (:9000/js/entity/playerentity.js:18) at l.CreatePlayer (:9000/js/entity/entityfactory.js:5) at Level01.create (:9000/js/level/level01.js:20) at LevelController.create (:9000/js/level/controller.js:15) at WorldController.create (:9000/js/world/controller.js:27) at c.StateManager.loadComplete (phaser.min.js:10) at c.Loader.finishedLoading (phaser.min.js:20) at c.Loader.processLoadQueue (phaser.min.js:20) at c.Loader.asyncComplete (phaser.min.js:20) So "this.animations.add..." is the problem.; Doesn't have any effect. Thanks for reading and any help is appreciated!
  6. Hi together, In the attached picture you see a part of a roll printing machine. The brown rolls should "print" on the white plane: the white plane is moving and the rolls are rotating. Each printing roll is independent and can print another texture. Here is a good video showing the functionality: youtube link As an example: - roll 1 is printing "TE" in red color - roll 2 is printing "XT" in blue color I have absolutely no idea how to do this... Maybe with animating textures (different texture for each roll, positioning along x-axis) and masks, so you can only see it after the roll? But the user decides when which roll prints, so there can be gaps after the roll. Is this even possible? Please ask if anything is unclear. Hopefully some of you have an answer. Best, Steffen
  7. Hello guys, I need you help. Do you know how to do a ribbon animation on PIXI.js? B I saw a lot of example on CSS3, but no example on pixi. Maybe I search in a wrong way. But I need 2D version, not a 3D Thank you for any feedback
  8. down votefavorite I keep having a problem with animations in my code. I try playing an animation and i always get the same message: "Uncaught TypeError: Cannot read property 'index' of undefined" and it always points to the same line of my code which is:'left'); Im not sure what is going wrong with it Heres my player sprite part of my create function: this.cursors =; this.player =, 10, 'player');; this.player.scale.setTo(.4,.4); //the camera will follow the player in the world; this.player.animations.add('left', [0, 1, 2, 3, 4, 5, 6], 10, true, false); this.player.animations.add('right', [11, 12, 13, 14, 15, 16, 17], 10, true, false); My temporary update function: update: function() { if (this.cursors.left.isDown) { // Move to the left this.player.body.velocity.x = -150;'left'); } else if (this.cursors.right.isDown) { // Move to the right this.player.body.velocity.x = 150;'right'); } else { // Stand still this.player.animations.stop(); this.player.frame = 4; } // Allow the player to jump if they are touching the ground. if (this.cursors.up.isDown && player.body.touching.down) { this.player.body.velocity.y = -350; } }
  9. Hi to all. There really isn't any issue here; as exporting animations to babylon from blender works fine, except for the "4 bone influencers per vertex" limitation. I understand that it is a browser thing: My question is sort of strange, but I'll ask it anyways. I have no idea how to rig following this limitation in blender. How would one go about ensuring that this limit is not exceeded? Sure importing a MakeHUman model with the gaming rig, 32 bones I think, enabled would work, but when of the times when one is not rigging humanoid characters? Like sea monsters? Or giant insects? or something like that? And even if one is rigging a humanoid character, what of when the MH rig just doesn't do what you'd want and you have to do your own rig? So how would one make rigs ensuring that that limit is not exceeded? Any pointers on how to go about this would be appreciated. I also have one other question, would it possible to have babylon.js come with something like a visual editor for rigging? You import your static models and then rig them using it; it should guide the rigging process so that this "4 bone influencers per vertex" thing is not exceeded. (Please don't tell me to build it myself! ; at least not now!) Those are my questions. I attached a picture showing what happens when the limit is exceeded; the animation works but some areas are invisible. Other rigs I did did not show at all once exported to the .babylon format. Thanks in advance.
  10. Hi Just starting with pixi (and canvas). Looking to create something similar to this ribbon effect on mobile Any advise, can this be done? any tutorials available? lack of experience in this means i'm struggling to break it down into smaller tasks, any advice. Thanks
  11. I have built a character with elements created by CreateSphere() and CreateCylinder(). All parented with a central element collected in an own function. To animate single limbs of the "android" I first used the function getChildMeshes() to get the children of the parent. The animation works together with a key-event, but there is one problem: while the first move the limbs are flying around, then they return to their place and work well. How can I solve my Problem?
  12. I noticed that phaser's main webpage example code uses png file. However, I want to make an animated sprite with moving gif file. Is there anyway of doing this? *This code is definitely not working, since it's wrong. But this was my attempt. game.load.spritesheet('apple', 'assets/apple.gif', 300, 300); //character is a sprite that I added var test = character.animation.add('walk');'walk', 30, false);
  13. Hello, I am a 2D traditional animator. I can provide you with raster(.PNG) and vector(.SVG) files. I charge $15/Hr and am available 6 days a week for work. Here is my portfolio. Contact: Thanks for reading: -Dom
  14. This is an issue I've had with multiple models. See how some vertex or maybe a bone has points attached to the camera? The issue seems to be with the skeleton, as removing this and the skin modifier seems to remove the issue: I'm using 3Ds Max 2015 and the Babylon.js Exporter. When uploading the file to, the mesh and skeleton are both intact, but exporting to .babylon somehow removes the skeleton aswell. As far as I know, uses the Blender exporter, but that's no success either. I was just wondering if anyone else has had this issue, and if yes, then maybe know a fix or a way around. Attached is the .max file for reference. simple.max
  15. Here is the demo, press any key to move the mesh with animation and BoneLookController will stop working. It only happens to the first Bone Controller. BoneIKController also has this problem, if it's the first created.
  16. I want to interrupt/stop and completely remove all animations on a mesh that have been started with BABYLON.Animation.CreateAndStartAnimation(). I'm using scene.stopAnimation() but having some strange corner cases in testing that make me suspect some animations are still playing when I try to initiate new ones.
  17. Hi I have come to a dead in, I have attempted various research on platforms such as google, YouTube and Lynda however to no avail. I have used TexturePacker to create a spritesheet assiociated with JsonArray so that I can incorporate animations within my project however I am met with this Index error which is assiociated with the first line of code: this.sprite.animations.add('walk', Phaser.Animation.generateFrameNames('Slide', 1, 10), 10, true, false);'walk'); I have preloaded the required JsonArray and Image path within the preloader by doing the following: this.load.atlasJSONArray('robot', 'src/images/robots.png', 'src/images/robots.json'); And an example of this .json file is like this: { "filename": "Slide1.png", "frame": {"x":3574,"y":361,"w":409,"h":356}, "rotated": false, "trimmed": true, "spriteSourceSize": {"x":31,"y":170,"w":409,"h":356}, "sourceSize": {"w":567,"h":556} }, { "filename": "Slide2.png", "frame": {"x":3572,"y":2665,"w":406,"h":358}, "rotated": false, "trimmed": true, "spriteSourceSize": {"x":34,"y":168,"w":406,"h":358}, "sourceSize": {"w":567,"h":556} }, { "filename": "Slide3.png", "frame": {"x":3561,"y":1412,"w":403,"h":360}, "rotated": false, "trimmed": true, "spriteSourceSize": {"x":37,"y":166,"w":403,"h":360}, "sourceSize": {"w":567,"h":556} }, { "filename": "Slide4.png", "frame": {"x":3084,"y":1781,"w":400,"h":361}, "rotated": false, "trimmed": true, "spriteSourceSize": {"x":40,"y":165,"w":400,"h":361}, "sourceSize": {"w":567,"h":556} }, { "filename": "Slide5.png", "frame": {"x":3159,"y":1412,"w":400,"h":361}, "rotated": false, "trimmed": true, "spriteSourceSize": {"x":40,"y":165,"w":400,"h":361}, "sourceSize": {"w":567,"h":556} }, { "filename": "Slide6.png", "frame": {"x":2763,"y":2660,"w":400,"h":360}, "rotated": false, "trimmed": true, "spriteSourceSize": {"x":40,"y":166,"w":400,"h":360}, "sourceSize": {"w":567,"h":556} }, { "filename": "Slide7.png", "frame": {"x":2763,"y":3022,"w":400,"h":360}, "rotated": false, "trimmed": true, "spriteSourceSize": {"x":40,"y":166,"w":400,"h":360}, "sourceSize": {"w":567,"h":556} }, { "filename": "Slide8.png", "frame": {"x":3165,"y":2982,"w":402,"h":359}, "rotated": false, "trimmed": true, "spriteSourceSize": {"x":38,"y":167,"w":402,"h":359}, "sourceSize": {"w":567,"h":556} }, { "filename": "Slide9.png", "frame": {"x":3165,"y":2622,"w":405,"h":358}, "rotated": false, "trimmed": true, "spriteSourceSize": {"x":35,"y":168,"w":405,"h":358}, "sourceSize": {"w":567,"h":556} }, { "filename": "Slide10.png", "frame": {"x":3572,"y":2306,"w":407,"h":357}, "rotated": false, "trimmed": true, "spriteSourceSize": {"x":33,"y":169,"w":407,"h":357}, "sourceSize": {"w":567,"h":556} }], (Manually Rename Filename from Slide (1) to Slide1 in order to work however still met with an error) I have tried to find videos which will help me with creating an animation spritesheet with Json but every resource I follow I still get this error. If my mistake is not obvious feel free to point me to a good resource. Regards, Connor Solved: No where mentioned extension had to be removed. Eventually got it working.
  18. Hi guys, I am looking for a way to find out which animation is "really" running on an object. I start my animations this way: this.mesh.skeleton.beginAnimation(name, true, 1.0); "name" is a string that is the animation name in blender. It get's translated to a range (begin frame and end frame) and that is played. I track which animation I set last to know what the animation of the object should currently be - but sometimes this doesn't match what is actually displayed. I am not sure what goes wrong - but I would like to be able to fix it. (For example, sometimes the death animation doesn't play on players - they just look frozen until respawn, and I would like to be able to correct this.) I am currently unable to check if what animation I think is playing is really currently playing. What I am looking for is a way to do this: this.mesh.skeleton.getAnimationName() or this.mesh.skeleton.getAnimationNames() - but not by tracking what animation name was last set (that's what I am doing now) but by really checking if the correct range is playing. I will gladly implement those myself, but I have looked the data in the skeleton, and I can't tell where I can find the currently playing animation range or the current frame. Any pointers into the right direction are appreciated.
  19. Hi, currently I am doing an animation for the appearence of an sprite. That requires to modify the scale of the sprite and its coordinates at the same time. But with the current tween API it seems like only one field can be modified at once. I've researched a bit and I came up with this: var tween = to( { x: prevWidth * 1.5, y : prevHeigth * 1.5 }, 200, "Linear", false ). to( { x: prevWidth, y : prevHeigth }, 200, "Linear", false ); var tween2 = to( { x : scX , y : scY }, 200, "Linear", false ). to( { x : orX, y : orY }, 200, "Linear", false ); tween.start(); tween2.start(); It works reasonable, but both tweens run concurrently, which I think it maybe a problem with more complex animations. Is there a better way to do this and avoid concurrency issues? Thanks.
  20. Here's the deal, I'm importing a model with skeleton, bones, animations etc. I assign the model (Index 0) and the skeleton (index 0) global variables. Then, outside of Babylon's native import function, I clone the model and the skeleton, and run animation (from frames) just fine. The problem is, when I try to manually manipulate bones using their getters and setters, somehow, rotating 1 bone from 1 clone of the original, also rotates the bones of all other clones, as well as the original. Changing the names and ID's of bones doesn't seem to help, either. Soo. Is there any way of cloning bones? no clone function exists, and I'm unsure of how to approach this. I'll see if I can create a simple PG, as the project is pretty complex by now. As I mentioned, I can run different animations on the different skeletons without any issues. But as soon as I manually rotate bones, all clones + original are all affected.
  21. I have a bit of code that cycles through my TILED file to find any object I declared as an NPC. I am not sure if this is important, but I wanted to mention how it found the location of the sprite. (And it is designed to work with multiple sprites, but the code fails with a single sprite and multiple sprites) result.forEach(function(element){ this.createFromTiledObjectMove(element, this.doors); //alert (this.doors); }, this); The code above works correctly again it is just for reference on how the next part of the code is found. The code below was INTENDED to have a character mill around. Starts walking right. Stops. Faces forward (with a tiny movement), Stops, Faces left and walks, Stops, Face right and repeat pattern. Hopefully it is easy to read, and I could probably clean it up. The MOTION is fine. He goes back and forth, stopping at each end point. But the animations do not sync correctly. I even tried stopping ALL animations as seen in the code below but eventually he gets stuck in one animation, even though the tween movement continues. Any ideas? //create a sprite from an object WITH ANIMATION! createFromTiledObjectMove: function(element, group) { var sprite = group.create(element.x, element.y,; var tweenNPC = this.add.tween(sprite); //I eliminated the randomness for testing - it did work, but same problem //var randomValue = this.rnd.integerInRange(200, 500); //var randomTime = this.rnd.integerInRange(1000, 3000); //var keepRnd = randomValue; var randomTime = 1000; var keepRnd = 40; //copy all properties to the sprite Object.keys({ sprite[key] =[key]; sprite.frame = 6; sprite.animations.add('down', [6, 7, 8], 10, true); sprite.animations.add('right', [3, 4, 5], 10, true); sprite.animations.add('left', [9, 10, 11], 10, true);'right');{ x: (element.x + keepRnd) }, randomTime, Phaser.Easing.Linear.None, true, 1000, 0, false); tweenNPC.onComplete.add(StopRightandChat, this); function StopRightandChat() { sprite.animations.stop('down'); sprite.animations.stop('left'); sprite.animations.stop('right');'down');{ x: (element.x + 5 ) }, randomTime, Phaser.Easing.Linear.None, true, 1000, 0, false); tweenNPC.onComplete.add(goLeft, this); } function goLeft() { sprite.animations.stop('down'); sprite.animations.stop('left'); sprite.animations.stop('right');'left');{ x: (element.x - keepRnd) }, randomTime, Phaser.Easing.Linear.None, true, 1000, 0, false); tweenNPC.onComplete.add(StopLeftandChat, this); } function StopLeftandChat() { sprite.animations.stop('down'); sprite.animations.stop('left'); sprite.animations.stop('right');'down');{ x: (element.x + 5 ) }, randomTime, Phaser.Easing.Linear.None, true, 1000, 0, false); tweenNPC.onComplete.add(goRight, this); } function goRight() { sprite.animations.stop('down'); sprite.animations.stop('left'); sprite.animations.stop('right');'right');{ x: (element.x + keepRnd ) }, randomTime, Phaser.Easing.Linear.None, true, 1000, 0, false); tweenNPC.onComplete.add(StopRightandChat, this); } }); },
  22. I've used the pixi-compressed-textures.js and can get Spine to load the lower resolution artwork, but I still can't seem to find an exact piece of code for how to rescale the animation at runtime, rather than via redoing the whole thing in Spine. I know this should be an easy fix - anybody have the 1 liner I'm looking for here? I'm developing a visual reading app for autistic children, and Spine has proven to be a pretty easy way to get basic animations up and running fast! I'd really appreciate any advice, as I'm a noob to both Pixi and Spine, while having pretty good experience in JS and AS3.
  23. I have been working with phaser for less than a week, working off of some sample code. I am able to load the sprite. Have the sprite walk/tween 50 pixels back and forth with yoyo. But I can't figure out how to get it to change animation from 'left' to 'right'. You may recognize parts of the code in the sample below, I even left some other attempts commented out so that you can see I did search this site and Google my problem, but I can't find a solution. Basically, I want to have the sprite constantly patrol, and the yoyo works fine. But after each tween, I need to switch the animation so the person faces left or right. Any ideas will be helpful! var spriteX =, 1000, 'walking'); var tween = this.add.tween(spriteX); spriteX.frame = 3; spriteX.animations.add('left', [9, 10, 11], 10, true); spriteX.animations.add('right', [3, 4, 5], 10, true);'left');{ x: 650 }, 1000, Phaser.Easing.Linear.None, true, 1000, -1, true); tween.onComplete.add(doSomething, this); function doSomething () { spriteX.animations.stop('left');'right'); }{ x: 600 }, 1000, Phaser.Easing.Linear.None, true, 1000, -1, true); //'left'); //spriteX.animations.stop('left'); tween.repeatDelay(1000); tween.yoyoDelay(1000); //spriteX.animations.stop('right');
  24. hyy everyone, i made a PG here and the problem is that i can't clone animations for the cloned models:
  25. Hi everyone, i was trying to pause a scene when the browser window is not active(eg. user switches tab, ctrl/cmd+tab, another window is currently focus,etc). To pause the scene, i need the background music and all animations to be paused, below playground example shows my approach: I got two results: 1. when I click on another window(for example a notepad) that overlapped the browser, the notepad is now focus and the browser is blur, hence both sound and animation are paused, this is expected; 2. when I ctrl/cmd+tab or manually click on another tab to switch tab, only sound is paused but the animation continues playing. looks like $(window).blur(function() {...}); is triggered, but only bgm.pause() work, anim.pause() doesn't work. $(window).focus(function() { anim.restart();; }); $(window).blur(function() { anim.pause(); bgm.pause(); }); any help will be appreciated, thank you!