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

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 593 results

  1. Hi, I am trying to import an animated character from mixamo.com but without success. I am a developer, not a 3D Designer so I don't really understand what happening ^^ I go on mixamo.com, 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
  2. 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?
  3. Hi everyone, iam Dante. Pixel artist - 2D animator I have been doing pixel art game for over 6 years Email: wonman321@gmail.com My gallery: http://pixeljoint.com/p/41106.htm 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: https://www.youtube.com/watch?v=YyjTzc7EH4I Girdthyself: (Main artist / animator) ---- Website: http://www.girdthyself.com/ Crapface X Elevation - Swim meet: (music video): https://www.youtube.com/watch?v=YgSYbJ6r-kU Story of the End - Revere: (remake design - main animator) --- website: https://www.strashinerstudios.com/ Amazing fantastics: (remake the whole game - main artist) --- website: https://twitter.com/TAFUniverse Contact me if you are interested: Email: wonman321@gmail.com thanks for watching.
  4. Hi) I use this example https://www.babylonjs-playground.com/#72C7CT#3. But in this example we have all trajectory in first step. I tried to change this example for my question: https://www.babylonjs-playground.com/#X0MDYG. 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?
  5. 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.
  6. 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 bubble.animations.play('pop', 10, false, true);
  7. 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 https://www.babylonjs-playground.com/#IQN716#38 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: https://www.babylonjs-playground.com/#11BH6Z#92 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?
  8. 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 https://www.babylonjs-playground.com/#IQN716#9 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.
  9. 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
  10. Fric

    How to not loop animation

    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); player.anims.play('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
  11. 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!
  12. 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.anims.play('dragon-attack', true); } thanks for your help!
  13. Good day everyone, here is playground attempt: https://www.babylonjs-playground.com/#74G81U 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.
  14. 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: http://jill-korn.tumblr.com/ You can contact me at julie.korni@gmail.com
  15. 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.
  16. 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;}
  17. 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 ?
  18. 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!
  19. I wanna create a single animation using multiple sprite sheets that I have, which are a kin da content.
  20. Hi everyone, I start learning to use your software because he is really interesting and usefull but I encounter a serious problem with blender export animation. So I create some asset and put them little simple, but when I export the file and put it in babylon, all the animation are compiled in one and apply in all the assets; Let me show you with screen shots. As you can see in the first screen the asset have their own animation but in the 2 and 3 screenshot they have all animation of all the assets Is there a solution about that ? I'll be glad if someone as an answer, thanks you very much and have a nice day.
  21. old_blueyes

    delayed overlap animation

    Hi, Hope somebody can help, I have a sprite which i've coded to animate on overlap. But it's acting very strangely, currently when the sprite overlaps it will trigger the first frame of the animation. Which stays as a still frame, until the sprite finishes the overlap of which then the rest of the animation plays out. It's like there's a delay on the animation somewhere, can't figure out where. If there is, it would be strange as it switches to the first frame of the animation. But it should be one continuous motion. Appreciate it if anyone can take a look: https://codepen.io/old_blueyes/pen/GXxBmm Thanks
  22. Titus

    Walk Animation Shaking

    Hello, I have a player spritesheet with 25 frames for a walk animation loop. When I add the animation and play it without any velocity is works fine. When I add velocity to it I can see that the feet of the sprite are visibly shaking. I've tried playing around with the velocity values and there does seem to be less shakiness with lower velocity values but then the feet are just moonwalking on the floor . I'll add my code below. In the game the velocity is mapped to the right arrow but for testing everything is in the create method here:
  23. Hello everyone! How can I get a camera shake animation to work with ArcFollowCamera? I'd imagine this is useful for situations like a ball (that you're following) hitting a ground or a rocket lift-off sequence. Here's a playground for a cylinder (rocket) doing a liftoff in 1000ms. I can get a "shaking" animation working for the rocket. https://www.babylonjs-playground.com/#5HHLEC But when I try to do the same with the camera nothing happens https://www.babylonjs-playground.com/#5HHLEC#1 I'm guessing it's because ArcFollowCamera is overriding the camera's position with every frame. Is there a way to do this without resorting to the former? The problem with animating the rocket is it feels off seeing the rocket remain static on the screen while everything else shakes.
  24. In a blender armature modifier there is a setting called "Preserve Volume" which basically stops meshes from collapsing on themselves in some bone-related animations. I'm a newbie animator, but I'm aware that there is more to joints+deformations than just checking the preserve volume box and hoping things look good. This is particularly relevant given that some game engines, such as our beloved BabylonJS (also Unity) do not have this feature. So the question here is really what techniques do people recommend for keeping joints rotating/bending and looking nice in Babylon? An extreme example of volume being preserved versus not preserved occurs when twisting a model comprised of two cubes and two bones. With volume preserved we get what appears to be the twisting of a square column: Without volume preserved, we get twisting that collapses in the vicinity of the joint, creating something like an hourglass: If the twisting motion continues the central joint will get all the way squished: Something similar occurs in other twists such turning a head, in certain shoulder rotations, in internal/external leg rotation at the hip, and probably a bunch of other scenarios. A milder deformation occurs in movements that are mostly single-dimension rotations such as a knee or elbow bend.
  25. How do I play animations created in the blender action editor? I'm trying to organize walk, run, idle, etc animations and start/stop them by name. Also is there a particularly good way to import the blender objects that don't have any world position when the game begins? I noticed there are many different ways to load things. Objects in this game are spawned in after a receiving a network message, so there's no pre-existing concept of a scene (or my brain just isn't used to thinking about scenes). Even the terrain itself is chosen by the server. Which loading strategy should I employ? Blender scene: Action editor from under the dopesheet: Loading and positioning the character (exported with blender/babylon exporter 5.6.4): BABYLON.SceneLoader.LoadAssetContainer("./", "blocky.babylon", this.scene, function (container) { console.log('CONTAINER', container) var meshes = container.meshes var materials = container.materials // manually position the object somewhere that i can see it when the game starts up let whatever = meshes[0] whatever.position.y = 21 whatever.position.z = 4 container.addAllToScene() // can i just get rid of this somehow? // would prefer something like scene.add(new BlockyEntity()), executed later }) When inspecting the loaded `container` object, none of the animations arrays are populated. There does appear to be a `container.skeletons[0]._ranges` that has properties that match the names of my animations (crazy, walk, walkdss, etc). I'm not sure how to play them. Here is the character (appears to be hovering on the last frame of one of one of the animations? or maybe this is just the pose it is in in blender not sure) Thanks