An open API service indexing awesome lists of open source software.

https://github.com/dryrel/unity2dpixelboneanimation

Unity Game Engine - 2D Bone Pixel Character Animation
https://github.com/dryrel/unity2dpixelboneanimation

animation character-animation pixelart unity unity2d

Last synced: over 1 year ago
JSON representation

Unity Game Engine - 2D Bone Pixel Character Animation

Awesome Lists containing this project

README

          

![TheStriveLogo_Colored](https://gokdenizcetin.com/assets/img/portfolio/games/thestrive/logos/TheStriveLogo_Colored.png)

Hi everybody! Here, I will present to you my work while working on The Strive project.

If you want to play the game, you can reach the [download page here.](https://gokdenizcetin.com/game-the-strive.html)

### **First Pitch Presentation:**

**09/06/2021 ([Video](https://drive.google.com/file/d/1wFiVkInkIbClX7uopM0Zx6x22P3GZYZJ/view) / [PDF](https://gokdenizcetin.com/assets/documents/20210608_pdf_thestrive.pdf))**

**Final Presentation:**
-----------------------

Your browser does not support the video tag.

**Useful Links: [Watch on YouTube](https://www.youtube.com/watch?v=mr4wo37Q72w) / [CGL Presentation](https://spaces.colognegamelab.de/ba4sounddesign21/2021/07/30/the-strive-final-presentation/) /** [**BA4 - ST2021 - Alterity- The Strive**](https://spaces.colognegamelab.de/thestrive/)

* * *

_**#0: Unity Bone Pixel Animation Prototype**_
----------------------------------------------

Although I use Unity’s bone system in raster graphics, I never tried that in the pixel characters. Thanks to Nat, I read this [post](http://de.esotericsoftware.com/forum/Using-Spine-with-Pixelart-in-Dan-The-Man-7532) and start to prototype it.

In this prototype, the character [Woodcutter](https://opengameart.org/content/3-character-sprite-sheets) is used. ![Woodcutter](https://gokdenizcetin.com/assets/img/portfolio/games/thestrive/woodcutter/Woodcutter.png)

_(This character will not be used in our game, it is for testing purposes only)_

**Step 1:**

Image scaled up and layers seperated/repainted missing parts in the Photoshop.

![Woodcutter_S1](https://gokdenizcetin.com/assets/img/portfolio/games/thestrive/woodcutter/Woodcutter_S1.png) ![Woodcutter_S2](https://gokdenizcetin.com/assets/img/portfolio/games/thestrive/woodcutter/Woodcutter_S2.png) ![](https://gokdenizcetin.com/assets/img/portfolio/games/thestrive/woodcutter/Woodcutter_S3.png) ![](https://gokdenizcetin.com/assets/img/portfolio/games/thestrive/woodcutter/Woodcutter_S4.png) ![Woodcutter_S5](https://gokdenizcetin.com/assets/img/portfolio/games/thestrive/woodcutter/Woodcutter_S5.png) ![Woodcutter_S6](https://gokdenizcetin.com/assets/img/portfolio/games/thestrive/woodcutter/Woodcutter_S6.png) ![Woodcutter_S7](https://gokdenizcetin.com/assets/img/portfolio/games/thestrive/woodcutter/Woodcutter_S7.png) ![Woodcutter_S8](https://gokdenizcetin.com/assets/img/portfolio/games/thestrive/woodcutter/Woodcutter_S8.png)

**Photoshop Layers:**

![photoshop-layers](https://gokdenizcetin.com/assets/img/portfolio/games/thestrive/woodcutter/photoshop-layers.jpg)

Saved as PSB file and imported into Unity.

**Unity Packages:**

![installed-unity-packages](https://gokdenizcetin.com/assets/img/portfolio/games/thestrive/woodcutter/installed-unity-packages.png)

**Step 2:**

Sliced in the Sprite Editor.

![sliced-woodcutter](https://gokdenizcetin.com/assets/img/portfolio/games/thestrive/woodcutter/sliced-woodcutter.jpg)

**Step 3:**

Bones created in the Skinning Editor.

![skinningeditor1](https://gokdenizcetin.com/assets/img/portfolio/games/thestrive/woodcutter/skinningeditor1.jpg)

**Step 4:**

Geometry created in the Skinning Editor.

![skinningeditor2](https://gokdenizcetin.com/assets/img/portfolio/games/thestrive/woodcutter/skinningeditor2.jpg)

**Step 5:**

Weights adjusted in the Skinning Editor.

![skinningeditor3](https://gokdenizcetin.com/assets/img/portfolio/games/thestrive/woodcutter/skinningeditor3.jpg)

**Step 6:**

Bones renamed and reordered, depths adjusted.

![unity-visibility](https://gokdenizcetin.com/assets/img/portfolio/games/thestrive/woodcutter/unity-visibility.jpg)

**Step 7:**

FK bones tested.

![preview-in-editor](https://gokdenizcetin.com/assets/img/portfolio/games/thestrive/woodcutter/preview-in-editor.jpg)

IK added to arms.

![ikmanager2dadded](https://gokdenizcetin.com/assets/img/portfolio/games/thestrive/woodcutter/ikmanager2dadded.jpg)

**Hierarchy Preview:**

![Hierarchy-Preview](https://gokdenizcetin.com/assets/img/portfolio/games/thestrive/woodcutter/Hierarchy-Preview.jpg)

**Step 8:**

Test animations created.

**Idle Preview:**

![woodcutteridlepreview](https://gokdenizcetin.com/assets/img/portfolio/games/thestrive/woodcutter/woodcutteridlepreview.gif)

**Run Preview:**

![woodcutterrunpreview](https://gokdenizcetin.com/assets/img/portfolio/games/thestrive/woodcutter/woodcutterrunpreview.gif)

[\[Posted on Artstation\]](https://www.artstation.com/artwork/rAkzw5)

* * *

_**#1: Character Animations**_ _**– Protagonist**_
--------------------------------------------------

This is my 2D pixel character animations for the protagonist. We can also use this same bone animations for the other characters as well.

Both FK and IK bones are used.

**Photoshop Layer Seperation:**

![Photoshop-Layer-Seperation](https://gokdenizcetin.com/assets/img/portfolio/games/thestrive/animation-v1/Photoshop-Layer-Seperation.png)

**Sprite Editor:**

![Sprite-Editor](https://gokdenizcetin.com/assets/img/portfolio/games/thestrive/animation-v1/Sprite-Editor.png)

**Skinning Editor – Bone:**

![Skinning-Editor-Bone](https://gokdenizcetin.com/assets/img/portfolio/games/thestrive/animation-v1/Skinning-Editor-Bone.png)

**Skinning Editor – Geometry & Weights:**

![Skinning-Editor-Visibility](https://gokdenizcetin.com/assets/img/portfolio/games/thestrive/animation-v1/Skinning-Editor-Visibility.png)

**Skinning Editor – Visibility:**

![Skinning-Editor-Geometry-Weights](https://gokdenizcetin.com/assets/img/portfolio/games/thestrive/animation-v1/Skinning-Editor-Geometry-Weights.png)

**Hierarchy:**

![Hierarchy](https://gokdenizcetin.com/assets/img/portfolio/games/thestrive/animation-v1/Hierarchy.png)

**Project Files:**

![Project-Files](https://gokdenizcetin.com/assets/img/portfolio/games/thestrive/animation-v1/Project-Files.png)

![Project-Files2](https://gokdenizcetin.com/assets/img/portfolio/games/thestrive/animation-v1/Project-Files2.png)

**Character Sprite Library Asset:**

![Character-Sprite-Library-Asset](https://gokdenizcetin.com/assets/img/portfolio/games/thestrive/animation-v1/Character-Sprite-Library-Asset.png)

**Animator:**

![Animator](https://gokdenizcetin.com/assets/img/portfolio/games/thestrive/animation-v1/Animator.png)

**Animation – Idle:**

![Character1_Idle_Ezgif](https://gokdenizcetin.com/assets/img/portfolio/games/thestrive/animation-v1/Character1_Idle_Ezgif.gif)

**Animation – Running:**

 ![Character1_Run_Ezgif](https://gokdenizcetin.com/assets/img/portfolio/games/thestrive/animation-v1/Character1_Run_Ezgif.gif)

**Animation – Dying:**

![Character1_Dying_Ezgif](https://gokdenizcetin.com/assets/img/portfolio/games/thestrive/animation-v1/Character1_Dying_Ezgif.gif)

**Animation – Falling:**

![Character1_Falling_Ezgif](https://gokdenizcetin.com/assets/img/portfolio/games/thestrive/animation-v1/Character1_Falling_Ezgif.gif)

**Animation – Falling with Parachute:**

![Character1_FallingwithParachute_Ezgif](https://gokdenizcetin.com/assets/img/portfolio/games/thestrive/animation-v1/Character1_FallingwithParachute_Ezgif.gif)

**Animation – Winning:**

**![Character1_Winning_Ezgif](https://gokdenizcetin.com/assets/img/portfolio/games/thestrive/animation-v1/Character1_Winning_Ezgif.gif)**

**Animation – Losing:**

![Character1_Losing_Ezgif](https://gokdenizcetin.com/assets/img/portfolio/games/thestrive/animation-v1/Character1_Losing_Ezgif.gif)

[\[Posted on Artstation\]](https://www.artstation.com/artwork/QrQx28)

* * *

_**#2: Character Animations – Other Characters**_
=================================================

**The Strive** has 16 characters in the game at the moment I worked on the other characters to implement bones.

**Characters:** 32px

![16Characters](https://gokdenizcetin.com/assets/img/portfolio/games/thestrive/animation-v1/16Characters.png)

All of them scaled up to 256px.

**Photoshop:**

![Photoshop-Preview](https://gokdenizcetin.com/assets/img/portfolio/games/thestrive/animation-v1/Photoshop-Preview.jpg)

**Layers:**

![Photoshop-Layers](https://gokdenizcetin.com/assets/img/portfolio/games/thestrive/animation-v1/Photoshop-Layers.png)

All characters separated into each **PSB file**.

![PSB-Files-Preview](https://gokdenizcetin.com/assets/img/portfolio/games/thestrive/animation-v1/PSB-Files-Preview.jpg)

Missing parts were painted, layers were named and lined up in Photoshop.

![Project-Files3](https://gokdenizcetin.com/assets/img/portfolio/games/thestrive/animation-v1/Project-Files3.png)

**Bones:**

![Bones](https://gokdenizcetin.com/assets/img/portfolio/games/thestrive/animation-v1/Bones.jpg)

All characters’ body parts added into **Sprite Library Asset**.

![SpriteLibraryAsset1](https://gokdenizcetin.com/assets/img/portfolio/games/thestrive/animation-v1/SpriteLibraryAsset1.jpg)

![SpriteLibraryAsset2](https://gokdenizcetin.com/assets/img/portfolio/games/thestrive/animation-v1/SpriteLibraryAsset2.jpg)

![SpriteLibraryAsset3](https://gokdenizcetin.com/assets/img/portfolio/games/thestrive/animation-v1/SpriteLibraryAsset3.jpg)

![SpriteLibraryAsset4](https://gokdenizcetin.com/assets/img/portfolio/games/thestrive/animation-v1/SpriteLibraryAsset4.jpg)

![SpriteLibraryAsset5](https://gokdenizcetin.com/assets/img/portfolio/games/thestrive/animation-v1/SpriteLibraryAsset5.jpg)