Search the Community

Hi! My name is Radmir. I am a professional musician - composer, sound-designer, sound engineer. I play string, keyboard, percussion instruments. I 've been doing music for over 10 years. I carry out a full cycle of works on music creation: Recording, mixing, mastering - creating music of any genre for animation, mobile and computer games, TV series, short and full-length films, commercial videos, advertising, etc. I work with Steinberg Cubase, Pro Tools, Logic Pro. Record sound on professional studio equipment. Portfolio: Creating a music I want to help people know themselves and feel the world around them deeper. Good music can treat. Knowing music, you first of all know yourself, because you are music! Contacts: E-mail: [email protected] Skype: radmirguitarhero Telegram, WhatsApp: 7-(911)-903-96-59 I will be glad to cooperation!

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 [email protected]

// Bullet if(this.CurrentAnim.name == "bullet_dead") this.CurrentAnim.Animsprite.onComplete = () => { this.IsDead = true; }; // Animation (animation class have member pixijs.animsprite) this.update = function() // update is game loop { if(!this.loop) { this.Animsprite.onComplete = () => { this.stopAnim(); // stop anim delete this; // delete animation obj }; } } // GameScene if(this.arrGameObj[i][j].IsDead) // every loop check dead obj and remove it { delete this.arrGameObj[i][j]; // to null, release in memory this.arrGameObj[i].splice(j); // pop in arrgameobj continue; } // Here's recorded video that help you understand my problem clearly 2022-12-12 16-07-27.mkv

Hi all, I want to put together a little snake game to teach myself PixiJs. What I'm trying to achieve is a smooth gliding effect when moving this block around. (press left/right to start moving). Unfortunately, I simply cannot get rid of the occasional 'stuttering' when rendering - so I'm starting to think I might be going about it the wrong way. Could somebody tell me what I'm doing wrong here? see: fiddle const graphics = new PIXI.Graphics(); const app = new PIXI.Application(); const movementSpeed = 150; const stage = app.stage; const blocks = []; stage.addChild(graphics); class Block { constructor(position=[0, 0], direction=[0, 0]) { this.width = 20; this.position = position; this.prevPosition = position; this.direction = direction; } render (alpha = 0) { let offsetX = (this.position[0] * alpha) + (this.prevPosition[0] * (1 - alpha)); let offsetY = (this.position[1] * alpha) + (this.prevPosition[1] * (1 - alpha)); graphics.drawRect(offsetX, offsetY, this.width, this.width); } update (delta = 0) { this.prevPosition = this.position; this.position = this.calculateNewPosition(delta); } calculateNewPosition (delta) { let movementOffset = movementSpeed * (delta / 1000); return [ this.position[0] + (movementOffset * this.direction[0]), this.position[1] + (movementOffset * this.direction[1]) ]; } }; function render (delta) { graphics.clear(); graphics.beginFill(0xFF0000); blocks.forEach((block) => block.render(delta)); graphics.endFill(); }; function update (delta) { blocks.forEach((block) => block.update(delta)); }; function changeDirection (direction) { blocks.forEach((block) => { block.direction = direction }); } const fps = 30; // Frames per second const frameDuration = 1000 / fps; // Maximum time per frame. const maxFrameDelta = 1000; // Upper limit on how long the frame takes to render. let previousTimestamp = 0; // Last timestamp. let accumulator = 0; // Remainder of time that we could not simulate in our fixed-step physics. (used to smooth out temporal aliasing) function gameLoop(timestamp = 0) { requestAnimationFrame(gameLoop); //Calculate the time that has elapsed since the last frame let frameDelta = timestamp - previousTimestamp; //Optionally correct any unexpected huge gaps in the elapsed time if (frameDelta > maxFrameDelta) elapsed = maxFrameDelta; //Add the elapsed time to the accumulator accumulator += frameDelta; //Update the physics simulation in discrete chunks, and keep whatever remainder is left in the accumulator. while (accumulator >= frameDuration) { //Update the physics simulation update(frameDuration); accumulator -= frameDuration; } // After performing the physics steps, we might have some remaining time in the accumulator. // This causes 'stuttering' (temporal aliasing), so we interpolate where the block should be rendered. // That is: we don't draw the block exactly where the physics simulation has placed it, but where it should be to get the smoothest animation. // (Thank you Glenn Fiedler!) let renderOffset = accumulator / frameDuration; render(renderOffset); previousTimestamp = timestamp; } function initStage() { document.body.appendChild(app.view); blocks.push(new Block()); // Keyboard input. document.addEventListener('keydown', function(event) { if(event.keyCode == 37) { changeDirection([-1, 0]); } else if(event.keyCode == 39) { changeDirection([1, 0]); } }); gameLoop(); }; document.addEventListener("DOMContentLoaded", initStage);

Hi everyone, iam Dante. Pixel artist - 2D animator I have been doing pixel art game for over 8 years Email: [email protected] 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 Midnight Wave (Portrait artist / Trailer animator) (2018) -- website: https://www.midnightwavegame.com/ 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: [email protected] thanks for watching.

Hi All, I'm a new developer and have been enjoying PIXI so far! I am new to most aspects of game and web dev as well, and I was glad to see an active forum like this one. If I have a game object composed of multiple sprites which all use the same x/y position, can I link the position values of the sprites to the x/y I am tracking in my wrapper object? I'm looking for a way to have the sprite position values reference the same memory location as a global x and y value, such that updating the global value would intrinsically update the position of a number of sprites. It looks like the sprite x and y values are getter/setter functions, so at that point I got stuck determining if this would be possible. For now I wrote a setX and setY function that loop through all the associated sprites and set their position values, and I was wondering if this is an efficient way to solve the problem? I'm trying to be cautious about processing overhead and want to understand best practices for any operations that are going to take place on every update scan. Thanks!

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?

Hello everyone , im sorry for my english so im pretty new to phaser3 and i want to create educational coding game for kids using typescript ,the kid should drag the arrows and drag them into places and then hit the button run so i declared an array to stock every arrow (image) that he dropped and then when run is clicked, i itterate the array and in function of the image's name the sprite get animated my code looks like this : //paly is the run button // this.play.on('pointerdown', () => { for (var i = 0; i < array.length ; i++) { console.log(array); switch (array[i]) { case left: { this.player.setVelocityX(5); player.anims.play('left', true); break; } case right: { this.player.setVelocityX(5); player.anims.play('right', true); break; } } } } the images are stored but when i hit run the sprite is animated by the last animation like if my array is like this {'left','left','right'} just the right animation is getting excuted ,please im stuck help me !!!

Hello everybody. I'm trying to make a thin mattress (a simple parallelepiped with textures) roll up. The first try was with a curve path ( a spiral shape) linked to the mesh, animated and modelled in blender, but the result in babylon js didn't preserve the deformation infos. The mattress was still, it didn't move except for a translation on the X axes, and inspecting the scene i could see the spiral in the meshes but not the information about the animation. So i tried with armatures cause i read that it's well supported in babylon js. With a simple curve animation of the bones the model's behaviour was the same as in blender, so it was performing in a great way. But, when i elaborated the bones structure to simulate the roll up, doing a spiral, the model was fine in blender but in babylon js it started behaving in a messed up way. My question is, is that an impossible type of armature animation to achieve cause it's not what a bone structure is supposed to do, or am i missing some exporting setting/modelling steps? In alternative, as far as you know, is there a way to achieve that kind of animation? I'm sorry (it's my first thread here) but I wasn't able to attach a photo of the behaviour cause an error occurred "/var/www/html/uploads/monthly_2019_09 could not be created. Please contact us for assistance." Thank you so much for the eventual support, have a great day! Arianna

Hi All, I was trying to create numbers count up/down animation with phaser and need some help. I found this https://codepen.io/netgfx/pen/GJgVJR but when adding it to my game i am getting a lot of errors. Any idea how i can create such animation with numbers. Thanks in advance.

I'm working on a custom data-visualization for large data sets. I originally have been building it with svg, but I'm hitting a peformance bottle-neck quickly with the number of elements I can render and animate. I need to have thousands of elements rendered, animating periodically for key transitions, and support zoom eventually. Only a fraction of the total elements rendered will ever need to animate with dynamic geometry at any given time. Everything else will animate via fadeIn/fadeOut. So for an estimated medium sized data-set case, if I have ~ 1000 data objects, I need to render ~ 3000 objects, all needing animations, but only about 1000 of those will ever need to dynamically update their geometry at a given time, simultaneously. Whenever I see advice for performance, I always see pointers to using textures and sprites. Unfortunately, I don't think I can use textures or sprites here instead, because I'm not just doing simple transforms on the geometries, but changing fundamental parameters of the geometries (ie: one custom path to another). I cannot share my project code unfortunately, but here is a sandbox with n number of randomly placed circles, each of which has its r animating. If you change n to 300 in App.js, things start getting pretty janky... While this is a contrived example, the fundamental requirements are accurate: large number of dynamic geometries animating simultaneously. Thanks in advance for any guidance / advice / direction / tutelage. Note - I am very new to webgl, and it seems very daunting, which is why I'm currently opting to use react-pixi. I'm not opposed to digging into webgl deeper to get what I need, but I have no idea where to start...

Hi, Does anyone know if a single frame in an animated sprite can be used as a trigger to change scene (Phaser 3)? I have an interface with about 30 images set in an animation loop and would like to be able to click on a particular image to change the scene. The result I would like resembles a JavaScript switch statement. Thanks

Babylonjs has been great so far, but yesterday I ran into an issue that I can't seem to fix. Problem: I'm trying to load in additional animations from .babylon files, however, when playing the animations on the original character it seems the original character's blend pose interferes with the newly loaded animation. The main character is a skinned mesh in a T-Pose without any animations. I then load in the walking animation (code snippet below) Loading the main character: BABYLON.SceneLoader.ImportMesh("", "./assets/models/babylon/", "character.babylon", this._scene, function(meshes, particleSystems, skeletons, animationGroups){ // Init character }); // later BABYLON.SceneLoader.Load("./assets/models/babylon/", "[email protected]", t._engine, function(s) { // Copy all skeletons let children = t._player.getChildMeshes(); for(let i = 0; i < children.length; i++) { if(children[i].skeleton) { children[i].skeleton = s.skeletons[0]; // children[i].updatePoseMatrix(s.skeletons[0].getPoseMatrix()); } } t._scene.beginAnimation(s.skeletons[0], 0, 59, true); }); However, I get this result. The t-pose is blended into the character animations causing this super wide stance; Which would suggest the walking animation transforms are relative? Can I make them absolute? Loading the [email protected] file at the start makes it behave as expected. I simply want to load it in at a later time. Preferably I wouldn't change the skeleton or bones but instead, copy over the animators onto the main rig, but this didn't seem to work either. Any help would be greatly appreciated.

How to use spriter in phaser/javascript, and how to export it?

Hello, my name is Alejandro. I'm an indie developer, I work also as freelancer. My portfolio is http://www.noisechip.com/, my rate is 10-15$ hour. Here are some examples of my work: You can also reach me by mail [email protected] and discord noisechip#8773. Thanks.

CODE var GameScene1 = new Phaser.Class({ Extends: Phaser.Scene, initialize: function GameScene1 () { Phaser.Scene.call(this, { key: 'GameScene1' }); }, preload: function () { this.load.spritesheet('Girl', 'Girl.png', {frameWidth: 256, frameHeight:256, endFrame: 12}); this.load.spritesheet('Boy', 'Boy.png', {frameWidth: 64, frameHeight:64, endFrame: 36}); this.load.image('Particle', 'Particle.png'); this.load.image('Ground1', 'Ground1.png'); this.load.image('Ground2', 'Ground2.jpg'); this.load.image('Ground3', 'Ground3.jpg'); this.load.image('PortalL', 'PortalL.png'); this.load.image('PortalR', 'PortalR.png'); this.load.image('Anthima', 'Anthima.png'); this.load.image('Yashit', 'Yashit.png'); this.load.image('Door', 'Door.png'); this.load.image('Win', 'Win.png'); }, create: function () { ground = this.add.sprite(300, 200, 'Ground1'); ground.setScale(1.5); ground = this.add.sprite(300, 680, 'Ground1'); ground.setScale(1.5); cursors = this.input.keyboard.createCursorKeys(); this.anims.create({ key: 'right', frames: this.anims.generateFrameNumbers('Boy', { start: 8, end: 15 }), frameRate: 10, repeat: -1 }); this.anims.create({ key: 'left', frames: this.anims.generateFrameNumbers('Boy', { start: 24, end: 31 }), frameRate: 10, repeat: -1 }); this.anims.create({ key: 'down', frames: this.anims.generateFrameNumbers('Boy', { start: 0, end: 7 }), frameRate: 10, repeat: -1 }); this.anims.create({ key: 'up', frames: this.anims.generateFrameNumbers('Boy', { start: 16, end: 23 }), frameRate: 10, repeat: -1 }); this.anims.create({ key: 'pause', frames: this.anims.generateFrameNumbers('Boy', { start: 16, end: 16 }), frameRate: 10, repeat: -1 }); Boy = this.add.sprite(200, 300, 'Boy'); door = this.add.sprite(710, 510, 'Door'); door.setScale(0.5); Boy.setScale(1.5); }, update: function(){ if (cursors.right.isDown) { if (Boy.x !=790) { Boy.anims.play('left', true); Boy.x += 2; } } else if (cursors.left.isDown) { if (Boy.x !=20) { Boy.anims.play('right', true); Boy.x -= 2; } } else if (cursors.up.isDown) { if (Boy.y !=30) { Boy.anims.play('down', true); Boy.y -= 2; } } else if (cursors.down.isDown) { if (Boy.y !=570) { Boy.anims.play('up', true); Boy.y += 2; } } else if (Boy.y >= 450 && Boy.x >= 680) { door.setInteractive({ useHandCursor: true }); door.setInteractive().on('pointerdown', function() { this.scene.scene.start('GameScene2'); this.scene.scene.pause('GameScene1'); }); } else { Boy.anims.play('pause', true); } } }); //create a scene with class var GameScene2 = new Phaser.Class({ Extends: Phaser.Scene, initialize: function GameScene () { Phaser.Scene.call(this, { key: 'GameScene2' }); }, create: function () { ground1 = this.add.sprite(400, 300, 'Ground2'); ground1.setScale(1, 1.2); cursors = this.input.keyboard.createCursorKeys(); this.anims.create({ key: 'rightG', frames: this.anims.generateFrameNumbers('Girl', { start: 0, end: 5 }), frameRate: 10, repeat: -1 }); this.anims.create({ key: 'leftG', frames: this.anims.generateFrameNumbers('Girl', { start: 6, end: 10 }), frameRate: 10, repeat: -1 }); this.anims.create({ key: 'pauseG', frames: this.anims.generateFrameNumbers('Girl', { start: 4, end: 4 }), frameRate: 10, repeat: -1 }); portalL = this.add.sprite(50, 420, 'PortalL'); portalL.setScale(0.1); portalR = this.add.sprite(750, 420, 'PortalR'); portalR.setScale(0.1); Girl = this.add.sprite(300, 440, 'Girl'); Girl.setScale(0.5); }, update: function(){ if (cursors.right.isDown) { if (Girl.x != 710) { Girl.anims.play('rightG', true); Girl.x += 2; } } else if (cursors.left.isDown) { if (Girl.x != 80) { Girl.anims.play('leftG', true); Girl.x -= 2; } } else if (Girl.x <= 100) { portalL.setInteractive({ useHandCursor: true }); portalL.setInteractive().on('pointerdown', function() { this.scene.scene.start('GameScene3'); this.scene.scene.pause('GameScene2'); }); } else if (Girl.x >= 680) { portalR.setInteractive({ useHandCursor: true }); portalR.setInteractive().on('pointerdown', function() { this.scene.scene.start('GameScene2'); }); } else { Girl.anims.play('pauseG', true); } } }); var GameScene3 = new Phaser.Class({ Extends: Phaser.Scene, initialize: function GameScene () { Phaser.Scene.call(this, { key: 'GameScene3' }); }, create: function () { ground2 = this.add.sprite(400, 320, 'Ground3'); ground2.setScale(0.2); var txt5 = this.add.image(400, 100, 'Win'); txt5.setInteractive({ useHandCursor: true }); txt5.setInteractive().on('pointerdown', function() { this.scene.scene.start('GameScene1'); this.scene.scene.pause('GameScene3'); }); var particles = this.add.particles('Particle'); var emitter = particles.createEmitter({ speed: 100, scale: { start: 0.05, end: 0 }, blendMode: 'ADD' }); var particles2 = this.add.particles('Particle'); var emitter2 = particles2.createEmitter({ speed: 100, scale: { start: 0.05, end: 0 }, blendMode: 'ADD' }); logo1 = this.physics.add.image(100, 100, 'Yashit'); logo1.setScale(0.3); logo1.setVelocity(100, 0); logo1.setBounce(1, 1); logo1.setGravityY(300); logo1.setCollideWorldBounds(true); emitter.startFollow(logo1, -60, 30); logo2 = this.physics.add.image(500, 200, 'Anthima'); logo2.setScale(0.3); logo2.setVelocity(100, 0); logo2.setBounce(1, 1); logo2.setGravityY(300); logo2.setCollideWorldBounds(true); emitter2.startFollow(logo2, 80, 10); } }); //settings required to configure the game var config = { type: Phaser.AUTO, width: 800, height: 600, physics: { default: 'arcade', arcade: { gravity: 10, } }, //set background color backgroundColor: 0x8080, scale: { //we place it in the middle of the page. autoCenter: Phaser.Scale.CENTER_BOTH }, scene:[GameScene1, GameScene2, GameScene3] }; var game = new Phaser.Game(config); What we are trying to do: –In Phaser we have scene changing functions to help us navigate through our game. –We are making 3 scenes in total. In 1st scene we have to reach a door to navigate to the second scene, the 2nd scene has a completely different Art type and not one but two portals which player should figure out which is the correct door to win the game. –3rd scene is radically different from other two scenes as it has physics components and particle effects, it is a Game win scene in a way. Elements in this scene –Backdrop Image of grass, Door added as sprite and Character added as sprite and animated. Boy = this.add.sprite(200, 300, 'Boy'); door = this.add.sprite(710, 510, 'Door'); ground = this.add.sprite(300, 200, 'Ground1’); –Boy is animated which we will see further in slide along with how we are changing scenes. Elements in this scene –Girl as a sprite, Backdrop picture as a sprite and two portals with same sprite. –Girl is animated which we will see further in slide along with how we are changing scenes. portalL = this.add.sprite(50, 420, 'PortalL'); portalR = this.add.sprite(750, 420, 'PortalR'); Girl = this.add.sprite(300, 440, 'Girl'); ground1 = this.add.sprite(400, 300, 'Ground2’); Physics in this scene –Code snippet for Particle effect var emitter = particles.createEmitter({ speed: 100, scale: { start: 0.05, end: 0 }, blendMode: 'ADD' }); –Code snippet for Bounce, gravity, setBounds and velocity logo1.setVelocity(100, 0); logo1.setBounce(1, 1); logo1.setGravityY(300); logo1.setCollideWorldBounds(true); Animation this.anims.create({ key: 'right', frames: this.anims.generateFrameNumbers('Boy', { start: 8, end: 15 }), frameRate: 10, repeat: -1 }); –This is an animation clip we have similar clips for left, up and down animation which we can see in the Rar file attached with work. –This snippet sets speed of animation with frameRate and which frames are included in clip with frames. –Usage, we use this snippet to activate the respective clip. if (cursors.left.isDown) { if (Boy.x !=20) { Boy.anims.play('right', true); Boy.x -= 2; } } Scene Change if (Boy.y >= 450 && Boy.x >= 680) { door.setInteractive({ useHandCursor: true }); door.setInteractive().on('pointerdown', function() { this.scene.scene.start('GameScene2'); this.scene.scene.pause('GameScene1'); }); } This snippet takes us to Scene 2 from Scene 1.

Hi all, I'm making a shmup game at the moment. I'm trying to animate player's diagonal movements but can't get it to work. Any help you could offer would be greatly appreciated. First, I created the animation: this.anims.create({ key: 'rightUp', frames: this.anims.generateFrameNumbers('player', { start: 30, end: 33 }), frameRate: 10, repeat: -1 }); then when the player wants to go up&&right: if(this.keyLeft.isDown&&this.keyUp.isDown){ this.player.anims.play('rightUp', true); var isPaused = this.player.anims.currentAnim; var progress = this.player.anims.getProgress(); // console.log(isPaused) console.log(progress) } Everything else works perfectly fine (e.g. left, right, up, and down). My console just returns 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 when I press the up and left arrow at the same time. In contrast for any other motion, it returns the frame number it's playing. Thank you in advance, Bong

So to preface this, I've already looked through the docs for something that could do what I want but I couldn't find anything too useful. So I'm trying to make a sprite grow cracks over time (think like in minecraft when you mine), except I don't want to have to create a spritesheet of no cracks to cracks and have to loop it for every sprite texture. I'm looking for someway to play a standard opaque animation over each item I want cracks to form on. Is there anyway to do this? The only method I could think of would be to at the time I want the cracks to appear, to spawn a sprite right on top of the current sprite that is just a opaque cracking animation. This would work, but creates the challenge of having to deal with these opaque cracked-animation sprites now, especially in a multiplayer settings when I'm trying to run as efficiently as possible. If it comes to it I'll use this system and figure out a way to handle them but would rather have something that I can tie to the sprite that self destroys like an animation of its texture would. Let me know if I need to be clear, kind of rushed this. Thank you!

I wanted to know if it's possible to load an animated sprite in preload() and use it in preload(). Essentially I am trying to get an animal to run across the screen to mark the progression of loading. I have a simple graphic rectangle setup as a basic loading bar right now. If I try to update the position of the sprite with this.dog.x it throws an error that x is not a property.

Hey guys, i tried to make a soft sprite animation with PIXI.js, i learn about the ticker and i tried to implement, but is a loop, and its no use because is a movimentation player. See the print Is a isometric map, and i need I need the player to walk the floors, i already do that, but not so that the animation is smooth, it goes from point a to b without any animation. I also tried to implement the smoothie library but it was not possible. i stay waiting for responses, sorry for my bad english;

Hello All, I'm new to Phaser and the world of HTML game development so I'm trying to learn the ins and outs of Phaser 3. Past several days I've been trying to get some sprite animations working via an atlas but not having much luck. The feet would not stay aligned to the floor. I'm assuming it has to do with the physics body since I can get it to work as intended via a sprite sheet or with an atlas without the physics involved. I've tried messing with the body.setSize() and the setOrigin() to the sprite itself but luck. I've attached the quick demo of the problem. The attachments go into the "assets" folder and the index.html code is below. Apologies ahead of time if I'm not going about posting the example in the proper way...let me know if I am. In the demo I've got three versions of the sprite: The first (dude1) is created via sprite sheet and works as expected. The second (dude2) is created with an atlas with no physics and plays the animation as expected The third (dude3) is created with the same atlas as the second but I've added the physics to it. As it animates it seems to jitter vertically and will go through the floor. The atlas png/JSON was created using TexturePacker and I've added a pivot point right at the left feet of the sprite. Any help would be very much appreciated. -Ray <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script> <style> body { background-color: grey; } </style> </head> <body> <script type="text/javascript"> const config = { type: Phaser.AUTO, parent: "phaser-example", width: 600, height: 400, pixelArt: true, physics: { default: 'arcade', arcade: { gravity: { y: 300 }, debug: false } }, scene: { preload: preload, create: create, update: update } }; const game = new Phaser.Game(config); function preload() { this.load.image('ground', 'assets/platform.png'); this.load.spritesheet("dude1", "assets/king_spriteSheet.png", { frameWidth: 78, frameHeight: 58} ); this.load.atlas("dude2", "assets/king_atlas.png", "assets/king_atlas.json"); } function create() { let floor = this.physics.add.staticGroup(); floor.create(0, 400, 'ground').setScale(3).refreshBody(); this.anims.create({ key: "dude1_idle", frames: [ { key: "dude1", frame: 0, duration: 1000 }, { key: "dude1", frame: 1, }, { key: "dude1", frame: 2, }, { key: "dude1", frame: 3, }, { key: "dude1", frame: 4, }, { key: "dude1", frame: 5, }, { key: "dude1", frame: 6, } ], frameRate: 10, repeat: -1 }); this.anims.create({ key: "dude2_idle", // frames: this.anims.generateFrameNumbers('dude2', { start: 1, end: 8 }), frames: [ { key: "dude2", frame: "Idle (78x58)_01", duration: 1000 }, { key: "dude2", frame: "Idle (78x58)_02" }, { key: "dude2", frame: "Idle (78x58)_03" }, { key: "dude2", frame: "Idle (78x58)_04" }, { key: "dude2", frame: "Idle (78x58)_05" }, { key: "dude2", frame: "Idle (78x58)_06" }, { key: "dude2", frame: "Idle (78x58)_07" }, { key: "dude2", frame: "Idle (78x58)_08" }, { key: "dude2", frame: "Idle (78x58)_09" }, { key: "dude2", frame: "Idle (78x58)_10" }, { key: "dude2", frame: "Idle (78x58)_11" } ], frameRate: 10, repeat: -1 }) this.dude1 = this.physics.add.sprite(100, 250, "dude1"); this.dude1.anims.play("dude1_idle"); this.dude1.body.setSize(50, 30) this.physics.add.collider(this.dude1, floor); this.dude2 = this.add.sprite(150, 352, "dude2"); this.dude2.anims.play("dude2_idle"); this.dude3 = this.physics.add.sprite(200, 250, "dude2", "Idle (78x58)_01"); this.dude3.anims.play("dude2_idle"); this.physics.add.collider(this.dude3, floor); this.cameras.main.setBackgroundColor("#AAAAAA"); this.cameras.main.setZoom(2); this.cameras.main.setScroll(-100,80) } function update() { console.log( // `D1-F: ${this.dude1.frame.height} D1-B: ${this.dude1.body.height}`, // `D2-F: ${this.dude2.frame.height}`, `D3-F: ${this.dude3.frame.height} D3-B: ${this.dude3.body.height}` ) } </script> </body> </html> king_atlas.json

Hey! I'm Hanna, freelance 2d game artist, creating cool assets, illustrations and UI. I'm currently finalizing work for a game and will be soon available for new commissions. Check out my (quite unique) portfolio-website: habela.github.io Tell me about your project, ask for a quote, let me know about your budget or just say hi - [email protected] some of my work:

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.

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: https://www.behance.net/Des3DTeam Contact us: Email: [email protected] Discord: Des3dteam#1619 Skype: Des3D Some of our works: Some item stuffs

Hi, I'm trying to import meshes with multiple animations (from Blender). Is there any description of correct workflow on how to make Babylon compatible animations in Blender? Single animation works nicely when you just manually fix scaling and rotation problems. But no matter how you append more animations into one Blender file it seems to me that transformations get messed up in export process. I've tried using Action Library and Pose Library, but both strategies produce weird twisting and morphing of the mesh. The result does somewhat resemble the intended animation, but it's hard to say what exactly goes wrong. Of course obvious workaround is to put every animation in separate file but that quickly makes download sizes unpractical (several 100 MBs).