Unity: Load image in sprite, from resource and from file

I cannot waste the opportunity to post something in Feb 29th :), so I will go a little technical and share something I did recently in a Unity project.

If you want to load an image in a sprite programmatically, one way is to have your image file in a folder called Resources. This is to load an image file (i.e. PNG, JPEG, etc), not a prefab or anything like that.

If not already there, create Resources folder inside your Assets folder, Unity knows it is an special folder. So let's say you imported you image AwesomeImage.png into that folder. Now in your scene create a sprite: GameObject > 2D Object > Sprite (in Unity 5.2). Then you can create a C# script like this and add it to your sprite.

public class YourSpriteScript : MonoBehaviour {

    void Start()
    {
        ShowIcon("AwesomeImage");
    }

    void ShowIcon(string imageName)
    {
        TextAsset asset = Resources.Load(imageName) as TextAsset;
        byte[] data = asset.bytes;
        Texture2D texture = new Texture2D(128, 128, TextureFormat.ARGB32, false);
        texture.LoadImage(data);
        texture.name = imageName;
        Sprite icon = Sprite.Create(texture, new Rect(0.0f, 0.0f, texture.width, texture.height), new Vector2(0.5f, 0.5f));

        SpriteRenderer iconRenderer = GetComponent<SpriteRenderer>();
        iconRenderer.sprite = icon;
    }
}

In some special cases you may want to load an image which is outside your Unity project, you normally would want this if you want the final user to change set any image she wants into your game. There are of course other ways to do it, this is only one of them that could work for cases like those when you want to allow others to make mods of your game by replacing some images.

To do it, use the following code, it will load the image from disk. So, again, this is the C# script you could add to an specific sprite:

public class YourSpriteScript : MonoBehaviour {

    public void ShowIcon(string iconPath)
    {
        byte[] data = File.ReadAllBytes(iconPath);
        Texture2D texture = new Texture2D(128, 128, TextureFormat.ARGB32, false);
        texture.LoadImage(data);
        texture.name = Path.GetFileNameWithoutExtension(iconPath);
        Sprite icon = Sprite.Create(texture, new Rect(0.0f, 0.0f, texture.width, texture.height), new Vector2(0.5f, 0.5f));

        SpriteRenderer iconRenderer = GetComponent<SpriteRenderer>();
        iconRenderer.sprite = icon;
    }
}

As you may see, the code is very similar, once you get the bytes from the image you create a Texture2D from it and use it to create a Sprite object which is set as the sprite of your Unity sprite (actually, a SpriteRenderer).

Consider that better than set this script in each sprite you could modify it to make a more generic version that receives a reference to the sprite and the name of the file to load, and have one single script that is called to load multiple sprites. Also you will need to investigate how to use relative paths so the game works in any computer.

Hope this helps in whatever you are tying to create! Let me know if you need additional help.

Ninja Game progress: Sword up / Gravity change / Temp graphics

OK, to after a good trip through Japan I'm back full of energy to keep up with this still untitled Ninja Game :D.

I created this gif to summarize the game progress so far:

Here you can see the gravity change between corridors, it was a little tricky to achieve but I hope to don't need to touch that code again for a while ;). Also I added a new technique to avoid losing speed when moving between corridors, basically the player can raise up the katana and redirect the ninja's speed to the next corridor.

You can see as well some new graphics, I reused a background I created once in Xololitos, I'm still trying to figure out what I should put as the corridors' backgrounds, but for now this should be enough.

What's next? Well in the gif above you can see how the ninja runs practically the whole upper wall, that's not supposed to be like that, I want the player to keep jumping constantly, so I need to make the phases of the wall-run dependent of the ninja's speed... maybe it's not clear now, so I will just make it and post it once done :)


Bonus picture, check out this cool fountain we saw in Fushimi-Inari!

Doing some sprites with Pixly

Lately I have been very busy and it has been a little difficult to spend time in Ascendam, however I have a few new Anz sprites and have been tuning (in my mind) the game mechanics.

The first sprites I created for Ascendam (the ones in my previous post) I drew them using an Android app called IsoPix. It is a nice not too basic pixel art app and I thought it was quite good actually. I was planning to purchase the Pro version but the problem was that it doesn't support animations. Is that big deal? well, yes. If you want to make the different facing directions of a character, they will probably look weird if you don't test how the transition between the main frames looks (I will try to write a post about that in the future).

So when I was really close to purchase IsoPix Pro y found this great free app called Pixly, and believe me, nobody told me to write this, but Pixly is far FAR superior than any other apps I found in the Play Store, I don't know why it is not the first app that shows up when you search for "pixel art".

What is so good about Pixly? well, if I would need to say it in once sentence it would be: it satisfies a game developer's needs. I'm not planning to make a full review because I actually haven't used all its features yet, but you can take a look to its website, there are short and concrete examples of its features.

The things I like most of this app are:

1. It supports layers, so you can draw the movable parts of your sprite in individual layers, and later animate them easily.
2. It supports frames, so you can make animations and export them as animated GIFs (or as a PNG sprite sheet).
• This is really useful because instead of make a huge sprite sheet that contain all your frames, you create a single frame, let's say 128×128 px, and you can navigate between frames using the timeline menu, and reorder, copy, delete them if you need.
• It still can improve in this side, being able to select the frames and save multiple animations would be really useful for complex characters. Also the animated GIF I exported didn't display the colors correctly, but maybe I did something wrong (I have only tried a couple times). Anyway you should check if the latest version coincide with what I said.
3. It supports configurable grids.
4. It supports to load and save color palettes.
5. It supports two techniques for rotation which is very useful.
6. It can export your work to a sprite sheet, and it will only export the layers you have selected as visible, so if I want a sprite sheet with only the heads of Anz, I can export it easily.
7. Zoom in/out is smooth and not limited (other apps support some specific zoom levels only)
8. It has a lot of undo/redo steps (I'm not sure how many, but they have been enough so far)
9. It has mini view window, i.e. when you are working with zoom in a specific part of you sprite you can see in real time how it looks in another zoom level.
10. It has have mirror transformations, magic wand, color replacement, and so on...

Oh, and almost forgot, one thing Pixly does NOT have:

1. Annoying ads ;) ... it only shows an ad when you save.

I don't want to insist too much in how good this app is, but I feel really happy with it because I can have some progress in my game while going on the bus, or waiting for any reason, and for free! If you are looking to make sprites for a game I highly recommend this app.

Here is a side view of Anz I drew in Pixly. You can see the layers at the right side, that menu can be hidden so you have most of the screen available to draw.

About the sprite, maybe I will change a little its legs but I'm still not sure, I prefer to make some other positions required to start programming and experimenting the gameplay.)

I will be working on sprites for a while, I hope to have time to update my progress here.

See you!

Ascendam - Characters concept art

Last entry I was talking about making games that fit your personal style, so after a little more than a week rethinking my "mysterious" game, I finally got to the point I think I really like it :), I decided to call this game "Ascendam".

I have been working mainly in the conceptual art for the characters (back to the pixel art :D), the game story, and a little of game mechanics.

This is Anz, the main character:

I want this character to be an avatar for the player, I mean, I want Anz to be a representation of the player in the game in a personal level. Because of that I don't want to create a deep detailed description of Anz's personality. Later if I have time I will make a female version, but for now the male character should be enough.

Anz will use a spear as its main weapon, later in the game you will get bombs as well. Those are his weapons so far, but I'm not sure if I will add any other in the future.

Well maybe it would be good to explain briefly the gameplay now so the enemies make sense to you.

The main idea is to "fall" through tunnels in a labyrinth, Anz will be hanging of a kind of rope so you will be able to control how much you want to go up or down, you will be able to grasp the walls and climb faster than climbing by using the rope only. Also you will be able to move down faster by running down on the wall (ninja style!).

I'm planning to have 4 enemy types. Probably I'm going to add different difficulty levels for each of them, but that's not yet clearly defined.

First the basic enemies, you will find this little guys climbing on the walls of the labyrinths, they are harmless if you keep away from the wall. I call them Walldos.

The Guardians, you will find this guys flying through the tunnels. At the beginning they won't attack you if you grasp a wall, but in future levels they will use their flexible arms as whips.

Cloud Crowds, you will fear this creepy enemies. They will be flying through the tunnels as well, but you won't be able to attack them. They will be moving in a rhythmic way opening their eyes from time to time. You won't want them to see you.

Smiley Gear, this will be a fundamental enemy in the game mechanics, those will be static enemies that you will need to destroy in order to progress through the maze.

I hope they intrigue you a little :). I will be working on the scenarios (I need to experiment some ideas to have scenarios that I can realistically create) and programming the basic mechanics, so I can know how fun they actually are.

See you later!