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

  1. Hunt prehistoric creatures with your friends online. Build your own base, craft tools, and weapons to survive in a large-scale true cross-platform open world game. This game is an application of the engine I’ve built, to prove a statement: It is POSSIBLE to build a 3D version of the Internet, where instead of browsing through websites, we could jump from one 3D space to the next. I “invite” everyone to make this happen. I want you guys to build your own 3D spaces implementing your own ideas what the web should look like in the future. We could just link them all together and make this Interconnected Virtual Space happen - yeah, the Metaverse, for the Snow Crash fans out there Tech Details that I hope provokes further questions: Loading Assets on Demand is even more important in the Browser than on PC or Console. Internet speed is only a fraction of the speed of the hard drive. It is essential to only load whats visible if you want to provide an open world environment for users visiting your world the first time. LOD - Level of Details allows Web Browsers to show something immediately for the users just like an ordinary website. It may look poor and users can see the object improving as they are loaded, still, I think its a good trade-off. Users get a good enough view of their environment instantly and can start interacting with it immediately. Terrain and the Grid System I’ve created the terrain in Blender, then I split it up like a chessboard automatically using Javascript. It is easy/cheap to determine that which cell contains the given coordinate and every single cell in the Grid has a reference to its neighbors. This is the basis of server layers of optimization when it comes to rendering, AI, and collision detection, etc. A recursive search is very easy to do, using those links to neighboring cells. Lighting I've implanted basic Directional and Ambient Lighting to support Day & Night Cycles and Point Lighting for individual light sources like a campfire, torch etc. To my surprise, the difficult part was to get good looking flames, thanks to the lack of Alpha Sorting in WebGL, what I had to implement in Javascript instead. Animation I animate my models in Blender, export them to “.dae". The file format comes with a serious limitation, you can’t define multiple animations and it only maintains a list of keyframes as references. So I maintain a JSON file per “.dae” to define multiple animations by having sets of keyframes. E.g.: “{running: [0, 4], jump: [5,7], ..}”. But I kept it simple and didn’t take it to the realm of animations per body part. Physics In short, I was stupid enough to write my own ..on the other hand, I have a fine level of control over how much I allow it to run. Again, on mobile, it is crucial to have that level of control to navigate 200+ creatures in real-time. I have two different type of Collision Detection. Collision with the Terrain and collision with other model surfaces. Terrain collision is very cheap, this allows me to move so many NPC at once. Collision with other models is heavier though, but that allows me to climb random looking rocks. I optimized it enough to make it feasible to run on mobile devices. I use a low poly version of the models to determine the collision and I only run it for the models near the Player, utilizing the Grid System I mentioned above. AI NPCs can navigate a random terrain, avoid obstacles and “see” and “hear” other NPCs if behind them. At the moment, they move rather robotically, but this allows me to calculate, where they can move next without hitting any obstacles and how long it will take to get there. I only run the AI right before they get to the target location. Basically, 200+ NPCs make only 40-100 AI calls per second. ..I certainly have room for improvement here Multithreading in the browser is difficult but necessary to achieve good Frame Rate. Nothing but the rendering should be on the main thread ideally - Good luck to achieve it though I’ve managed to push most of the heavy logic into a speared thread, but AI is still running on the main one. In a thread you have very limited access to important functionalities of the browser, therefore, there is only so much you can do. Also, specific objects can only be passed by reference between threads, everything else has to be serialized on one end and deserialized on the other. You want to be careful how often you do it. Audio I use the Web Audio API that works as expected. On top of that, I implemented Audio Sprites: I compile all related sounds to a single mp3 file and that comes with a JSON object to define where certain audio snippets can be found. It's a fast, accurate and reliable solution unlike using Audio HTML Tag, but that one has its own use cases as well, e.g.: streaming an mp3 file comes for free, like streaming an internet radio station. Multiplayer - I use WebRTC and not WebSockets - I know, I know, hear me out. The idea was that COOP is a very likely scenario and players may only prefer the company of their friends. I that case, they don’t have to purchase access to a private server, as long as they are happy to let their world go dormant between gaming sessions. Plus, all the logic is implemented for single player mode on the client-side, which logic has to be duplicated on the servers, if I went down the WebSockets rout - just think about where the AI logic should be, server- or client side. I expect this one to be a controversial decision, ..sometimes even I'm not sure whether this was the “right" decision There is a whole lot more to this though. Resources could be distributed between players when it comes to AI to ease the load on the Host - I know it is a potential security issue, but there is a use case for it, like AI for distant NPCs in COOP as long as you have no hacker friends ..this could be crucial on mobile devices. Controller Support The Gamepad API provides you with raw access to every button and joystick. You certainly have to implement your own layer on top of that. Events for pressing/holding down buttons don't come out of the box. Implementation of the dead zone of joysticks is missing and it is inconsistent how you can access different types of controllers through the API, even the same controller but on different devices. In the end, you will have to provide a controller mapping implementation as well in your settings. But its totally doable and works like a charm. Touchscreen Support It's a tricky one. As I mentioned above, on iPhones its completely useless till Apple decides to comply with Web Standards. Even on Android, it is a bit tricky: For the UI you probably want to use HTML. It makes sense because it comes with all the neat features that make our lives easier until you realize that you can’t switch between weapons while running - wait, what? You see, while you are holding down the left side of the screen to maintain speed and try to click on a button, or any HTML element to switch weapons, the click event won’t fire. No click event will be fired while doing multi-touching. As a result, HTML and any fancy framework for that matter are no longer good enough solution own their own. UI When it comes to games we expect a whole lot more from the UI than on a website. Multi-touch support - as discussed above and even controller support is not as straightforward as you might think. You have raw access to the controller, so when a button is selected and the user pushes the joystick diagonally upward, you have no idea what is in that direction, therefore what should be selected next. You have to implement the navigation of your UI with a controller for yourself. And you need controller support because that's the only way to move around in VR and on consoles. Speaking of VR, you want to render your UI twice in VR - once for the right eye and once for the left eye - and only once when not in VR, just something to keep in mind Also, rendering the UI could be heavy. This might be a surprise but if you think about it, on a website you don’t do anything but the UI, so you have a lot mere leeway to work with, whereas in a game you don’t want the UI to impact the Frame Rate, so it has to be very lightweight and probably you want Scheduling to have a final say on what gets refreshed. Taking all this into account, I really don’t see how any framework could be a good option - they were simply designed with different requirements in mind and there is more downside to using any of them than upside. Precomputed Scene Occlusion Culling using a Grid System Most of the optimization is happening real-time or triggered on a regular basis while running the game with one exception: I render every cell in the Grid System from the point of view of every single other Cell. E.g.: Cell A can see cell B and C but not D. I literally diff two images with javascript to determine whether the given cube can be seen or not. Then I record the results in a JSON file, which is used for rendering. This reduces the number of cubes to be rendered significantly, but it takes about 40 hours to run this optimization for the whole terrain. Running the game on Mobile Devices iPhone runs WebGL significantly better than top-end Android devices but practically useless because Apple ignores important web standards. E.g.: Pinch zoom can’t be blocked, therefore when you use your left thumb to move around and right thumb to look around, instead of doing so you end up zooming back and forth the screen. It also doesn't support fullscreen mode - video does, but not the canvas element. Another interesting limitation on iPhone is that you can only have 25 elements in an array in GLSL, which translates to having only 25 bones in an animated model. This doesn't make animation impossible, but you can’t use most animated models that you buy in the stores, you have to do it again with only 25 bones. Profiling “What gets measured, gets managed”. The built-in profiler in Chrome certainly has its use-case, but not good enough for what we want, so probably you will have to build your own at some point with specific features. You want to know how long a certain section of your game runs per frame, e.g.: Rendering, AI, Physics, etc. and probably these sections won’t run sequentially, but they are interrupted by other processes that you don’t want to include into the specific measurement. One thing is for sure, you cant do optimization without identifying the source of the lags. - I've certainly wasted enough time trying Scheduling As long as you are pushing the limits of the devices it is always a battle for a smooth frame rate. Therefore, you have to implement a scheduling system to manage what is allowed to run and for how long. E.g.: whatever is loaded and processed in the background will have an effect on the frame rate even if it is running on a different thread, you want to throttle that. You don’t want to set variables through WebGL API unnecessarily. AI always varies how much calculations it has to do depending on the number of unique encounters of 200+ NPCs in a random environment. Basically, you will have to limit what runs and how long, manage what is a nice to have calculation and a game-breaking one and try to make it seamless for the user. Probably every single topic above deserves a dedicated post, so please feel free to ask anything - there is no stupid question - then I would like to use those questions to write an in-depth post on every single topic that helps fellow devs to overcome similar obstacles - no doubt I will learn a thing or two in the process Live Tech Demo is available on
  2. I'm a bit lost and confused about PlayAnimationAction. Here's a PG. Click on the cube to play animations. There doesn't seem to be a way to target only one of the defined animations - it always plays both. I would have expected there'd be a way to specify which animations (by name) should be played when this action is triggered. Am I missing a trick here?
  3. I've downloaded an fbx model from Mixamo, imported the fbx into blender and then exported to .babylon. When I load the model and begin a bone animation, the model distorts. Could someone tell me what I'm doing wrong? BABYLON.SceneLoader.ImportMesh("Akai", "scenes/", "skintest.babylon", this.scene, function (newMeshes, particleSystems, skeletons) { newMeshes.forEach(s=> s.material = mat2); newMeshes[0].rotation.x = -Math.PI / 2; newMeshes[0].scaling.x = .2; newMeshes[0].scaling.y = .2; newMeshes[0].scaling.z = .2; newMeshes[0].position.y = -20; that.scene.beginAnimation(newMeshes[0].skeleton, 0, 10, false, .1); }); skintest.log.txt
  4. Alright errybody This is a question more about maths than anything else, and i'm terrible at maths so I'm hoping someone (maybe @Wingnut) can help me here. My scene is loaded from a blender export, which in itself is partially an imported FBX from C4D (still waiting on that C4D exporter boys!). I have a mesh within the scene that has a set position, and I want to allow it to orbit in a circle when clicked or tapped by the user. Fundamentally this is fine and I have most of the logic in place, but I'm struggling to figure out how to make it animate from it's initial position. All of the example code I've seen make the object jump to a calculated first position and then animate, which is not what I want. Has anyone got some sweet ninja code that I can borrow steal that will do what I need? Additionally is there a convenient technique or built in method to add easing to the beginAnimation call, or to the calculated keyframes? Cheers! Here's my current code: var onMeshPicked = function(bjsEvent) { myPickedMesh = bjsEvent.source; var frames = 90; // number of points var parent = myPickedMesh.parent; parent.indexPoint = 0; var p=0; var points = []; var radius = 2; for (var i = 0; i < frames; i++) { // calculate the keyframes points.push( new BABYLON.Vector3((radius + Math.sin(i*Math.PI/frames))* Math.cos(2*i*Math.PI/frames), parent.position.y, ( radius + Math.sin(i*Math.PI/frames)) * Math.sin(2*i*Math.PI/frames))); } parent.points=points; var path3d = new BABYLON.Path3D(points); var tangents = path3d.getTangents(); //array of tangents to the curve var normals = path3d.getNormals(); //array of normals to the curve var binormals = path3d.getBinormals(); //array of binormals to curve parent.animationPosition = new BABYLON.Animation("animPos", "position", 30, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE); parent.animationRotation = new BABYLON.Animation("animRot", "rotationQuaternion", 30, BABYLON.Animation.ANIMATIONTYPE_QUATERNION, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE); var keysPosition = []; var keysRotation = []; for(i = 0,p=frames; i < p; i++) { keysPosition.push({ frame: i, value: parent.points[i] }); keysRotation.push({ frame: i, value: BABYLON.Quaternion.RotationQuaternionFromAxis(normals[i], binormals[i], tangents[i]) }); } parent.animationPosition.setKeys(keysPosition); parent.animationRotation.setKeys(keysRotation); scene.beginDirectAnimation(parent, [parent.animationPosition,parent.animationRotation], 0, frames, false, 0.25,null); };
  5. Hi, I hope that I find you well, I am a little stuck. I have a group of sprites, that on overlap of another jump sprite image, I require it to play the jump animation, but only on the individual sprite within the group, when it has overlapped. My code, is pretty much working how I want apart from this issue, in the current build, on overlap the animation will play for all sprites within the group (not an individual basis), and will trigger again (beyond the original, overlap) if another sprite hits the jump image. Appreciate any assistance. var game; var globalParams = { calculatedWidth: 1350, calculatedHeight: 900 } var GameResolution = { _1350: 1350, _960: 960 }; function calculateSize() { // Get Pixel Width and Height of the available space var w_w = window.innerWidth * window.devicePixelRatio; var w_h = window.innerHeight * window.devicePixelRatio; var g_w = w_w; // We prepared all assets according to aspect ratio of 1.5 // Since we are going to use different assets for different resolutions, we are not looking at the resolution here var originalAspectRatio = 1.5; // Get the actual device aspect ratio var currentAspectRatio = g_w / w_h; if (currentAspectRatio > originalAspectRatio) { // If actual aspect ratio is greater than the game aspect ratio, then we have horizontal padding // In order to get the correct resolution of the asset we need to look at the height here // We planned for 1350x900 and 960x640 so if height is greater than 640 we pick higher resolution else lower resolution if(w_h > 640){ globalParams.selectedResolution = GameResolution._1350; globalParams.calculatedHeight = 900; globalParams.calculatedWidth = w_w * (900 / w_h); } else { globalParams.selectedResolution = GameResolution._960; globalParams.calculatedHeight = 640; globalParams.calculatedWidth = w_w * (640 / w_h); } } else { // If actual aspect ratio is less than the game aspect ratio, then we have vertical padding // In order to get the correct resolution of the asset we need to look at the width here if(w_w > 960){ globalParams.selectedResolution = GameResolution._1350; globalParams.calculatedWidth = 1350; globalParams.calculatedHeight = w_h * (1350 / w_w); } else { globalParams.selectedResolution = GameResolution._960; globalParams.calculatedWidth = 960; globalParams.calculatedHeight = w_h * (960 / w_w); } } } window.onload = function () { calculateSize(); game = new Phaser.Game(globalParams.calculatedWidth, globalParams.calculatedHeight, Phaser.AUTO, 'gameDiv'); game.state.add('main', mainState); game.state.start('main'); //game.forceSingleUpdate = true; } var yourGroup; var mainState = { preload: function() { if(!game.device.desktop) { game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.scale.setMinMax(game.width/2, game.height/2, game.width, game.height); } game.scale.pageAlignHorizontally = true; game.scale.pageAlignVertically = true; // Background game.stage.backgroundColor = '#71c5cf'; // Horse Sprites for (var i = 1; i <= 3; i++) { this.load.spritesheet('runner'+i, 'assets/horse-'+i+'.png', 368, 300); } // Other Sprites game.load.image('fence', 'assets/jumpfence1.png'); game.load.image('track', 'assets/grasstrack1.png'); }, create: function() { this.jumpGroup =; this.timer =, this.addNewJump, this); this.horseGroup =; this.horseGroup.enableBody = true; this.horseGroup.physicsBodyType = Phaser.Physics.ARCADE; this.addHorse(this); }, addHorse: function() { for (var i = 1; i <= 3; i++) { var posY = game.rnd.integerInRange(300, 500); var posX = game.rnd.integerInRange(30, 120); geegee = this.horseGroup.create(posX, posY, 'runner'+i); // Add 'sprite' to the group this.horseGroup.sort('y', Phaser.Group.SORT_ASCENDING); geegee.animations.add('gallop', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 20, true); geegee.animations.add('jump', [4, 11, 12, 13, 14, 15, 16, 17, 4], 14, false); } }, addJump: function(x, y) { var fence = game.add.sprite(x, y, 'fence'); this.jumpGroup.add(fence); game.physics.arcade.enable(fence); fence.body.setSize(50, 350, 105, 0); fence.body.velocity.x = -500; fence.checkWorldBounds = true; fence.outOfBoundsKill = true; }, addNewJump: function() { this.addJump( - 40, -'fence').height); }, update: function() { this.horseGroup.forEach(function(item) { // jump fences, this.jumpGroup, this.fenceJump, null, this); this.hurdle(); // move up and down field if (item.x > game.width - 650) { item.x = game.width - 650; item.body.velocity.x += game.rnd.integerInRange(-5, 0); } else { item.body.velocity.x += game.rnd.integerInRange(-5, 5); } if (item.x < 50) { item.x = 50; item.body.velocity.x = 0; } }.bind(this)); }, fenceJump: function(horseGroup,jumpGroup) { this.horseGroup.forEach(function(item) { item.body.velocity.y = 1; hurdleFence=false; }.bind(this)); }, hurdle: function() { this.horseGroup.forEach(function(item) { if(!this.hurdleFence){ //check if we already have -50 gravity or not if(item.body.velocity.y > 0){, this); function airJump() { item.body.velocity.x = 5; item.body.gravity.x = 100; }'jump');, this); function groundGallop() { item.body.velocity.y = 0; } } else {'gallop'); } } }.bind(this)); }, };
  6. Can I play the animation starting from random frame, and then loop? Say I have 20 frames. I want to start from 8th, continuing to 20, and then loop from 1st all the way to 20th and so on. This doesn't seem to do anything: animations.frame = 8;"all");
  7. Hi everyone! I have a personal project that I need help with - mostly [basic] modeling and animation. I don't have any funding apart from my own paycheck, but I'm happy to pay, and spread the project out across paycheques as required. What I need (most important to least important): 1) A 3D shape to present two lines of text (one small and one large) and a circular logo I'm planning to use the GUI system to draw the text on a transparent plane just in front of the surfaces of the object I need to be able to change logo and text on the fly, and then animate the entire thing as a single object (rotation/flip and slide) Think of it like one of the boxes that slides from the bottom left corner of a news report or documentary with the name of the person being interviewed Materials, 3d shaping, texture, bump-mapping etc to add visual appeal, but I'm no artist A vague concept has been attached to this post 2) An animated asset to convey information about a playing song I'm most partial to the idea of a spinning record that I can put text on the label of, with a needle on the side A spinning CD would work An animated VU meter or spectrum peak graph would also work It will also need some kind of surface to place artist/track name on 3) A basic representation of a person Cone body, sphere head and disconnected sphere hands is absolutely fine I need to be able to change the colour of the body/shirt/whatever on the fly I need basic animations with: (1) waving a 'hand' in the air; (2) waving both 'hands' in the air; (3) clapping 'hands' above 'head'; (4) jumping and waving an oversized #1 foam hand in the air; and (5) bouncing (running gait) while waving 2 oversized foam hands in the air, possibly wearing a beer-bong hat. Assets will be presented on a flat (ortho, 90 degree) autonomous (non-interactive) stage, but will be spun, flipped and rotated, in addition to the required built-in animations. I will sort out the code side of things for the most part. PM me if you're interested.
  8. Hi, I'm pretty new to Babylon.js, only started using it a few days ago, but really enjoy it, great work! I encountered some odd behavior with using deterministic lockstep on my setup, when running the example from the Animation page ( on my laptop's display (120Hz) the animation is twice as fast as on my connected monitor (60Hz) - tried with both Latest and Stable version, with both Cannon and Oimo plugins. My first guess would be that the algorithm is only prepared to handle low FPS, and does not take into account possible higher values. Also tried to dig in to the project on GitHub, but since I'm not that familiar with the structure, sadly I did not find the sources responsible for the behavior. Could some expert please verify my finding? Thank you, keep up the good work, cheers!
  9. Hi everyone, iam Dante. Pixel artist - 2D animator I have been doing pixel art game for over 6 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: Contact me if you are interested: Email: thanks for watching.
  10. In Phaser 2 I was able to load a spritesheet and then define a simple animation that would loop through the spritesheet frames. // Defined in the preloader state. this.load.path = 'assets/avatar/'; for (let i = 1; i < 8; i++) {'avatar_1_' + i, 'base/avatar_1_' + i +'.png', 16, 24); } // Use the spritesheet when adding the sprite. this.hero =, y, 'avatar_1_' + style); // Define an animation and start playing it. this.hero.animations.add('stand');'stand', 5, true); With Phaser 3 I'm trying to understand how to convert this to the new animations model. // Still loading the spritesheets in the preloader. this.load.path = 'assets/avatar/'; for (let i = 1; i < 8; i++) { this.load.spritesheet('avatar_1_' + i, 'base/avatar_1_' + i +'.png', { frameWidth: 16, frameHeight: 24 }); } // This doesn't appear to have changed much either. this.body = this.scene.add.sprite(x, y, this.asset); // Now I've tried just creating the animation: this.anims.create({ key: 'stand', frameRate: 5, repeat: -1 }); // And then using it on the sprite, but it's complaining about that it: // Cannot read property 'frame' of undefined'stand'); Is it still possible to define an animation that just loops through the sprite's spritesheet's frames? If not, do I need to define an animation for every spritesheet I'm using? (Such as in the official Phaser 3 tutorial, Thanks!
  11. emilyso321

    2D Artist for Hire

    Hello, I'm Emily and I'm a freelance artist looking for paid projects, small or part-time. I'm currently booked up on revenue share projects, so I'm only available for gigs that pay as I work. I specialize in 2D game graphics, including: - UI - backgrounds - 2D animations - illustrations/concept art I'm also open to doing anything else 2D animated or fully illustrated (cover art, comics...) For samples of my portfolio, please visit: If you feel my style of art would be suitable for your project, please contact me at: Otherwise, please feel free to check out/play some games I've worked on: Thank you for your time and consideration. I hope you enjoy my work
  12. forleafe

    Delta time is ruining my animations

    I'm making a game where the game loop's frame rate is controlled and kept consistent with: renderer.ticker.add(function(delta){ deltaGlobal = delta; state(); }); However because of this, it causes my sprite animations to skip frames and look extremely choppy and ugly. Does pixi have a built in way to handle this that I'm just not seeing? Or are we still forced to use external scripts like this: Obviously if there isn't a built in feature for animations to run smoothly while the framerate is being controlled with a delta, then that might be a pretty essential feature that should get added soon.
  13. Hi all, Slowly making progress on my character creation game. I've layered multiple sprites, so that each sprite can be easily "tinted" to the user's preferred colour. The layers so far are added like so: Cat Body Pupil Face/Eye shape Each layer is animated. The pupil and the face are aligned, hence should be playing the same frame as each other to look correct. This works fine up until a point. The issue is, when the user selects the eye shape they desire, the two sprites go out of sync, and the animation looks something like this: This is the relevant code to trigger the event: facekey = 'catfacegoth'; create function; player = this.physics.add.sprite(200, 370, 'whitecat').setInteractive().setDataEnabled(); playereyes = this.physics.add.sprite(260, 350, 'cateyes').setInteractive().setDataEnabled(); playerface = this.physics.add.sprite(260,350,facekey).setInteractive(); normaleyeicon.on('pointerdown', function (pointer, normaleyeicon){ facekey = 'catface'; console.log('normal face'); }); gotheyeicon.on('pointerdown', function (pointer, gotheyeicon){ facekey = 'catfacegoth'; console.log('goth face selected');}); update function:'default', true); //body animation if(facekey == 'catfacegoth'){'gothblink', true); // face/eye shape'blink', true); //this is the pupil layer } if(facekey == 'catface'){'faceblink', true); // face/eye shape'blink', true); // pupil } My suspicion is that the pupil isn't restarting from frame 0 when the facekey variable is changed, but rather continues playing from the current frame. Is there a way to "reset" the current animation so that they both play from frame 0 when the facekey variable triggers the change?
  14. Hi, Trying to debug weird animation issue, when during animation it jumps to first/last frame and than back and continue further normally. Happens for both camera/mesh animation, as it is very rare its not easy to get some data Maybe someone have seen similar issues ? Happens ofter on safari especially on iPhone 10. Thank you
  15. Hey everyone! My name is Rita. I am a freelance animator and illustrator. I have focussed on Animation over the last four years, coming from Illustration and Fine Arts background. I am a professional artist of academic training and more than 10 years of freelance experience, working in versatile media. I work with both traditional and digital tools, in particular seeking to achieve collaboration between the two. I am a big fan of aesthetics with passion for detail and high-quality craft. In the process of animation, my favourite stages are character and background design. To help you get a better sense of my skills and fit, my selected work can be found here: · My website: · My showreel: Extracts from my creative portfolio: Services I provide: - Concept design - Animation - Photography - Illustration - Character Design - Background Design - Gaming Props / Assets - Hand Painted Texture - Motion Design - Logo Design - Hand Painted Fonts Contact Details: web: email:
  16. I have an old school RPG I am making and I have two main scenes, the Overworld and Encounter scenens. The overworld is fine when switching to it but the problem is the Encounter, before I switch to it, I reset it so I can recreate it from scratch with a random monster in it. The problem is, every time I switch/restart the Encounter scene, the animation of the creature gets progressively faster. I do remove the animation key so I dont get the warning when I switch back to the Overworld scene. Just curious if I am taking the right approach to this and if so, do I need to clean up the sprite of the monster before hand so it doesn't make the animation speed up?
  17. Hello developers, I just start using phaser 3, and I bump into a question with the animation. Here is my code. var characterAnimConfig = { key: 'key-name', frames: scene.anims.generateFrameNumbers('spritenamehere', { start: 0, end: 7 }), repeat: -1, frameRate: 10, }; this means the animation will keep repeating from the first(frame 0) to the end(frame 7), my question is is there a way to let the animation only repeat the last two frame? expected frame goes like this: (0,1,2,3,4,5,6,7,6,7,6,7,6,7...). Thanks.
  18. I'm trying to make a Mario styled platformer, and i'm running into a problem where the jumping animation is overridden by the walking animation when pressing the up and right(or left) arrow keys together. Here's what i have in regards of the update and playing the animations. The character sprite is loaded as a spritesheet if it makes a difference. if(this.cursors.right.isDown){'walk', true); this.mario.flipX = false; this.mario.body.setVelocityX(500); } else if(this.cursors.left.isDown){'walk', true); this.mario.flipX = true; this.mario.body.setVelocityX(-500); } else{ if(this.mario.body.onFloor()){'stand'); }else {'jumping'); } this.mario.body.setVelocityX(0); } if(this.cursors.up.isDown && this.mario.body.onFloor()){ //'jumping'); this.mario.body.setVelocityY(-600); }
  19. I feel like this is something that gets asked a lot, but after searching a bunch I haven't found anything definitive. I've loaded my animations into pixi via a spritesheet on the Pixi loader and I can place an animated sprite in the game easy enough. But say I have my main character perform a running animation, but then I need her to do a punching animation. Is there an easy way to achieve this on the same sprite seamlessly? The only way I can currently think of how to achieve this is to manually remove the animated sprite from the container, then manually add a new animated sprite in its place, which just seems cumbersome and inefficient at best.
  20. NUGA

    Playing GIFs in Phaser 3

    Is it possible, and if so how, to play GIFs in phaser 3?
  21. Hi, could anyone give me hint why animations from 3d max are exported (babylon format) shorter than they are inside 3d max (have 170 frames instead of my 1000 or so)? (Do not optimise animation is checked in properties) Saw Tick = 160 inside exporter code , is thats where its happening ? Thank you.
  22. waverider

    cloning models animation

    Hy there! been long since i post in a while.. I've been trying to clone the animation of my model but it's not working! what am i doing wrong? this is a PG
  23. Hi, I am trying to make a goalkeeper game, which require goalkeeper mesh body to be able to "block" any football that hit toward him. The best would be the mesh collider that represent the goalkeeper to be reasonably precise while not being overkill, so I created boxes, set their physics imposter, and attach them to each bone. which look like this: however, I don't know how to make each box collidable to the falling sphere, did I miss anything, or does it require more complex way of implementation?
  24. Hello, Here's a PG: and here's what should happen: The problem is the large cylinder does not "lookAt" the smaller cylinder. The large cylinder is parented to an empty which in turn is parented to an animated mesh and I think that is where the problem is. Is this by design or am I being hard of thinking? Thank you,
  25. Introduction: Hi everyone We are a team of 3D and 2D artists / animators. We have worked a lot of designs / models / animations for game projects. If you are looking for 3D / 2D artists or animators for your project. Please contact us and we would make your project to the next level And of course with decent / indie price Service features: 1: Character designs / concept 2: 3D model for game / 3D printing 3: 2D / 3D animation Contact us: Email: Some of our works: Some item stuffs Pls contact us if you are interested. Email: