Pixel Art Rotation - A tool for your pixel art games

Hi,

I'm Carlos Mangas from Asthree Works, the guys behind Paradise Lost : First Contact, a 2D stealth-platformer that we plan to release, hopefully, next year.

While making the game, we noticed that the usual sprite rotation in Unity wasn't what we were looking for, rotating the whole sprite broke the illusion of pixel art completely. When we didn't find any asset that adressed this problem, and saw the great response to our update regarding this technique, we decided to create Pixel Art Rotation, our own tool to rotate sprites pixel by pixel.

​

We'll keep improving the asset during the development of Paradise Lost and right now we are working on putting the documentation online, the asset comes with it anyway, but you can send us any suggestion or question regarding the asset to: carlos@asthreeworks.com

Get it!
Our website.


UPDATE!
A few months ago we promised an update, mainly to include a video tutorial. We 've been working really hard on our game and couldn't finish the update in time, we apologize for that.

You can watch the video here or in the Asset Store page:

 

It took me a long time to actually see what the difference was. I felt like I was 6 looking at a Highlights magazine.

Put a light red circle around the parts we're supposed to focus on, my 6 year old brain can't handle it

 

I know I'm in the minority on this point but I actually prefer the Unity way of rotating pixels. To me it looks cleaner and less noisy.
The fix you guys incorporated - to me - looks like a running texture map on the surface of a 3D skinned model when the UV's are undefined.
No disrespect to the tech or the game which looks awesome at this point, and the pixel art which is top shelf.

May be good to display the moving examples from your site.
http://asthreeworks.com/wp-content/uploads/2015/03/pixel-rotation-paradise-lost-first-contact.gif

 

We implemented this mainly because we thought those rotations didn't match very well with the rest of the game and, if you look at the image on the left, you can see jaggies around the arm with the standar rotation, something that doesn't happen in the rest of the body or with the new rotation, though it's true that not everyone likes this method.

Hope that we come up with something in the future that you would use in your game

Anyway, thank you very much for the feedback guys!

 

As someone making a pixel art game myself, I really appreciate this asset! Thanks for making it available.
Also, really looking forward to Paradise Lost! Been following you guys since the Kickstarter and the art was a huge inspiration for me to make pixel art games myself.

 

I'm also someone making a game with pixel art. I prefer pixel rotation but I never wanted to implement a solution myself so I just choose to live with Unity's rotation or would animate each frame to maintain the pixels. Thanks for making this available!

 

This looks amazing. Are you using something like rotsprite?

 

Ohhh cool. Yes this is something that's bothered me when doing 2d skeletal animation, and would make an excellent addition to my game - maybe - if it is light on performance and runs on mobiles.

So, is it and does it? Haha.

 

In the tests I have run I didn't see any impact on the performance, as long as you don't use sprites with hundreds or thoushands of pixels, this is why we advertise it as a "pixel art" only solution.

About mobiles I didn't have the chance to test it yet, another thing to test for the next update then

 

I'm looking forward to hearing how it goes! If your up for it do a comparison of regular unity rotation vs your rotation, and look for fps impact (if any). I'm working with sprites that are about 16x32 pixels in size - so relatively small.

If it seems to run good for mobile I'd be a sure sale on it. I'm wondering how you do it - does it involve setpixel(s) and texture2d.apply ()?

 

The full source code is provided with the asset, so you can check the method, and even change it if necessary. Though I will say it does involve SetPixels() and Apply()

 

I currently have no use for it but I still like it. It has much more of the "true" 8 - 16Bit era feel to it. It's subtle but the rotation of scaled pixels makes the actual higher resolution just so much more apparent.
Very nice.

 

I figured it must. That's ok though - I'm using setpixels and apply () on 256x256 sprites at runtime on android (rapidly updating each fixed update when changes are being made to up to four sprites at once), and can still manage 30-60 fps on old android hardware - so it's probably a minor impact compared to the rather large impact I'm already having on my performance! That is - as long as all changes are made through setpixel(s) and then apply () is called only infrequently (every few updates/fixed updates). This seems to have kept performance mobile friendly'ish.

 

Great, i was just looking how to achieve this myself when i found this thread.

From what i see it looks like "nearest point". Is there a plan to add bilinear? Its often better suited for static images/objects.

PS: It would be good if there is a link to this thread on the asset store description. Short video showing Unity setup/usage will be great too.

 

We plan on improving this asset as much as we could, being an important aspect of our game, so in the future we may try different algorithms

About the video, if I have enough time it'll be up today.

 

Bought this plugin yesterday and made some tests, so far I'm pretty happy with what it does. But I had to do some tweaking in order to make it work for me. I thought it would work out of the box with the 2D animation system but it didn't. It rotates sprites only at runtime and the rotation variable is an int, and int is not recognised by the animation system. Animation system only recognizes float and bool.

So to make it possible to animate in the editor I had to add [ExecuteInEditMode] and make a float, which then controls the int (rotation variable). Now I can animate my character in the editor but I get frequent errors. I guess the script is not meant to work in edit mode (I'm not a pro at coding, so I can't tell why). The errors do not affect my project seriously, I just have to remove [ExecuteInEditMode] when I'm ready with my animation.

Soooo that's not a huge problem, but I hope we will see some updates for that?

 

About using the asset in EditMode, it's not meant to be used this way, I haven't even considered using it like this. The reasoning behind this is very simple, if you want to make rotations in your 2D animations you can use any 2D editing tool (Aseprite, Photoshop, Gimp...) and then import everything into Unity, this type of rotation is usually included in any 2D tool.

The asset is meant to be used at runtime, when, for example, you want to rotate the sprite of a turret or a moving platform and it's not a set animation, but a response to what's happening in the game, things like that.

Anyway, if that's a feature that more people want I could try to implement it in the future.

Thanks for the feedback!

 

Thanks for the clarification. Yeah, I know there are other methods to achieve rotation in animation, but I'm not a sprite artist and I thought that maybe this plugin would help me make animations without having to draw each frame by hand. I simply want to speed up my process since I'm a one-man-studio. Anyway, I'm still happy with your product and will stick to it for now.

 

Hey @snifo - not to take away from this great product or thread, but your looking for something like
spine, spriter pro, or uni2d. I'm sure there are others that people use also. I own spriter pro and can attest to it's usefulness. Check out BrashMonkey and search the forums for 2D bone based animation tools.

 

Hey! Thank you for the suggestions. Sometimes it's hard when you don't know what to search for These look awesome, I'll take a closer look.

 

I really want buy this.. but i don't have enough money

 

You can't scrounge up 5 bucks?! Sell a video game! Lol

 

I bought this but I have several problems.

When I try to apply this to a rotating sprite, the angle caps to 2-3.

Code (CSharp):

1. using UnityEngine;
2. using System.Collections;
3. using PixelArtRotation;
4.  
5. public class test : MonoBehaviour
6. {
7.     private PixelRotation _pixelArtRotation;
8.  
9.     void Start ()
10.     {
11.         _pixelArtRotation = GetComponent<PixelRotation>();
12.     }
13.    
14.     void Update ()
15.     {
16.        int zAxis = Mathf.RoundToInt (100 * Time.deltaTime );
17.        _pixelArtRotation.Angle = zAxis;
18.        transform.Rotate (new Vector3 (0,0,zAxis));
19.  
20.  
21.     }
22. }
23.  

Im also having problem with an arrow asset thats using this and it works but the actual rotation rotates more than the angle:

Code (CSharp):

1. using UnityEngine;
2. using System.Collections;
3. using DG.Tweening;
4. using PixelArtRotation;
5.  
6. public class InventoryVelocity : MonoBehaviour
7. {
8.  
9.     public float smoothing = 10f;
10.     private Rigidbody2D _accessoryRb2d;
11.     private BoxCollider2D _collider2d;
12.     private GameObject _camera;
13.     private Tweener _shakeIt;
14.     private bool flying = true;
15.     private PixelRotation _pixelRotation;
16.     private float _angle;
17.  
18.     void Awake()
19.     {
20.         _camera = GameObject.FindGameObjectWithTag("MainCamera");
21.         _accessoryRb2d = GetComponent<Rigidbody2D>();  
22.         _collider2d = GetComponent<BoxCollider2D>();
23.         _pixelRotation = GetComponent <PixelRotation>();
24.     }
25.  
26.     void OnTriggerEnter2D (Collider2D col)
27.     {
28.         flying = false;
29.         PlayerScript playerScript = col.GetComponent<PlayerScript>();
30.  
31.         if(col.tag == "Player" && col.GetComponent<PlayerScript>().isAlive == true) //if it hits player and alive
32.         {
33.             _shakeIt = _camera.transform.DOShakePosition(1f, .2f, 10).SetAutoKill(true);  //shake the camera
34.  
35.             float lerpPosX = Mathf.Lerp (_accessoryRb2d.velocity.x, 0, smoothing * Time.deltaTime);
36.             playerScript.velocity = new Vector2 (lerpPosX, 3f);  //player push back
37.  
38.             _accessoryRb2d.velocity = Vector2.zero; //stops the arrow
39.  
40.             transform.parent = col.transform;//parent the arrow to the player
41.             _accessoryRb2d.gravityScale = 0;  //prevent the arrow from falling
42.             _collider2d.enabled = false; //disable trigger once it gets stuck
43.  
44.             _angle = Mathf.Lerp (0,90, 40 * Time.deltaTime);
45.             if (transform.rotation.z == 0 )  //rotate the character depending which way the arrows facing
46.                 col.transform.eulerAngles = new Vector3(0,0,-_angle);
47.             else
48.                 col.transform.eulerAngles = new Vector3(0,0,_angle);
49.         }
50.         else
51.         {
52.             Physics2D.IgnoreCollision (col.GetComponent<Collider2D>(),  _collider2d); //disable player arrow collision
53.         }
54.  
55.         if (col.tag == "Wall")
56.         {
57.         _accessoryRb2d.gravityScale = 0;  //prevent the arrow from falling
58.         _collider2d.enabled = false; //disable trigger once it gets stuck to the wall
59.         _accessoryRb2d.velocity = Vector2.zero; //stops the arrow
60.         }
61.     }
62.  
63.     void Update()
64.     {
65.         if (flying)
66.         {
67.             //creates trajectory arch of the arrow
68.             Vector2 dir = _accessoryRb2d.velocity;
69.             _angle = Mathf.Atan2(dir.y, dir.x) * Mathf.Rad2Deg;
70.             _pixelRotation.Angle = (int)Mathf.Round(_angle);
71.         }
72.         transform.rotation = Quaternion.AngleAxis(_pixelRotation.Angle, Vector3.forward);
73.     }
74. }
75.  

 

Hi! I've just bought your asset. It doesn't work with Unity 2017.2.0f3. In a demo scene I see an arm as a grey semitransparent shape. What can it be?