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
    • Facebook Instant Games
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 597 results

  1. Introduction: Hi everyone I'm 3D Modeling, rigging and animation artist with 5 years experience game industry(Mobile, PC). If you are looking for 3D artist or animator for your project. Please contact me and i would make your project to the next level. Service features: Character designs 3D modeling, texturing 3D rigging and animation My porfolio: Contact us: Email: Discord: Des3dteam#1619 Skype: Des3D Some of our works: Some item stuffs
  2. We just released full support for Spine in our Quest AI IDE. Quest is the simplest way to start building games and Playable ads that runs on Phaser 3. Simply .zip up your spine projects and import them into Quest to start using your animations in timelines. Trigger any animation, change skins, or add attachments to slots, all without writing a single line of code. We're super proud to be able to integrate with Spine and make animations way more robust in our platform (been months in the making for us). It's totally free to make an account to start building some really fun stuff (we make most of our money off enterprise accounts). Thanks for checking it out and would love any feedback!Sign-up: Andrewco-founder of Quest AI
  3. I wanna create a single animation using multiple sprite sheets that I have, which are a kin da content.
  4. There are multiple atlas animations I load in (idle, walking, running, etc). How can I attach all these animations to the player without loading in all the .png files into a single spritesheet? I would then play an individual animation under a certain circumstance (left key pressed, right key pressed, etc).
  5. Hi everyone, iam Dante. Pixel artist - 2D animator I have been doing pixel art game for over 8 years Email: My gallery: Skype: wonman321 I love making pixel art game, i really really love it and i can handle many styles (please check my work below) Iam currently available to work on PAID project, both flat rate or hour rate Skill features: Character design Game mockup Animation Special effect Pixel intro / trailer Art direction Music video commission: Bloody Quest project: Amazing fantastics Monsters X Monsters project: Some project i have worked on: Monsters X Monsters: ---- Android: Link Golf Story: (Main animator) (nintendo swich) --- trailer: Girdthyself: (Main artist / animator) ---- Website: Crapface X Elevation - Swim meet: (music video): Story of the End - Revere: (remake design - main animator) --- website: Amazing fantastics: (remake the whole game - main artist) --- website: Midnight Wave (Portrait artist / Trailer animator) (2018) -- website: Yu yu Hakusho (Beat 'em up) (Main artist / Animator) (2018-2019) Sport Story (The Golf story 2) (Nintendo Switch) (Main Artist / Animator) (2019) Contact me if you are interested: Email: thanks for watching.
  6. Hi! My name is Julia. I’m a 2D Game Artist and Animator. I create 2d characters, objects, UI, backgrounds and flash animations for the games. I use Adobe Photoshop, Illustrator and Flash. I'm interested in full-time freelance, and also individual projects. I prefer fixed rate. Please send me the asset list or detailed description of your project. Then I can tell the full cost and deadlines. You can see my works: You can contact me at
  7. Hi, Hope someone can help if I try to do a key press my animation stops until I let go of the key. (keys a and d) to move left and right - is there a way for the key press .onDown to be used once or an aletrantive way to have my animation play when the key is held down, I've tried using the docs but can't seem to find a solution eg demo below code snippet when pressing d if (this.keyRight.isDown){'walkProper'); this.player.flipX = false; this.player.setVelocityX(150); } Thanks in advance Eric
  8. Computer graphics, animations, games and interactions are now self-evident. You just have to pick up your smartphone, tablet, desktop computer or what else and you feel intuitively when you have to swipe, click, drag or pinch zoom. You also expect nothing less than nice interfaces with smooth animations. But it wasn't always like this... There were times where there were no editors like Photo and Designer, nor Illustrator, nor Photoshop, and even computers, games and animations of frames didn't exist... I wrote a blog series of six where I like to take you on a journey through time with our focus on learning about the development before and during the creation of computers, digital graphics, animations, games, graphical interfaces, graphics software, interactivity, 3D, a pinch of the first games, the creation of the internet and a touch of virtual reality. I have made more than 110 illustrations for this series and also provide each part with at least one interactive to bring the events alive as good as possible for you. Part 1 is out there now! Hope you like it and I'm sure you learn something new from it and be surprised by some events! There will be a new part every month from now. Enjoy! English: History Interactive Computer Graphics - Part 1 Dutch: Geschiedenis Interactieve Computergraphics - Deel 1
  9. Hi, I am trying to import an animated character from but without success. I am a developer, not a 3D Designer so I don't really understand what happening ^^ I go on, select a character and an animation (walking) I check "in place" animation", export with ".dae" extension, 24 frames/s, uniform key frames reduction, with skin, and finally download the the character (zip), I import the .dae in Blender, then export it with the BabylonJS exporter I go an error in log : can't export because of armature I read I just have to ctrl+A in Blender then scale => indeed, after that, the export is working, but it breaks the animation If I continue, load the .babylon in babylon I see the character loaded, with textures But... animation make absurd things, the character is not "moving in place" but totally go away It is not a direct Babylon problem : the problem is this "ctrl +A > scale" that breaks the animation. My question is simple : after imported the .dae in Blender, what I have to do to export it correctly, with animation, in .babylon format ? My goal is just to load ANY animated character in BabylonJS, ideally, a character moving, jumping, and crouching. That could be another question : how to get many animations from mixamo in a single export ? I understood we then just have to select frame index and play the good animation. So, loading few times the same character for different animation seems not very smart ^^ Thank you for your help
  10. I use sprite sheets to take care all the animations in a web game. I have some really big sprite sheet with a size of 14450x5406 and the game will be so laggy when I'm trying to render this into the stage. Since it is a response time vary application which require a no-lag performance, I decided to split those sprite sheets into multiple sprite sheet such that each of them with a size of 2048x2048 after I've read some post as below: The performance is better than before in the first play of the animation. Let say if the application will 100% chance become laggy in the previous, it's just 50% now. However even the animation is smooth in the first play, It'd become laggy if I gonna render it again after 2-3 minutes(It's still smooth if I'm rendering it again immediately) . So splitting the large sprite sheet into multiple sprite sheets may helps a little bit on laggy issue but still the problem exists and I couldn't know the reason. I play all these huge size animations right after another animations(small size): By laggy I am meaning that the Chrome is like totally freezing. I read some posts and some of them said that it's because GPU can't rendering anything while uploading texture into GPU. So I've posted another question in the past: So I prepared all the animation sprite in a loading screen and turned off the GC with the following code: But the same thing is happens. The Chrome is freezes every time when playing the animation with sprite sheet of large size(freezes happens on entering onComplete), not on the small one. I would like to know any possible reasons and suggestions about this issue. If this cannot be solved in programming level, could I resolve this in hardware way? like buying a better graphic card with more video memory?
  11. Hi) I use this example But in this example we have all trajectory in first step. I tried to change this example for my question: In this example I see animation of the last segment of my all path. How can I change this situation and see animation from my first point to the last. This situation occurs when we initially do not know the entire trajectory. We only know the current and previous trajectory node. Could anybody help me?
  12. Play "Offerlings" in your browser" For the game jam Ludum Dare 43 we decided to try out BabylonJS. We knew we wanted to create 3D game and for it to run on the web and on mobile browsers. We'd previously created our own JS engines with THREE.js as the renderer, but the time constraints of the game jam (3 days) meant we wanted to an existing game engine. We looked at other game engines that had HTML5 exports (Unity, Godot, Unreal), but none of them really worked on mobile. We're really happy with using BabylonJS, the examples were great for learning how to add various features into our game. Looking forward to the AmmoJS plugin in version 4.0! Let us know what you think of the game, and if you spot any problems.
  13. I'm trying to add a bubble-pop spritesheet animation to my game. I have added other sprites fine, and when I add the sprite for the bubble, everything is still good. However, when I go to add the animations, I get an error, "Cannot read property 'add' of undefined. How can I animate the bubble? var config = { type: Phaser.AUTO, width: 1366, height: 768, parent: "canvas", scene: { preload: preload, create: create} }; var game = new Phaser.Game(config); function preload () { this.load.image('freeplayBG', 'images/freeplay-BG.png'); this.load.image('shark', 'images/nice-shark.png'); this.load.spritesheet('bubblePop', 'images/bubble_pop_under_water_spritesheet.png', {frameWidth: 394, frameHeight: 511} ); } function create() { //Set background this.add.image(685, 384, 'freeplayBG'); //Set shark and make draggable var shark = this.add.sprite(200, 300, 'shark').setInteractive(); this.input.setDraggable(shark); this.input.dragDistanceThreshold = 16; this.input.on('drag', function (pointer, gameObject, dragX, dragY) { gameObject.x = dragX; gameObject.y = dragY; }); //create the bubble sprite var bubble = this.add.sprite(700, 300, 'bubblePop'); console.log(bubble); //Sprite {_events: Events, _eventsCount: 0, scene: Scene, type: "Sprite", parentContainer: null, …} console.log(bubble.animations); // undefined console.log(this) //Scene {sys: Systems, game: Game, anims: AnimationManager, cache: CacheManager, plugins: PluginManager, …} bubble.animations.add('pop'); //error happens here'pop', 10, false, true);
  14. I'm having some issues rotating a bone while any other animations are playing. No rotation occurs until I stop/disable all of the animations that involve the same skeleton. For example this code will rotate the torso, but only if the animations aren't playing. scene.registerBeforeRender(() => { skeleton.bones[1].rotate(BABYLON.Axis.Y, 0.01, BABYLON.Space.LOCAL) }) ... var idleAnim = scene.beginAnimation(skeleton, 0, 89, false); // set to true to stop rotation It may seem like it is because the animation has a conflicting position for the bone but I'm pretty sure that isn't why. I've made a separate model that only has animated legs, and I can't turn its head bone while the legs are moving. It does appear to be possible though: This pg dates back to before babylon had bone.rotate() and it does everything manually via linear alg. Any idea what I'm doing wrong?
  15. I have several animations which are a single key frame. I guess we could say they're just a pose. Is there a way to transition to that pose smoothly? I'm imagining something like whatever the current animation code does to go from one frame to another, except it would go from bones in *any state* to moving those bones towards anything saved in a certain keyframe. Unless that stuff is baked, which I guess would be an issue. In any case, something like graduallyToPose(skeleton, someFrame, deltaToApply) is what I have in mind. Does something like that exist? Or are there some recommended building blocks from which I could make it? I see an easy way to make (fake?) an equivalent behavior with animation blending. If I turn all my poses into 2 keyframes then I can make each of them an ever-looping 2 frame animation. Then I can blend between them endlessly, smoothly moving my character from any pose to any pose, and even being able to interrupt any transition and go to yet another pose. I just wasn't sure how performance heavy that would be given that I don't actually have real animations, and I would be putting a dozen of these on 50+ meshes each. Edit: The animation blending demo actually does have an 'idle' state which is 89 frames of no change and is essentially what I'm trying to get at with poses.
  16. How does one structure a humanoid mesh and then use it within babylon such that one can ray pick isolated body parts as they move through animations? Does one just leave each body part as a separate object in blender..? How will pickResult tell me that a ray traveled through the right hand? Currently the character is 11 separate meshes and animated completely in javascript, which makes the picking work just fine but is non-desirable for adding animations :D. Also not sure about the performance ramifications
  17. Hi, I'm trying to modify animations in real-time but it seems to be extremely difficult in practice. There are functions to modify bone rotations, positions, scaling and nice helpers like BoneLookController and BoneIKController... but all of them seem to break down when you change the animation (from walking to running for example). Every time I change animation, all the parameters are reset, causing terrible jerks and twitches when the system tries to blend the controller or rotation back into place. Is there a way to force animation blending off for single rotation or controller? I can't turn the blending off for the whole skeleton, because then the animations stop blending... obviously. Is this a known issue or is there any solution? Thanks in advance.
  18. I have animation this.anims.create({ key: 'left', frames: this.anims.generateFrameNumbers('man', { start: 1, end: 3 }), frameRate: 10, repeat: -1 }); and when i press left key, i play it if (cursors.left.isDown) { player.setVelocityX(-160);'left', true); } I understand that repeat param is responsible for looping animation, but i tried 0, 1, false, -1 and the animation still loops. I didn't find any DOC with all objects and there parameters, so i'm asking here
  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. This is how far I got. I want the animation(dragon-attack) to complete when the player hits the dragon and then continue the 'dragon-fly' animation. What would be a solution? function preload() { this.load.spritesheet('dragon', 'assets/demon-idle.png', { frameWidth: 160, frameHeight: 144 }); this.load.spritesheet('dragon-attack', 'assets/demon-attack.png', { frameWidth: 240, frameHeight: 192 }); } function create() { dragon = this.physics.add.sprite(400, 300, 'dragon'); dragon.setBounce(0.4); dragon.setCollideWorldBounds(true); dragon.setDisplaySize(100, 100); this.anims.create({ key: 'dragon-attack', frames: this.anims.generateFrameNumbers('dragon-attack', { start: 0, end: 10 }), frameRate: 10, repeat: -1 }); this.anims.create({ key: 'dragon-fly', frames: this.anims.generateFrameNumbers('dragon', { start: 0, end: 5 }), frameRate: 10, repeat: -1 }); this.physics.add.collider(player, dragon, meetsDragon, null, this); } function meetsDragon(player, dragon) { playerHealth -= 10;'dragon-attack', true); } thanks for your help!
  21. Good day everyone, here is playground attempt: I'm trying to make movement from point1 to point2 by arcus of sphere, and the core goal is to prevent gimbal lock in points of pi/2. Example demonstrates my attemps to make movement from the end of red line to the end of green line though rotating with quaternions around their cross product. The question is: should start quaternion be from target.position.toQuaternion() ? which property should be used in animation object? Thank you for any advices and notes. Theoretically, to rotate object around some axis via Quaternion I should make quaternion with rule (w, v), where w = cos(a/2), and v = n*(sin/a2), where a - is my angle, n - rotation axis, then convert it to the rotation matrix, and use this matrix to prevent gimble lock on the position transform. But in animation it is not working, I do not understand why. I am sure I am doing something wrong with BABYLON API, but I can not find the problem.
  22. Hi, If I create animation this way: myanim = scene.add.sprite('myanim'); scene.anims.create({ key: 'myanim', frames: scene.anims.generateFrameNumbers('myanim', { start: 0, end: 20 }), duration: 1000, hideOnComplete: true }); .. and later I want to change it's duration or frameRate - how to do that? I try this, but no luck: myanim.anims.duration = 3000; myanim.anims.frameRate = 15; myanim.anims.currentAnim.duration = 3000; myanim.anims.currentAnim.frameRate = 15; Animation still runs with the initiall duration.
  23. I want to stop the animation but this code doesn't work please help my. var createScene = function () { var scene = new BABYLON.Scene(engine); var camera = new BABYLON.ArcRotateCamera("Camera", 3 * Math.PI / 2, Math.PI / 8, 50, BABYLON.Vector3.Zero(), scene); camera.attachControl(canvas, false); var light = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0), scene); BABYLON.SceneLoader.ImportMesh("a", "scenes/", "ww.babylon", scene, function (newMeshes) { newMeshes[0].position = BABYLON.Vector3.Zero(); newMeshes[0].autoAnimate = false; newMeshes[0].autoAnimateLoop = false; }); return scene;}
  24. I'm trying to apply physics to a animated sprite. I used PhysicsEditor to generate the JSON and loaded the polygon shape for the first frame. Collision detection is not happening when i try to clear the shapes and load the polygon dynamically with respect to animation. Is there any method to clear and load the polygon dynamically to detect collision. Any thoughts ?
  25. I'm new to Phaser 3 and JS in general, so I apologize if I come off super noobish. I'm trying to wrap my head around animations and how to get specific data from an animation (like, frame number, image/frame displayed on pause) I have a sprite sheet that holds all the animations. Each of the six animations is only 2 frames. I have serious limitations in terms of size and how I pack the final "game" (I'm trying to meet facebook's playable ad requirements - a single html file - so I'm using the "assets as data uri" template as a starting point.) Below is how I am handling my animation (I feel as though it's wrong) I searched for examples of how to trigger the next animation when an animation is complete. function createGameObjects () { bg = this.add.image(512, 512, 'bg'); logo = this.add.image(512, 920, 'logo'); popUp = this.add.image(512, 460, 'popUp'); popUp.depth = -1; /* var data = this.cache.json.get('itemsData'); this.anims.fromJSON(data); */ let gearHelm = { key: 'helm', frames: this.anims.generateFrameNumbers('items', { frames: [1, 8, 8, 8, 8, 8, 8 ] }), frameRate: 12, repeat: -1 }; let gearTop = { key: 'top', frames: this.anims.generateFrameNumbers('items', { frames: [7, 11, 7, 7, 7, 7, 7] }), frameRate: 12, repeat: -1 }; let gearPants = { key: 'pants', frames: this.anims.generateFrameNumbers('items', { frames: [ 5, 5, 9, 5, 5, 5, 5] }), frameRate: 12, repeat: -1 }; let gearBoots = { key: 'boots', frames: this.anims.generateFrameNumbers('items', { frames: [0, 0, 0, 4, 0 ,0, 0] }), frameRate: 12, repeat: -1 }; let gearRing = { key: 'ring', frames: this.anims.generateFrameNumbers('items', { frames: [2, 2, 2, 2, 6, 2, 2] }), frameRate: 12, repeat: -1 }; let gearSword = { key: 'sword', frames: this.anims.generateFrameNumbers('items', { frames: [ 10, 10, 10, 10, 10, 3, 10] }), frameRate: 12, repeat: -1 }; this.anims.create(gearHelm); this.anims.create(gearTop); this.anims.create(gearBoots); this.anims.create(gearPants); this.anims.create(gearRing); this.anims.create(gearSword); // timed event to handle animation timedEvent = this.time.addEvent({ delay: 0, callback: onEvent, callbackScope: this, loop: false }); // log anim item console.log(gearSword); } // update function frameUpdateCallback (sprite, animation) { } // on event function onEvent () { this.add.sprite(512, 192, 'items').play('helm'); this.add.sprite(768, 320, 'items').play('top'); this.add.sprite(768, 576, 'items').play('pants'); this.add.sprite(512, 704, 'items').play('boots'); this.add.sprite(256, 576, 'items').play('ring'); this.add.sprite(256, 320, 'items').play('sword'); // pause on click / touch var _anims = this.anims; this.input.on('pointerup', function () { if (_anims.paused) { _anims.resumeAll(); animStopped = false; console.log(animStopped); popUp.depth = -1; bg.setAlpha(1); } else { _anims.pauseAll(); animStopped = true; console.log(animStopped); console.log(_anims.key); popUp.depth = 4; bg.setAlpha(0.5); } }); } I've also attached an animated gif to show what I am trying to achieve. Animation loops and continues until user clicks - then a popup shows. I would like to display the image of the animation frame within the popup box based on where it's paused at. So if I click and stop on item 6 - then display popup with item 6. Again excuse my noobish question which I'm sure is rather easy - I'm trying, and eager to learn. PS - I am coming from Construct :)~ Thanks in advance!