Search the Community

Showing results for tags 'animation'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • 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 353 results

  1. How to use spriter in phaser/javascript, and how to export it?
  2. 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.
  3. 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: http://www.babylonjs-playground.com/#ONZNB 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!
  4. 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. http://www.babylonjs-playground.com/#OQENJ Any help would be appreciated, thank you!
  5. 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) { player.animations.play('left'); } else if ((cursors.left.isDown) && (cursors.down.isDown)) { player.animations.play('leftlick'); } else if (cursors.right.isDown) { player.animations.play('right'); if ((cursors.right.isDown) && (cursors.down.isDown)) { player.animations.play('rightlick'); } } else { player.animations.play('stop'); } }
  6. 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"){ this.animations.play("hitDown"); }else if(this.lastDirection === "left"){ this.animations.play("hitLeft"); }else if(this.lastDirection === "right"){ this.animations.play("hitRight"); } For example hitDown looks like this: this.animations.add('hitDown', [16,17], 5, true); The thing is; when I run "this.animations.play" - 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?
  7. how to make animation from group of sprites which difference size
  8. 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 http://babylonjs-playground.azurewebsites.net/#28LOAX
  9. 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 rob@hayes2d.com 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 www.hayes2d.com
  10. Context: I am attempting to build a hearthstone like game using babylon. I am using multiple planes to manage the game state/positions of cards. I.e. current_player_hand is a plane, current_player_units is a plane, current_player_deck is a plane. Cards themselves are planes (with meshes), and are attached to parent plane to set initial position. What I am struggling to figure out how to do is how to animate, for instance, a card being played from a players hand, moving on to the game board, targeting the center of the game board plane. Since the position of the plane is relative to it's parent, it only animates relative to it's parent. Is there a way to basically say, animate this object, over to that object using that objects world position? (or am I abusing planes, or is there a better way to do what I've described?)
  11. Hi everyone, I'm extremely excited to share my latest side project with you. I call it aape. It is my version of an Adobe Animate PixiJS exporter. Here are two demos of exported animations: davidochmann.de/content/html/aape/aape.html davidochmann.de/content/html/aape/runner.html How it works: The project is split into two parts. A JSFL script to export your current Animate timeline and a few JS classes to download and display the animation. Your animation is build as usual. The only difference being that you have to explicitly tell aape which part of the animation should be exported as Bitmap. This is done by selecting the MovieClip in your Animate library and changing it to a Graphics object. MovieClip labels and comments are also exported and can be used by executing the familiar gotoAndStop / gotoAndPlay methods. After building your scene you execute aape form the toolbar. The export starts with the currently open MovieClip as root element. A simple export generates three files. A PNG Atlas + JSON file containing image locations and a JSON object that describes the exported timeline (the library). The files can than be loaded and added to the aape.Timeline object. It's prototype is the PIXI.DisplayObject. So you can easily add it to your existing display list. The exporter currently doesn't parse vector graphics. The tool is not yet finished. I'm still working on the Animate user interface and export options as well as a proper documentation. I also haven't decided how I'm going to publish aape yet. What du you think? Is this workflow still relevant to you? I'd love to get your feedback. Cheers, David
  12. I have a scene with 5 models with animations. Each model is supposed to act like that: idle animation in loops by default whenever an action is called, it is played, and when its animation is completed, the model goes back to idle animation in loops The scene starts with 5 models in the idle animation loop. Click the "Test" button to trigger an action animation. 1) Is there a way to remove onComplete callback from an Animation once it is created? It seems it is also triggered by animation.stop(), and I'd like to avoid that. I tried to null animation.onAnimationEnd but it resulted in very weird behavior. 2) Each time I try to play an action animation in all models by hitting the "Test" button, animations are played on a seemingly random (probably not really random) number of models, and the rest simply stop (probably following the stop() call). If you try to hit the "Test" button a couple of times during an action animation you'll notice an even weirder behavior. Why is this happening? If I use a setTimeout to delay playing a new animation after stopping the previously played one, it seems to create some order in the chaos, but I'd like to understand better what's going on, since even this is a very imperfect solution that has its own problems, or possibly other problems that'd appear regardless of this one. Here's the PG: http://www.babylonjs-playground.com/#1SVN3I#46
  13. Hello, I've problem with animation complete callback, when fired first time it's ok. On next function executions it's adding additional console.log value "nut fired". So the JS console output looks like that (it's adding additional execution of animation callback): nut fired! -> nut fired! (3) -> nut fired! (6) -> nut fired! (10) ... function squirellThrowNut () { for (var i = 0; i < squirells.length; i++) { squirells.children[i].animations.play('throw'); squirells.children[i].animations.currentAnim.onComplete.add(function () { for (var i = 0; i < squirells.length; i++) { console.log('nut fired!'); } }, this); }; } Please help me, I can't figure it out.
  14. I'd like to be able to choose whether to use or ignore a skeleton, assuming ignoring a skeleton will improve the performance. (each bone reduces the performance as far as I understand, even when no animation is played) The purpose is to use the skeleton during the model's animation, and ignore it when no animation is played. Is such a thing possible? Will it improve the performance or is it already optimized in bjs core?
  15. Hi there, I don't know if someone of you know this guy (Pedro Medeiro): https://www.patreon.com/saint11 He's creating very nice tutorials how to draw and animate pixel related graphics stuff. Amazing stuff inside! Regards, Christian
  16. Hi everybody, I got an issue with PhaserJS rope. I need to animate rope with spritesheet. The objective is to make curved / bent spritesheet animation. I tried almost everything but it won't render correctly. All I got is single frame being rendered, although I can see animation frames, and loop count in console log. I need to curve / bend sprite sheet animation,it is not necessarily need to be done by rope, any solution would be great. Will be grateful for any suggestion, thank you in advance.
  17. I'm Rob Hayes, a full time freelance game artist. With over 4 years of experience within the games industry I've worked in many areas of the 2D game development life cycle and have a love for exploring new styles and techniques to make the games I work on really stand out. From creating new styles and direction, to working with existing assets I can adapt to any project. SKILLS: ART DIRECTION // PIXEL ART // SPRITE ANIMATION // VECTOR ART // ILLUSTRATION // UI DESIGN // CONCEPT ART // GRAPHIC DESIGN // EDITING If you would like a quote or have any questions about my work or me please get in touch at rob@hayes2d.com www.hayes2d.com
  18. I am building a game using babylon.js and I just ran into a problem. The game is about a chicken that has to find its way back to the henhouse, and on the way there are several tractors driving around that can run over the chicken. The scene loads allright, but when I add animation so that the tractors can move, the scene doesn't load when I start it and I have to refresh it a few times. Does anyone know what could be the problem and how to solve it so that the scene will load when you start the game? here is my main code: var engine; var scene; var canvas; var chicken; var henhouse; var tractor; var tractor2; var tractor3; document.addEventListener("DOMContentLoaded", function () { onload(); }, false); window.addEventListener("resize", function () { if (engine) { engine.resize(); } },false); var onload = function () { canvas = document.getElementById("renderCanvas"); engine = new BABYLON.Engine(canvas, true); initScene(); engine.runRenderLoop(function () { scene.render(); }); }; var createSkybox = function() { var skybox = BABYLON.Mesh.CreateSphere("skyBox", 100, 1000, scene); BABYLON.Engine.ShadersRepository = "shaders/"; var shader = new BABYLON.ShaderMaterial("gradient", scene, "gradient", {}); shader.setFloat("offset", 10); shader.setColor3("topColor", BABYLON.Color3.FromInts(0,119,255)); shader.setColor3("bottomColor", BABYLON.Color3.FromInts(240,240, 255)); shader.backFaceCulling = false; skybox.material = shader; }; var initScene = function() { scene = new BABYLON.Scene(engine); scene.clearColor=new BABYLON.Color3(0.8,0.8,0.8); // Camera attached to the canvas -> chicken doesnt move //var camera = new BABYLON.ArcRotateCamera("Camera", 0.67, 1.2, 150, BABYLON.Vector3.Zero(), scene); //camera.attachControl(canvas); //Create the camera -> chicken is moving camera = new BABYLON.FreeCamera("camera", new BABYLON.Vector3(200, 6,-300), scene); camera.setTarget(new BABYLON.Vector3(0,0,0)); var h = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, -1), scene); h.intensity = 0.85; var d = new BABYLON.DirectionalLight("dir", new BABYLON.Vector3(1, -1, -2), scene); d.position = new BABYLON.Vector3(-300,300,600); var shadowGenerator = new BABYLON.ShadowGenerator(2048, d); createSkybox(); var ground = BABYLON.Mesh.CreateGround("ground", 1000, 2000, 2, scene); ground.material = new BABYLON.StandardMaterial("ground", scene); ground.material.diffuseColor = BABYLON.Color3.FromInts(193, 181, 151); ground.material.specularColor = BABYLON.Color3.Black(); ground.receiveShadows = true; scene.gravity = new BABYLON.Vector3(0, -0.9, 0); var tg = new TreeGenerator(scene, shadowGenerator); // Number of lanes var LANE_NUMBER = 4; var LANE_INTERVAL = 160; // distance between lanes var LANES_POSITIONS = []; // Function to create lanes var createLane = function (id, position) { var lane = BABYLON.Mesh.CreateBox("lane"+id, 1, scene); lane.scaling.y = 0.1; lane.scaling.x = 15; lane.scaling.z = 1100; lane.position.x = position; lane.position.z = lane.scaling.z/2-600; lane.rotation.y = 180; }; var currentLanePosition = LANE_INTERVAL * -1 * (LANE_NUMBER/2); for (var i = 0; i<LANE_NUMBER; i++){ LANES_POSITIONS[i] = currentLanePosition; createLane(i, currentLanePosition); currentLanePosition += LANE_INTERVAL; } // MESH IMPORTS BABYLON.SceneLoader.ImportMesh("", "assets/", "chicken.babylon", scene, function (newMeshes) { chicken = newMeshes[0]; chicken.position.y = 1; chicken.position.x = 180; chicken.position.z = -280; camera.target = chicken; chicken.rotation.y = -1; }); BABYLON.SceneLoader.ImportMesh("", "assets/", "henhouse.babylon", scene, function (newMeshes) { henhouse = newMeshes[0]; henhouse.scaling.x = 4; henhouse.scaling.y = 4; henhouse.scaling.z = 4; henhouse.position.z = 350 ;//+ 50; henhouse.position.x = -200; henhouse.rotation.y += -0.5; }); BABYLON.SceneLoader.ImportMesh("", "", "assets/tractor.babylon", scene, function (newMeshes) { tractor = newMeshes[0]; tractor.scaling.x = 4; tractor.scaling.y = 4; tractor.scaling.z = 4; tractor.position.y = 3.6; tractor.position.x = -72; tractor.rotation.z = 0.04; tractor.rotation.y = -0.6; }); BABYLON.SceneLoader.ImportMesh("", "", "assets/tractor.babylon", scene, function (newMeshes) { tractor2 = newMeshes[0]; tractor2.scaling.x = 4; tractor2.scaling.y = 4; tractor2.scaling.z = 4; tractor2.position.y = 3.6; tractor2.position.x = 95; tractor2.position.z = -20; tractor2.rotation.z = 0.04; tractor2.rotation.y = -3.5; }); BABYLON.SceneLoader.ImportMesh("", "", "assets/tractor.babylon", scene, function (newMeshes) { tractor3 = newMeshes[0]; tractor3.scaling.x = 4; tractor3.scaling.y = 4; tractor3.scaling.z = 4; tractor3.position.y = 3.6; tractor3.position.x = -15; tractor3.position.z = -190; tractor3.rotation.z = 0.04; tractor3.rotation.y = -0.6; }); //tractor animation scene.registerBeforeRender(function() { tractor.position.x += 0.6; if(tractor.position.x >=90){ tractor.position.x = -72; } tractor2.position.x -= 0.6; if(tractor2.position.x <=-80){ tractor2.position.x = 95; } tractor3.position.x += 0.6; if(tractor3.position.x >=170){ tractor3.position.x = -15; } }); }; //moving the chicken window.addEventListener("keydown", function (event) { switch(event.keyCode) { /*case 76: chicken.position.z += 1; chicken.rotation.x += 0.5; camera.position.z += 1; break;*/ case 37: //right chicken.position.x += -1; chicken.rotation.y += -0.001; camera.position.x += -1; //camera.rotation.y += -0.01; break; case 39: //left chicken.rotation.y += 0.001; chicken.position.x += 1; camera.position.x += 1; //camera.rotation.y += 0.005; break; case 40: //backwards chicken.position.z += -1; camera.position.z += -1; break; case 38: //forward chicken.position.z += 1; camera.position.z += 1; break; case 32: //jumping chicken.position.y += 2; camera.position.z += 1; chicken.position.z += 1; //pause //yield to.sleep(.500); setTimeout(function(){ chicken.position.y -= 2; },150); break; } }, true);
  19. Hi! I work at Gamevy, a company which has been developing Instant Win products for the last few years. We've been lucky enough to see a lot of growth over the last year. At the moment, we'd like to increase our ability to deliver by extending the capacity we have. We have a large number of games in our backlog which have been designed on paper. We're looking for teams to work with us to bring these ideas to market. The teams we're looking for will need to comprise an artist who has illustration and animation skills, as well as front end developers. The server side work for these games - the engines that will run them in the background is already done. If you'd be interested in discussing further, please get in touch, either via Skype @ danrough or LinkedIn. Thanks! Dan.
  20. I've been trying to work out how to set the frame rate for a MovieClip animation. I assume this is where the animationSpeed property comes in, but the API documentation is rather vague: What does this mean in terms of frames per second? If I want an animation to play at, say, 15 FPS, what value should the animationSpeed property be?
  21. Hi everyone, I'm having some trouble understanding a problem I'm facing and I would like some help. I have created an object and animated it using a bone structure. I then exported everything using 3DS Max Exporter (including a camera and 2 lights) but the looping animation shown (Export&Run) is not smooth, it feels like it's skipping frames. To demonstrate this, I have created a test scene: 2 boxes, both with a simple animation (they go 720 degrees around in 100 frames). One has just its rotation keyed and the other one has a bone attached that has been animated. The result is what I had expected: the simple one is smooth (is at it should) but the one with the bone is laggy. I know there must be a fix to this but I've been looking through the Documentation with no success and would like some help. Vlad.
  22. I have 3 meshes in a Blender scene. Each mesh has its own origin and animation. The meshes animate as expected when viewed in Blender, i.e. they move as distinct meshes and have their own distinct animation. When I export to Babylon JS and test it in the sandbox at "http://www.babylonjs.com/sandbox/", all meshes seem to share the same origin and all 3 animations are applied automatically to them. I am not sure if this a bug but I have tried exporting different animated meshes in the same scene from blender and I keep getting the same results. Could someone please give some advice on this. I am using Blender 2.78a and Babylon.js 5.0.6 exporter. Please find below the .blend and Babylon JS files. . Thanks 3 Mesh Animation.blend 3MeshAnimation.babylon
  23. Hello guys! I have, maybe, a little bit strange question. But how can I set the main position of skeleton or the started position of skeleton I dont know how its named. When I export model from blender and current animation frame in blender let's say 35, in babylon, if I do not begin skeleton animation, skeleton current frame it is 35. If I export model from blender and current frame 12, than in babylon main pos of skeleton it is frame 12. How can I set main pos for skeleton programmatically in babylon. I need set main pos first frame regardless of current frame in blender. Becouse I often export from blender and I can foget set skeleton in first frame and it will not be immediately noticeable in the game. I hope you will understand about what I told
  24. Hello everybody, I'm a newbie in phaser, but I love it. ^^ I have a skeleton of app and I have a bitmapfont created with littera. (http://kvazars.com/littera/) I show one word every 100ms in my bitmapText in function update(). Could I know the coordinates of last letter in a bitmapText? If I know the coordinate, then I will draw a 'hand' (sprite) in that location. I was searching examples in internet, but I didn't found anything. Is it possible? Or, Do you imagine any alternative for his? Sorry, If my question is very simple. Thanks.
  25. Hi there, I'm trying to get a simple animation exported into Babylon. However, I've run into a problem. Here is a link to how the animation looks in 3ds max. Looks correct. http://client.elementxcreative.com/public/bjs/animation/max_rover2_index.html Here is a link to what the animation looks like in Babylon. Look to the right to see the rover. It's firing out its wheels!! http://client.elementxcreative.com/public/bjs/animation/index.html The animation keys were added directly to the bones. (I'm not sure if that's relevant or not.) Also as a sidenote, I've tried the Unity 5 exporter. It also does not export animations correctly. Any clue as to what's happening?? What steps can I take to make sure my animations come out correctly? Thanks!