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

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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); } }); },
  7. 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.
  8. 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');
  9. hyy everyone, i made a PG here and the problem is that i can't clone animations for the cloned models:
  10. 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!
  11. Hey, do you have some code which implements something similar to the link, working for v4?
  12. First time poser here. I am starting to work on a simple 3 reel slot machine. A working jQuery version is here: I would like to convert this to a Phaser game to take advantage of all the features. I am looking for any type of help or direction in planning this project. I am very new to Phaser. What I would like to have is 3 reels, each reel will have a varying number of tiles/sprites. To spin the reels should I be using gravity to make them fall or a tween animation? I would like to have a designated area where the reels spin but have the overflow hidden from the rest of the stage. When the spinning stops I would like to show 3 tiles/sprites for each reel and then I will be drawing lines connect the sprites to show the user the winning combination. I have attached an image to show what I am trying to describe. I am not looking for someone to do this for me, I am just looking for help, I've scanned through the API but the terminology is all new to me and cant seem to find answers there YET. Should me reels be groups? Can I animate a group as a whole or does the animation only affect the individual sprites? Thanks in advance to anyone who can shed some light.
  13. How to use spriter in phaser/javascript, and how to export it?
  14. Hi, I'am noob I made texture creator tool using this tutorial ( ). It's cool. But I don't know how set animation to texture from above tutorial. Could you please let me know how set animation to texture from array string?
  15. Hello all, My team and I are looking for the best way to animate things and bring them into Phaser. For simple stuff we can tween things to different positions, but for more complicated animations what do people typically use? I'm the designer in our group and I usually export animations from Adobe After Effects and put the sequence into Texture Packer. But wondering if there's a better way to animate characters with bones for instance because frame by frame animations are not ideal most of the time. Any ones have any tips please? Thanks!
  16. Hello everyone, I'm new on this forum and in Phaser. First, I have to say that I've enjoyed using this framework so far, feels very complete; you don't have to implement all the boiler plate for yourself in every game (even sprite already has a `health` attribute), unlike LibGDX (which I have also used in the past). And almost every problem is solved either on this forum, or in examples. But I got a problem in my code that I don't seem able to solve, it might not even be possible to solve, so here it goes. I'm trying to create a sprite from a bitmapData, but then trying to add animations. The reason why I use bitmap is because I want to take advantage of the function replaceRGB and replace some colors (to make different teams), and add the sprite later. If I do this, it works: sprite = game.add.sprite(x, y, 'player'); sprite.animations.add('stand', Phaser.Animation.generateFrameNames('stand/', 1, 1, '.png', 3), 10, true, false);'stand'); But, if I try to set the bitmap, it fails on with this error: phaser.js:69099 Uncaught TypeError: Cannot read property 'index' of undefined at Phaser.Animation.updateCurrentFrame (http://localhost:8000/assets/javascript/lib/phaser.js:69099:36) at (http://localhost:8000/assets/javascript/lib/phaser.js:68796:14) var bmd = game.make.bitmapData(); bmd.load('player'); bmd.replaceRGB(255,255,255, 255, 250, 0, 0, 255); sprite = game.add.sprite(x, y, bmd); sprite.animations.add('stand', Phaser.Animation.generateFrameNames('stand/', 1, 1, '.png', 3), 10, true, false);'stand'); If you inspect the object sprite.animations, will notice that currentFrame is undefined. Is there any way to add the currentFrame afterwards ? or bitmaps are incompatible with animations By the way, my player is a atlasJSONHash game.load.atlasJSONHash('player', 'assets/img/player.png', 'assets/img/player.json'); Thanks in advance.
  17. I intend to import some models and animations I created in Blender but I have no idea how games incorporate animations. Since I plan on making a mobile game, I'm concerned complex models on top of intricate animations will ruin my project. I understand how 3D video animation works in regards to rendering the animation (taking hundreds of thousands of pictures) but how does this work in games? Does everything that moves pre-rendered and just played upon certain triggers or does the cpu/gpu calculate/manipulate meshes on certain triggers? Sorry if this doesn't make sense but I have the feeling I'm going to end up with a bunch of animation files for each model, for each type of movement and depending on how large these files are, may render a mobile game I want to make impossible.
  18. I want to run two animations in sequence. First animation is initially looped, then slow downed by tween, and when tween is complete (speed of animation is reduced) I want to stop that animation and run second. Problem is, because I want to set up end frame other than specified in animation creation; i.e. I want to first animation run until end frame is reached. Otherwise I could simply set up loop parameter to false and then run second animation. What is most efficient way to achieve this? Some API like Phaser.Animation.stop(index_of_end_frame) will be perfect for my purposes. Stopping animation when specified frame is reached. Edit: My solution is get number of pending frames ( amount of frames that must elapse to reach end frame), multiply it by delay of animation, and set up timeout that stop current animation and run second.
  19. I have imported a Blender scene which has a mesh with an animation (consisting of just a few keyframes) and I am looking to control the animation, however I have been unsuccessful. The only resources I have been able to find relate to using skeletons imported from Blender, not basic keyframe animations (unless I am missing something?). Example playground: The animation data is located on line 20 of the playground. I have tried calling scene.beginAnimation('rotation animation', 0, 30, true); in the scene.executeWhenReady function to no avail. Hopefully somebody can help? Thanks!
  20. Hi everyone, there might be a way of doing this but I must be missing something... I have a scene which consists of different meshes having different animations, all of the animation only run once. Basically, I would like to be able to "reload" the scene without actually reloading it, which I try to reset all the meshes' animations by pausing all unfinished meshes' animatable, set their animation's frame back to zero, and restart each of the animatable again. This method work when all of the animatables in scene have not reached their last frame. It won't work on those animatable who had reached its last frame, which their frame will be set to zero, but not able to be restarted. A simplified scene that showing my approach, as you will see the restart button doesn't work when the animation has reached its last frame. Any help would be appreciated, thank you!
  21. Hello all! I have hit a roadblock and I need help :/ All I want out of this is one thing: I press a cursor key, and an animation plays. Three of my animations work perfectly, and two only play the first frame of the animation when the keys are pressed (down && left) || (down && right). Any insight to what I hope is just a simple typo? Thanks for your time! EDIT: The frames that are not working are not the same size as the frames that do work, they are about twice the width, could that have something to do with it? var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); function preload(){ //loading the background game.load.image('background', 'background.png'); //loading three ball images game.load.image('redBall', 'redBall.png'); game.load.image('blueBall', 'blueBall.png'); game.load.image('greenBall', 'greenBall.png'); //loading the atlas game.load.atlas('player', 'henAnimation/henAnimation.png', 'henAnimation/henAnimation.json'); } var cursors; var player; function create(){ //adding the background game.add.sprite(0, 0, 'background'); //adding player player = game.add.sprite(200, 200, 'player'); //cursor animations-stop, right, and left work perfectly player.animations.add('stop', Phaser.Animation.generateFrameNames('', 1, 3, '.png', 4), 10, true); player.animations.add('right', Phaser.Animation.generateFrameNames('', 4, 5, '.png', 4), 10, true); player.animations.add('left', Phaser.Animation.generateFrameNames('', 6, 7, '.png', 4), 10, true); //only load the first frame of the animation player.animations.add('rightlick', Phaser.Animation.generateFrameNames('', 8, 10, '.png', 4), 10, true); player.animations.add('leftlick', Phaser.Animation.generateFrameNames('', 11, 13, '.png', 4), 10, true); cursors = game.input.keyboard.createCursorKeys(); } function update(){ if (cursors.left.isDown) {'left'); } else if ((cursors.left.isDown) && (cursors.down.isDown)) {'leftlick'); } else if (cursors.right.isDown) {'right'); if ((cursors.right.isDown) && (cursors.down.isDown)) {'rightlick'); } } else {'stop'); } }
  22. Hey, I've got a function call on isDown for the left mouse button. This function checks the direction and then plays an animation of two frames. Like this: if(this.lastDirection === "down"){"hitDown"); }else if(this.lastDirection === "left"){"hitLeft"); }else if(this.lastDirection === "right"){"hitRight"); } For example hitDown looks like this: this.animations.add('hitDown', [16,17], 5, true); The thing is; when I run "" - I expect theboth animation frames to just run but they're not. The whole animation does not run unless I hold the mousebutton pressed. If i just click - only the first frame in the animation shows. Why is that?
  23. how to make animation from group of sprites which difference size
  24. Hello everybody! I am trying to make text plane fade animation with text drawn on texture. I created dynamic texture, then created a plane. Next I set texture as textPlane.material.diffuseTexture. Texture has hasAlpha set to true. this.textPlaneTexture.drawText(text, null, 50, 'bold 100px Roboto Mono', 'pink', 'transparent'); So there's text written on the screen with transparent background. Next I created fade animation like: var fading = new BABYLON.Animation.CreateAndStartAnimation('fade' + this.text, this.textPlane.material, 'alpha', 30, 30, 1, 0, 0, null, () => { this.textPlane.isVisible = false; }); But here's the problem when the alpha is changing then also backgorund is getting from black to transparent. Why is that? How to prevent changing background alpha, only the text is alpha change is expected. Here's the playground
  25. SKILLS: Art Direction // Game Art // Illustration // Graphic Design // Animation // Concept Art // Promotional Graphics // Pixel Art // Photoshop // Illustrator If you would like a quote or have any questions about my work or me please get in touch at TESTIMONIALS: "I'm just gonna get right to the point, Rob does an outstanding job of delivering what you want, even if you didn't even know it. He's always responsive in answering any and all your questions. As for the quality of the art, if you're looking for the best then look no further. The only problem I can say that I had with Rob is that his work is too good, so good I took forever just trying to pick one. Definitely worth every penny." - JS Games, Shift "Working with Rob was a fantastic experience! I had previously not worked with many artists remotely and wasn't sure what to expect, but Rob's professional approach to the project, from defining clear contracts, conception, vertical slices, feedback integration, and completion, was more than I could have asked for and ensured that risk was minimal and expectations were managed for us both. Stylistically Rob has a big range and was able to come up with something truly unique for Startup Freak. I definitely plan to work with him again in the future!"/i] - Poya Manouchehri, Startup Freak "Rob is an amazingly talented pixel artist capable of outputting a great amount of high quality work in a limited time, and at a very reasonable price. I hope to work with him again in the future." - Adam DeLease, The Narrator Is A D**k "Rob was somehow able to make exactly what I wanted when I didn't know what I wanted. All I had to say was 'I want a cool logo for my game' and he gave me multiple options for potential directions to help me whittle it down to a specific design. Rob is a professional and easy to work with, I'd definitely work with him again." - Austin Sojka, Tiles "I've known Rob for the better half of a year now and it has been a privilege working with him. He designed the whole first stage for our game as well as a big part of the character sprites. He did and impeccable job and I am looking forward to working with him in the future." - CCD Interactive, Delusional "Rob created all the graphics for my game ranging from concept art to the character/scenery/item art to effects and UI. He also created my logo/icon and promo graphics! A fantastic artist and extremely easy to work with." - Crazy and Coding, Sages Sky "The quality of Rob's work was excellent, he fully understood the graphics the game required , and completed them with minimal direction. He also added detail that it wouldn't have occurred me to ask for. I enjoyed the process and the end result surpassed my expectations. I hope to work with him again soon." - Play Nicely, EXIT ISOL8 "I challenged Rob with the task of capturing complex expressive animations with only two colours and a small pixel budget. It was a task several other artists had failed at, but Rob was able to not only meet but exceed my expectations. He took instructions on board, added his own flair and was able to deliver a fantastic outcome for a great price." - JNA Mobile, Tenguru