Search the Community

Showing results for tags 'animations'.

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

  1. Hey Folks, I have been playing around with phaser for some time making simple stuff. But for my new project I would like to try to make a Fighter game. I would like to make a character that is capable of attacking and has fairly good hit collision with other entities in game. Since this is more of a theory question. I will try to explain my approach. The character is group. Made with 3 parts. Body(sprite), arm(sprite), sword(sprite, for example 20x80, angle: -90). Now I would like to make the sword angle to go down from 90 to 0, aka simulating an attack. I get that I could just change the angle. But I also would like to smoothen the animation with the arm moving and the sword moving( to make it look like slashing ). This is kinda the setup in my mind. Now I would like to know what physic to use( planing to use arcade for simplicity sake ), Should I do this with tween? Or should I update the rotation and play animation? idk. if this is important, but the attack should also be I guess timed, so that you can't just hold the key and keep on slashing, but it deals damage, per attack (animation that would be like 0.3s long) Is there a better solution, approach that I could check out? p.s. I know this might seem like a mess post, i was trying to brainstorm and get some advice/ theory on how to handle such a thing. Would like to think that someone has already made this sort of game. Cheers, Jaru
  2. Hello my dear friends, I am trying to add animation to my bird object and I added for normal flying and It worked but when I try to add any other animation to same object it gives an error can you help me, I am adding my codes and the error message here, thanks! create: function() { this.bird = game.add.sprite(150, 200, 'bird'); this.bird.scale.setTo(0.1, 0.1);; this.bird.body.gravity.y = 1000; this.bird.animations.add('right', [0, 1], 5, true); this.bird.animations.add('dead', [2, 3], 5, true); this.bird.anchor.setTo(-0.2, 0.5); var spaceKey = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); spaceKey.onDown.add(, this); }, update: function() {, this.blocks, this.killBird); }, fly: function() { if (this.bird.alive == false) return; this.bird.body.velocity.y = -325; var animation = game.add.tween(this.bird);{angle: -20}, 100); animation.start();'right'); }, killBird: function() {'dead', 8, true); game.state.start('menu'); }, And I add the error message, and also my other problem is about pixel reformatting errors, how can I get rid of them, thanks.
  3. Hello! Im new here, and I'd like some help. I was coding, made a new spritesheet and tried making it play while I press a key. It doesn't seem to be working, and I don't know why. If you could help in any way, it'd be greatly appreciated. Thanks! CODE - SPRITESHEET -
  4. Hi Guys, I created this post hoping to find people interested in helping on the development and documentations of the unity toolkit. The unity editor allows to put an scene together very easy and export it all ,(lights cameras, meshes etc) with out a line of code How this works? Well @MackeyK24 started developing in visual studio the exporter tool and he saw a way to transform the camera , light or mesh from unity to babylon metadata, then later he add support for animations, splat maps painting, particles system and PBR materials, all of these trough the C# and the unity exporter. Furthermore, I join him on the project 6 months ago and I'm no as good as he is as developer but he took the time to show me and recorded videos to show people how to use it and improve it. I was not easy to pick it up if you dont have a strong object oriented programming skills winch most java script developer lack of, but this is an excellent way to learn or improve your coding skills So if you want to joins us and have some spare time to learn, please feel free to contact me, I can try to put you guys up to speed so we can continue with this great tool for development
  5. Hi all - Quick question about Babylon files. I have one with meshes, cameras with animations, etc. All sorts of goodness: what is the recommended method of importing this file, and having access to all the associated objects inside? I've been using ImportMesh, which works fine for importing meshes and textures. It's not clear to me, though, how I instantiate the other data types within the babylon file. Many thanks!
  6. Hello! I have a parent sprite (which is a human body) and it has a child sprite (it's a piece of plate mail). The sprite sheet for the human and the sprite sheet for the plate mail are the exact same layout with the exact same animation frames. I was wondering if there was a way to have the plate mail follow the same animation sequence as the human, without having to map out its own animation sequences. Thanks!
  7. Hello: So I'm trying to make a bubble popping game where once the balloon pops it shows an animation before getting deleted off the screen. but I can't get the to work if it's in a different function, but once I place it in the create function it works fine so it's not a syntax error(i think). This is where I initialize the enemy playState.prototype.spawnEnemies = function(){ if (this.waveProperties.counter > 0) { while ( < this.waveProperties.max / 2) { var type = Phaser.ArrayUtils.getRandomItem(["enemyLarge", "enemyMed", "enemySmall"]); var enemy = this.enemies.create(null, null, enemyProperties[type].img); enemy.reset(game.rnd.integerInRange(80, 1400), game.rnd.integerInRange(50, 400)); enemy.anchor.setTo(0.5, 0.5); enemy.body.collideWorldBounds = true; enemy.body.bounce.set(1); enemy.body.allowGravity = false; enemy.animations.add('pop', [1,2,3,4,5],30,false); enemy.body.velocity.y = game.rnd.integerInRange(enemyProperties[type].minV, enemyProperties[type].maxV) * game.rnd.pick([-1, 1]); enemy.body.velocity.x = game.rnd.integerInRange(enemyProperties[type].minV, enemyProperties[type].maxV) * game.rnd.pick([-1, 1]); enemy.nextSize = enemyProperties[type].nextSize; enemy.hp = enemyProperties[type].hp; enemy.dmg = enemyProperties[type].dmg; enemy.points = enemyProperties[type].points; enemy.bubbleSfx ='bubbleSfx'); enemy.bubbleSfx.allowMultiple = true; this.waveProperties.counter -= enemyProperties[type].points; += enemyProperties[type].points; } } else { console.log("Next wave started.."); //add text that shows PREPARE FOR NEXT WAVE here. this.waveProperties.max *= 2; this.waveProperties.timeCheck += this.waveProperties.timeCheck; this.waveProperties.counter = this.waveProperties.max; } }; this is where it checks if the bullet collided with the enemy and if health is 0 it will play the animation then get destroyed playState.prototype.hitEnemy = function(bullet, enemy){ switch(bullet.key){ //checks which kind of weapon hit the enemy by looking at it's image name case 'bullet' : enemy.hp -= 10; break; } bullet.kill(); //bullet dies on impact if (enemy.hp <= 0) {'pop'); this.bEmitter.x = enemy.x; this.bEmitter.y = enemy.y;; this.bEmitter.start(true,2000,null,20); enemy.destroy(); this.splitEnemy(enemy.nextSize , enemy.x, enemy.y); -= enemy.points; } }; if anyone could help me it would be greatly appreciated I'm at a loss atm.
  8. So I have 2 animations that both work independently. I can pause and unpause either of them fine but I can't pause one, play the other and then unpause the first. This doesn't and no animations play in the end Any ideas?
  9. I'm attempting to keep my animated tiles in phaser, but it don't seem to work by default. Does anyone know of a work around? I've included an image of the animated tile map.
  10. Hi, guys! I have some problem. I am using function attachToBone for attaching a pistol to a hand of my game character. Sometimes if I change a character animations between shot and idle, pistol detaches from bone like on video. I think this is becouse in one moment a bone with pistol dos't animate, when an animation changes. But it is happens not always, often at low fps. And in old version of babylon 2.4 all works fine. But in version 2.5 it problem is appeared. Thanks for any considerations and ideas about it is problem. And it is problem if you ask me share on playground, this projects have many codes and models and other materials I shot the video
  11. Hi all, I am designing the subsoil of terrain in my scene. This subsoil is formed by tubes which represents water 's canal or electric 's net. Well, to allow the view under terrain I have to show it as a wire object. My first question is: how can I show only the ground object as wire mode? I have made this but changing to this mode the visualization of all elements of scene... The second question is relative to animations. Inside the tubes I would like to add animation of water to get a better level of realism. Firstly, I can give some transparency to material of tubes and after i should add this animation. Do you know how can I add this animation inside of tube? In thefollow image you can see my scene to understand me better: Thanks
  12. The Grim Panda Design team is currently accepting new art and design projects. We have a team of experienced and seasoned 2D & 3D artists and animators who have provided assets for many of the best-selling mobile game companies on the market today. We work with any budget, large or small, and can quote prices on a project level, per-diem, or hourly. With the ability to work in vector, concept, and realistic styles, our team is dedicated to making your project come to life. The quality of your assets will be precise, clean, and look brilliant in your mobile IP. We pride ourselves on bringing your player into the world you have envisioned. Due to legal obligations with many of our clients, we cannot publicly post our complete portfolio. Please contact me at [email protected] for samples. Thank you, and we look forward to bringing your creative design to the next level.
  13. Hello everyone, I'm trying to get my head around how to work with animations in Blender and Babylon. I have no trouble exporting/loading etc and my animations works except in one aspect. I have added some movements to my object in Blender and with movement I mean that my object changes position. My problem now is that if I "walk" with my object in the browser each animation will begin where the object is added during the initialization. I have tried to find some data giving me the new position of the object when one animation is finished. Problem seems to be that the position of the object (mesh) doesn't actually change during the animation even though the object "moves". Does anyone have any suggestions of how to solve this issue? Or aren't you supposed to change position in Blender, only make animations where the object stays in the same spot all the time? Just seems strange if that would be the case...
  14. Hello guys, I'm moving on with my scene and I got stuck on skeleton animations. I have situation when my soldier model is running and while running animation is playing (or any other animation) he is being hit. The results of such situation is that running animation is stopped and hit animation starts playing, while my model is still moving forwards. So I have few different options here: Stop model movement and continue run animation when hit animation finishes Blend two animations with different weights. I know that this is possible with Three.js' animation mixer but I could not get it to work with babylonjs is this even possible? Any other thoughts? I was going thought this forum but I only found topics on blending when one animation changes other animation.
  15. Just wanted to know if it was possible to build an animation scrubber. One that would allow me to create an animation and then use a slider to "scrub" the animation. I have seen this in editors before. Where you can view different frames in the animation using a horizontal slider.
  16. I want to animate a camera between two points. Think of it like a camera on rails. A bit more tricky is that the rails are interconnected. e.g. Point: A moves to B moves to C moves to A moves to D etc. Therefore, any combination could work. In my local example, I have an event that will trigger this switch. For this example lets just use a click or interval to iterate. PROBLEM/QUESTION: How can I reset/append the keyframes of an animation? Typically my logic will either not run or replay the same animation. I hope, this animation, I made will help communicate the interaction. Note that this is the camera moving, not the meshes. At some point, the meshes may slightly move relative to the camera; however, that's for next iteration.
  17. Hello guys, Just started using babylon JS more than a week ago at work. Everything was going quite smooth so far. However I am struggling to export .babylon file from blender. Most probably it's because I have pretty much no experience with blender and 3D models in general. The mesh gets exported correctly but the main problem is with animations/animations actions, when I import .babylon file to the babylon engine and start any of the animations the mesh goes all over the place... I add .fbx file and .babylon file I get when I export it form blender. I hope someone can help me. I really need a help on this one. ArmyPilot_babylon.rar ArmyPilot_fbx.rar
  18. so i have a game where there are different enemies who look different and so have different spritesheets. and i have a pool of objects mechanism to recycle the dead enemy objects into new ones, kinda like this: var enemy = this.state.enemies.getFirstDead(); if (!enemy){ enemy = new MyGame.Enemy(this.state, cords.x, cords.y, data); this.state.enemies.add(enemy); } else { enemy.reset(cords.x, cords.y, data); } so the problem is like this: sprites are not properly having their animations changed from their old selves to their new selves. their sprites change properly for the most part but are keeping bits of info from the old animations, ie they are not being fully replaced when i call the this.animations.add again. the data parameter is an object with a buncha info about each enemy, including animation info. kinda like this: { key: 'troll', scale: 0.8, health: 20, movementSpeed: 60, attack: {amount: 2, delay: 0.5, type: 'physical', frames: [0, 1, 2, 3, 4, 5, 6, 7], fps: 16}, death: {frames: Phaser.ArrayUtils.numberArray(0, 31), fps: 32} } so in my modified reset method, which runs actually every time an enemy is created, these animations are made, pulling the frames and stuff from data and making an animation, like this (in the reset method of Enemy): this.animations.add('attack',, || 12, false); and when i run that line with different data on a sprite that was recycled, the data is not fully over-written, resulting in these mutating enemies that change from trolls to scorpions as their various animations play. the first thing i tried was calling this.animations.destroy() on my modified .kill() method that is called on all dying sprites, i thought that shoulda fixed it... but then i immediately get this error, 'Cannot read property 'getFrameIndexes' of null(…)', as if the animations were not being properly cleared and then added freshly again. i hope this made sense, thanks for the help guys.
  19. Hi, i am actually thinking about how to load animations at runtime. Reason is that our project includes almost 3000 unique animation takes (7 years of hard work ). That includes overrides of walk/run/idle/jump animations, actions (dance, etc) and gestures such as sit or laydown wich we need to bound to mesh objects. The overall file size is of course far too large to preload and must be somehow loaded and triggered at runtime on demand. I couldnt find anything about this in the docs. Maybe someone could give me a hint?
  20. Hi everybody! I've just started using Babylon.js for a small project for an exam, but I'm having some troubles... I have a box that moves pressing arrow keys; when it collides with a fixed object, as a wall, the game ends. This part of the project works, and I've used the intersectMesh method to do this. The box moves updating its position each time that a key is pressed. (I don' t know if this is important but the box has a physics state, in order to properly move on the ground, that is made with an height map). Now, I'd like to add some small objects that the box can "collect" while moving, just colliding with them. I've created my meshes and I've added two animations, one for position and one for rotation; if I try to use the intersectMesh method for the box and the new mesh, it simply doesn't work... Can someone please explain me why this doesn't work? Thank you!
  21. Hey guys, I have just made a little mesh and a simple animation on maya, but since there is no exporter from maya and no 3dsmax on mac.. im using unity to export. It works great for the mesh, texture etc, but I cant manage to access the animation... it is in the babylon file, but it's exploded by property like in the picture, I have two of those for each property probably because my mesh has two separate parts... Somebody knows how I can call the animation to run once ? Thanks
  22. hi. javascript and phaser noobie here. im building a game similar to the invaders example on the phaser website but i cant seem to get the explosion spritesheet im using to play the proper animation i want it to instead when i shoot an asteroid i get the entire sprite sheet spanned across the screen. also even though ive set 'loop' to false in the animation settings the explosion remains on the screen and after ive used all the explosions in the group the game crashes... ill give you the entire code for the game. its crap anyway but hey we all gotta start somewhere right? var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update, render: render}); function preload() { game.load.image('tileset', 'assets/tileset.png'); game.load.image('laser', 'assets/laser.png') game.load.image('player', 'assets/player1.png'); game.load.atlasJSONArray('asteroid', 'assets/asteroids.png', 'assets/asteroid.json'); game.load.atlasJSONArray('explosion', 'assets/explosion.png', 'assets/explosion.json', 100, 100); } //variables here var player; var asteroids; var tileSet; var lasers; var bulletTime = 0; var cursor; var fireButton; var explosions; function create() { tileSet = game.add.tileSprite(0, 0, 800, 600, 'tileset'); game.physics.startSystem(Phaser.Physics.ARCADE); game.renderer.renderSession.roundPixels = true; //player player = game.add.sprite(game.width/2, game.height,'player'); player.anchor.setTo(0.5, 0.5); game.physics.enable(player, Phaser.Physics.ARCADE); player.body.collideWorldBounds = true; //asteroids asteroids =; asteroids.enableBody = true; game.physics.arcade.enable(asteroids); asteroids.createMultiple(40, 'asteroid', 'asteroid');, addAsteroid, this); //pewpews lasers =; lasers.enableBody = true; game.physics.arcade.enable(lasers); lasers.createMultiple(5, 'laser'); //explosion explosions =; explosions.createMultiple(10, 'explosion'); //controls fireButton = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); cursor = game.input.keyboard.createCursorKeys(); } function update() { //scroll map tileSet.tilePosition.y += 7; //if alive if(player.alive) { //movement if (cursor.left.isDown) { player.body.velocity.x = -500; } else if (cursor.right.isDown) { player.body.velocity.x = 500; } else { player.body.velocity.x = 0; } if (cursor.up.isDown) { player.body.velocity.y = -320; } else if(cursor.down.isDown) { player.body.velocity.y = 320; } else { player.body.velocity.y = 0; } //firing button if(fireButton.isDown) { fireBullet(); } } //debugging //game.debug.body(player); //game.debug.body(lasers); //game.debug.body(asteroids); //collisions game.physics.arcade.overlap(lasers, asteroids, asteroidVsLaser, null, this); //game.physics.arcade.overlap(asteroids, player, playerDie, null, this); } //debugging function render() { //asteroids.forEachAlive(renderGroup, this); //lasers.forEachAlive(renderGroup, this); } //function renderGroup(laser) { //game.debug.body(laser); //} //add asteroids function addAsteroid() { var asteroid = asteroids.getFirstDead(); if (!asteroid) { return; } //set x values for asteroid to random number (0, 1500) asteroid.reset(game.rnd.integerInRange(0, game.width), -50); asteroid.animations.add('tumble', [0, 1, 2, 3, 4, 5, 6], 5, true);'tumble'); asteroid.body.setSize(30, 30, 20, 20); asteroid.body.gravity.y = 150; asteroid.checkWorldBounds = true; asteroid.outOfBoundsKill = true; } function setUpAsteroid(asteroid) { asteroid.anchor.x = 0.5; asteroid.anchor.y = 0.5; asteroid.animations.add('boom'); } function fireBullet() { if( > bulletTime && lasers.countDead() > 0) { var laser = lasers.getFirstDead(); laser.reset(player.x, player.y - 10); laser.anchor.setTo(0.5, 0.5); laser.body.velocity.y = -500; laser.checkWorldBounds = true; laser.outOfBoundsKill = true; bulletTime = + 300; } } function asteroidVsLaser(laser, asteroid) { var explosion = explosions.getFirstDead(); explosion.reset(asteroid.x, asteroid.y); explosion.animations.add('boom', [0, 1, 2, 3, 4, 5], 5, false)'boom'); laser.kill(); asteroid.kill(); } function playerDie(player, asteroid) { //player.kill(); //asteroid.kill(); //explosion.reset(player.x, player.y); } thanks for any help in advance and may the force be with you
  23. Scenario: I want to move a mesh along the z axis. Option 1: set up a Babylon Animation using keys etc to move the mesh to desired position Option 2: update the meshes position.z (+1 or -1) in the render loop until the desired position Question: Which of these options would be the most CPU intensive? Is there something special about Babylon Animations that make them worth using over option 2? Thanks
  24. I wrote a simple function to pause rendering. window.addEventListener('blur',function(){ _ENGINE.stopRenderLoop() console.log('paused'); }); window.addEventListener('focus',function(){ _ENGINE.runRenderLoop(function(){ _SCENE.render(); }) console.log('resumed') }); When the playground code is running, i tried to pause the game by clicking the outside elements of my web browser (you can click on the console log, or the URL tab to activate the pause). The funny thing is, when I click on the scene to resume the rendering, the cube has already travelled a lot. It's as it the computations for the cube (its animations) wasn't paused. Playground link: Any ideas?
  25. I have a sprite animation for making a sprite jump which has a a crouch before it actually jumps and I have a function to check for when it actually is time to lift off. But when the sprite it falling its height is taller than the sprites I have for the next animation which is landing and contains the crouch in reverse. What is the best way to stop the sprite from working jumping back up to its current y value at the top of the sprite but rather further down so it doesnt look like its crouching in mid air.