Search the Community

Does anyone know of a tool or way to convert spriter scon format JSON into Spine format for use in Phaser (or even a way to use spriter's .scon files directly in Phaser)?

We are looking for a remote animator for our mobile game design team. This is a paid position in a professional and established work environment. Our design team has produced animations for some of the world's leading brands for over a decade. We are looking for an expert in Spine animation software. This position will begin with a few hours per week, but the right candidate will move to full time very quickly if not immediately. We need you available and online in our team backend between 9AM and 4PM EST (US) timezone. The position requires strong experience in mobile game art such as animation and typical 2d art workflow as you will be working with an design and development team coordinators with each project. Strong experience in Spine is mandatory, so speed and familiarity with the software is essential. This is a faced paced environment. The right candidate will be comfortable in this environment. The right candidate will have the potential to remain with us as a career, as many already have. Ideally we are looking for an animator who is comfortable creating animations for humanoid, non-humanoid, and VFX style animations. Our animations needs will vary from project to project on a daily basis. Our design team will prepare static assets and animation requests, and they will be handed to you for fast turnaround animations. Generally you will be working on several different projects concurrently, so being able to shift at a moment's notice from one project to another is essential. This is a high volume, fast paced position. Being able to envision the animation we are producing for a game is also essential. While our design team will provide you with a basic understanding of the animation such as "enemyHitFire: played when the enemy combatant is hit with a fire effect ranged spell", we expect the animator to be able to envision what they also can add to the animation to bring it to life. Creativity and added touches are a strong motivation factor for hire. Finally, because we often find ourselves creating full mini-games from concept sketches and discussions, we are in constant contact with the artist to explain the project when it begins and perform revision work. You must be able to understand English and communicate quickly without difficulty. Below are some of the things we will be wondering about (NOTE, we have training available for some areas such as 2D animation prep): 1.) How comfortable are you with Spine? 2.) How familiar are you with Photoshop techniques and environment? Can you adjust sprite delivery quickly to fit animation needs? 3.) Are you comfortable and experienced with game art, sprite sheets, and overall production flow? 4.) Are you imaginative or prefer working with very strict references and detailed animation descriptions? 5.) Can you animate without the use of IK and Mesh in your animations? If you are interested in the position, please email "careers" at "grimpanda.com" with your hourly salary requirements, portfolio links or examples of work, and best method of chat (Skype etc). Candidates who meet our requirements will be contacted via chat (text only, no worries about Covid hair!) to further discuss the position. These positions will be filled very quickly! Thank you and we look forward to hearing from you!

I've got a spine animation where the sprite of a certain slot changes. This is essentially the same thing as in the spine demo where they make a character blink by having two different images for the eye and having an animation that swaps between them. Currently, due to spritesheets + pixi being superior imo to how spine wants to work, I use `hackTextureBySlotName` for everything. Now my question is how I handle the situation where a slot has multiple images that are changed during an animation? For example I have code like this: model.hackTextureBySlotName('head', Texture.from(`/images/${ skin }/head.png`)) model.hackTextureBySlotName('thorax', Texture.from(`/images/${ skin }/torso.png`)) model.hackTextureBySlotName('pelvis', Texture.from(`/images/${ skin }/pelvis.png`)) // etc for all bodyparts of my skin, and gear held in the hands But I would hypothetically need something like this for the slots that had multiple images: model.hackTexturesBySlotName('left-upper-leg',[ Texture.from(`/images/${ skin }/left-upper-leg-frame-1.png`), Texture.from(`/images/${ skin }/left-upper-leg-frame-2.png`), Texture.from(`/images/${ skin }/left-upper-leg-frame-3.png`) ]) Then my spine animation which has multiple images for the leg which it switches through would work. I've attached a gif showing my animation, and how it defaults to the back of the legs turning white where the original animation would have "attached" a different piece of artwork -- the other frames of my leg art. The picture from the spine hierarchy is pointing to the two images that are switched between with red and blue. Also here's the source code for hackTextureBySlotName incase anyone could point me to a way to modify it. I was surprised that the region was a single object and not an array, but maybe I don't really understand how spine structures the skeleton. hackTextureBySlotIndex(slotIndex: number, texture: PIXI.Texture = null, size: PIXI.Rectangle = null) { let slot = this.skeleton.slots[slotIndex]; if (!slot) { return false; } let attachment: any = slot.getAttachment(); let region: core.TextureRegion = attachment.region; if (texture) { region = new core.TextureRegion(); region.texture = texture; region.size = size; slot.hackRegion = region; slot.hackAttachment = attachment; } else { slot.hackRegion = null; slot.hackAttachment = null; } if (slot.currentSprite && slot.currentSprite.region != region) { this.setSpriteRegion(attachment, slot.currentSprite, region); slot.currentSprite.region = region; } else if (slot.currentMesh && slot.currentMesh.region != region) { this.setMeshRegion(attachment, slot.currentMesh, region); } return true; } Thank you!

Hi everyone! I have some problem with pixi.js spine event. I am using generated spine json file by another source. Anyway, it has some user defined events. (Added image file) I want to customize event end result. How can I do this? Thanks.

Hi everyone! I need to change slot attachment with text in PIXi-spine. How can I do this? I found somethings on this. Could you please explain to me? I am hearing you here asap! Thanks

Hi everyone! I used the json and atlas file for using spine in pixi.js But the rotated pieces of image are not converted to correctly. So i wanna rotate some pieces in the programming Thanks.

Hello, I am a Korean developer. I play animation through pixi-spine. The problem is, I want to turn off anti-aliasing because my spine is low resolution When you false antilias to an option on canvas, other objects look like pixels, but spines don't. What should I do? Even if the translation is unstable, please understand.

Hi @enpu I have a small request for the Spine plugin. In the previous version of Panda there used to be a property animationSpeed that could be used to alter the speed of the spine animation. I noticed that this prop is lacking in the current version of tne plugin. It was easy enough to add myself but since the plugin is not open source, I cannot create a pull request for you. Could you add the following code to the plugin? spine.js game.createClass('Spine', 'Container', { ... animationSpeed: 1, ... updateTransform: function() { this.state.update(game.delta * this.animationSpeed); ... } }) Thanx, Stephan

I have canvas 1920 x 1080 and 5 different Spine animations that uses a lot of textures. Add 20 animations of every type all over the screen Test performance in two ways. For this I use GPU-Z and check GPU load parameter 1) Every animation has its own atlas with images and json file - GPU Load 47% 2) Every animation has its own json file but uses the same atlas with images - GPU Load 61% Made the same tests with sprites as well, total amount of sprites is 180, 10 of each type. 1) Each sprite has its own download link - GPU Load 90 % 2) All textures are in the same spritesheet - GPU Load 63% Why tests with Spine have opposite results? PC config is Google Chrome v65, Windows 10, AMD Radeon HD 7450, Intel Xeon x5650

Hi all, I'm working on an avatarbuilder and would like to use Spine for the animations. The avatar is made up of several parts (head, body, arms etc) that can be changed in order to get the desired combination. Now, I've been looking at using skins, but I'm not sure if I'm going the right direction. Since it's not a complete skin that needs to be swapped, but just a part of it. The avatarbuilder will be made in Haxe using Pixi and Spine. My main questions are: 1) Would it be possible to use skins in order to only change the head, or the body for instance? 2) Am I moving in the right direction using the skin feature of Spine? Thanks in advance! Maarten

Hi Everybody, I'd like to use Spine in a Pixi project (either the latest v4 or directly starting with v5). I use webpack and npm and saw that Pixi his split pixi-spine into a different npm package. According to the readme of pixi-spine the runtime supports spine data from Spine version 3.5 up. But I only have a pretty old version of Spine 2.1.18 essential and don't want to buy a newer version at the moment because of financial reasons. I only use the basis spine stuff, so no deformations or other new (mesh-like) features. Could anybody please tell me why Pixi-spine only supports Spine 3.5 and up? Is it only because of the pro-features, or does it not work with spine 2.1.18 essential data either? Anybody knows what changed? Is it just some keynames in the spine json file, or only added (professional) stuff while the basic remained the same? Or is there more to it? And is there perhaps a version of pixi-spine out there that is able to import spine data from 2.1.18 essential while still using the latest v4 Pixijs (or v5)? Thanks a lot!

Hi there! Anybody knows, do the panda2 spine plugin supports cliping? In my animation i use cliping, but in project i cant see it. Also I was found that mirrored bones are working incorrectly, the slots get changes their positions (i think not flipped). Thanks!

hi guys, How can I make a spine keep checking onComplete Event while losing tab focus? As I tested, if I run several spine animations(different length) at the same time, then switch to another tab immediately, the onComplete events won't fire, but they will fire at once when the tab get focus again.

When I load json in loader gives an error message PIXI.loader .add('spineCharacter', 'character_assets/red.json') .load(function (loader, resources) { var animation = new PIXI.spine.Spine(resources.spineCharacter.spineData); self.container.addChild(animation); }); but if I use another method PIXI.loader .add('character_assets/red.json') .load(init); function init() { this.spin = new PIXI.spine.Spine(PIXI.loader.resources['character_assets/red.json'].spineData); this.container.addChild(this.spin); } There is no error, but the screen is just black and nothing is displayed

Hi, everebody! Tell me how to connect to pixi.js spine

Hi, everyone! I have a question concerning spine suuport for phaser 3. Does phaser 3 supports spine? If does, some examples will be nice! Thanks!

I am working on Phaser Spine (https://github.com/orange-games/phaser-spine), The Spine is working on non retina devices but not getting the same result on retina devices. Any idea why is it so? Its position is distorted once loaded in a retina device. Is it something specific to Spine only? What's the ideal way to load a spine in a retina Device?

Hello Anyone knows how to check if a Spine animation is complete. Tried: player.onComplete();

Hello Im trying to make my spine object interactive: var player = new game.Spine('mySpine.json'); //player.hitArea = new game.Rectangle(200, 500); player.position.set(300, 800); player.interactive = true; player.play('idle', true); //player.speed = 0.01 player.addTo(this.stage); player.click = function() { console.log('check clicked'); }; That did not work. I tried to put it in a container. That did not help either. It works OK an a sprite object.

Hello First of all. I m so glad to see Panda on the road again :-) I have just bought the full version and playing around with Spritesheets developed in Spine 3.6.52 professional. It seems like mesh is not supported in panda 2 version 1.5.0. When I export from spine as a spritesheet with mesh animations it won´t show the spritesheet, If i remove the Mesh animation it shows the animation fine: game.module( 'game.main' ) .require( 'plugin.spine' ) .body(function() { //game.addAsset('panda.png'); game.addAsset('sheep.atlas'); game.addAsset('sheep.json'); game.createScene('Main', { init: function() { var player = new game.Player(); player.sprite.addTo(this.stage); } }); game.createClass('Player', { init: function() { //this.sprite = new game.Sprite('panda.png'); this.sprite = new game.Spine('sheep.json'); this.sprite.position.x = 200; this.sprite.position.y = 800; this.sprite.play('idle', true); } }); });

I want to use Phaser3, but unfortunately I'm not sure if there's any way for it to utilize Spine Animation at runtime. Unless I'm wrong? Does anyone know if this is possible, and if not, are there any plans for this to be implemented? It makes little sense for a JS game engine of this caliber to not support a gamedev standard for beautiful 2D animation. Heck, even pixi.js does that.

Hello, I'm attempted to load a spine animation (v3.5.51) into the current version of pixie-spine (as it states that it's only compatible with Spine 3.5.x I'm not using the Pixi loader, instead I'm just passing in the loaded Spine JSON in the constructor. It's valid JSON with the bones/animation properties in there (so not a string etc) However, what I'm getting is a crash 'Cannot read property 'children' of undefined at new Skeleton': for (var i = 0; i < data.bones.length; i++) { var boneData = data.bones[i]; var bone = void 0; if (boneData.parent == null) bone = new core.Bone(boneData, this, null); else { var parent_1 = this.bones[boneData.parent.index]; bone = new core.Bone(boneData, this, parent_1); parent_1.children.push(bone); <-- ERROR/CRASH HERE } this.bones.push(bone); } The exported JSON is v3.5.51: "skeleton": { "hash": "m3kYx9f3hy1R9hSrlYyJs6o/0fk", "spine": "3.5.51", "width": 202.11, "height": 317.08, "images": "" }, Any ideas?

Many 2D even 3D frameworks now support Spine. Even Phaser 2.6.2 has a plugin for Spine, thanks to Orange Games. So do you plan integrating Spine in Phaser 3?

Our Upstate New York studio is open to contracts for small to large HTML5 games. We work in small modular teams to keep costs down and maintain our indie creativity and feel. We work primarily in Haxe for desktop and mobile browser games, but also do a lot of Apps (often HTML5 via Cordova). We have experience with CocoonJS, Unity, Springroll, and more. We have several developers, artists, as well as audio and QA-testing capabilities. We will also be looking to hire as we grow. Feel free to send over your resumes/portfolios. [email protected]

I'm trying to use some spine animations in a large Pixi application at work. It's mostly working but I'm getting intermittent runtime errors coming from the Spine objects. This error is:Uncaught TypeError: Cannot read property 'transform' of null at Spine.e.updateTransform (pixi.min.js:formatted:4401) at Spine.autoUpdateTransform (Spine.ts:479) at e.updateTransform (pixi.min.js:formatted:4405) at e.updateTransform (pixi.min.js:formatted:4405) at GameScene.e.updateTransform (pixi.min.js:formatted:4405) at e.render (pixi.min.js:formatted:8605) at Function.ScenesManager.loop (ScenesManager.ts:273) at t.emit (pixi.min.js:formatted:13126) at t.update (pixi.min.js:formatted:13068) at _tick (pixi.min.js:formatted:12988) The error is coming from PIXI.Container, line 323 because this.parent is null. This is a bit bonkers because this is only being called because the spine object is in the children list of the scene being rendered. this.transform.updateTransform(this.parent.transform); I dug in a tried to isolate the problem and found that somewhere in the Spine update function the parent was being set to null. In Chrome debugger I put in some conditional breakpoints for dt>0 && this.parent==null and found that the culprit was line 184 this.state.apply(this.skeleton); Before this line the breakpoint doesn't trigger, after it it does, with this.parent being null. I had a read through AnimationState.apply and I can't for the life of me see anything that would be setting the Spine parent state. So my question is can anybody else see anything in there that might be creating this effect? I should say that the application does a bunch of complicated pooling of symbols, so the Spine object might be getting removed and sent back to the pool then re-added frequently. But my understanding was that since JS is mostly single threaded if this.parent exists on line183 but not 185 something between there must be setting it to null. I'm not extending or doing anything else to the Spine object. Unfortunately I can't give out any coded to show the context. I'd be really grateful if anybody has any suggestions or input.