Creating 2D assets in Photoshop and importing to Unity

2D Assets for Berko- A berserk clone in the making

The Project:

Berko is a Uni project i am working on. The concept is to make an Atari Berserk clone in the style of a chosen artist. The idea is to have the level appear before lowly slipping into darkness with only a small radius of visibility around the player.

What was created:

A created multiple sprites using Adobe Photoshop editor. It took me some to to figure out what all the tools were, how to set up a layer correctly and how to set up a grid background in order to import the sprites correctly, but with some quick googling (and a lot of stressing) it finally came to me. The assests I created are as follows:

  1. Player / Player Bullet
  2. 4 Enemies / 4 Enemy Bullets
  3. Evil Otto (The black circle with purple outlining)
  4. A wall Sprite
  5. A Exit Highlighter

How was it done?:

I opened up Photoshop, hit Ctrl + N (or alternatively you can go to the “File” tab and select “New”), Then i created a custom Layout by changing the width and height to 64 and changing the layout to Pixels and selected apply. Then I opened up the “Edit” tab located at the top and opened up the Preferences category, from here I selected “Guide,Graphs, & Slices…” (Alternatively you can hit Crtl + K to take you there directly, just enter the Guides, Graphs & Slices tab). From here I simply only needed to change the Grid variables by changing the numbers in the “Gridline Every:” section and changed it to 10 and the measurement to Pixels. this way, a grid line would appear every 10 pixels on my 64 pixel page.

Now that I had a girded page that was customarily made for pixel art, it was time to do just that!

What will later become my first enemy!

By selecting the brush tool on the left hand side, I held it down and selected the pencil tool. I then changed the size of it to 1 pixel. This way I had more control of where and how I wanted to draw my lines.

I then set my eraser tool to 1 pixel size. (I needed to use it a lot).

Now that my tools were set up it was drawing time! I began by making a simple black circle for my enemies head. My inspiration for this enemy was based on the concept of the shadow creature in “Kingdom Hearts”. With black silhouettes with only bright colorful eyes that make it stand out against the darkness.

I simply kept adding to the body with the brush tool and switched colors on the gradient dial on the right when it was time to place the eyes in.

The Player in all his pixel glory

I quickly saved my enemy sprite ( I save it under PSD, PDD & PSDT… I was confused at first why a white background was importing with the sprites in unity, but after saving the files under this type, the background vanished.) and reopened it to give him 3 different color shadings for its eyes to create new unique enemies who will be used to cause havoc on our young player hero.

As for our hero,I wanted him to be represented as young child, so that it represented innocence, life, and hope. To create him, I simply used the same techniques as mentioned above, only this time I had to use a wider variety of colors to get the perfect look I was going for.

Bullets that will be used for the player and enemy

Now that the charcters were complete I simply saved them all and erased the page and began my work on the Bullets.

I wanted the Bullets to be flashy yet practical. With a clear impact point so players can dodge quickly or predict its hit box well enough so that they could shoot it to destroy it.

I ended up creating the sprite pictured left because it felt like to me it was the perfect shape for indicating that it was a projectile.

I need 5 of these. 1 for the player and 4 for the enemies. After creating my first projectile sprite. I simply saved it, changed the colors to reflect the shooter and saved it again. Giving each one a new name so that they wouldn't save over each other.

Now that I was building a fairly large library of sprites, I needed to focus my attention on creating sprites for the level itself. For the Walls and Exit sprites, I simply created square images and gave them varying degrees of width and height. They didn't need to be too fancy or detailed for my game, so the end product felt good to me.

Fun Time Over:

Now that I had my sprites its time to bring them over to Unity. To do this, I opened up my project, went over to the Assets tab located at the top, Hit “Import Ne Asset” and selected the Sprite files I created. Then I just drag and dropped them onto the scene and that was it!

Now its time to actually get to scripting and creating something functional, Until next time!