Unofficial Pokemon Board Game – Resources

Since this is a game for private and educational purposes only, I didn’t mind using copyrighted materials to play with. In this lesson I will show you where I found all of the assets used to create the game. It might be easiest to follow along with the same assets, although it isn’t required and you are free to use whatever you want.

Repository

The repository for this project is located here. The initial commit contains quite a bit of content. It is basically the foundation of the prototype project that I used to create the demo video. In it you will find a ton of placeholder scripts (subject to change) – most of them are empty except for the class name, although a few have some fields and methods which are already connected to a prefab somewhere. In addition there will be a bunch of resources such as textures and audio clips, all of which are empty. This is because I didn’t want to personally distribute the copyrighted assets, so the project in the repository uses placeholders instead. If you overwrite them in place (in a file browser, NOT in Unity) then they will remain connected to the prefabs without any additional effort.

Sprites

The sprites are the pictures used by the “Canvas” elements (like “Image” component) and “Sprite Renderers” in Unity to display a texture file. There are a ton of images I made use of, and it may take you awhile to gather them all:

Pokemon

Arguably the most important pictures to grab are the pictures of the Pokemon. These are seen all over the game – I use them as the pawn on the board for each player, on the random encounter screen, gym encounter screen, battle screen, team management screen, and on and on…

I found pictures of them all over the place, but I wanted something that would keep the Pokemon in relative size and quality to each other. As a plus I wanted something that would be easy to programmatically rip into something easier to work with inside of Unity. Spriters-resource to the rescue here!

Feel free to cut them up however you like. I personally used my Tile Mapper tool powered by an additional mini-script to loop through all the images. Next, make sure to remove the background color from around the pokemon. I used an action in Photoshop to automate this process.

PokemonSprites_zpshsgbc4tn

The finshed result is a bunch of 96×96 pixel tiles named according to the label that was also on the sprite sheet, such as “001.png” or “025-F.png” where the “F” & “M” letters can differentiate a gender in a Pokemon.

After bringing the assets into Unity, I set a couple of “Import Settings”:

  • Texture Type – Sprite (2D and UI). Everything using a Sprite Renderer or displayed on a Canvas needs this type.
  • Advanced -> Alpha Is Transparencey – true.
  • Filter Mode – Point (no filter). This keeps the pixels nice and sharp. Without it, Unity will apply anti-aliasing that causes them to look blurry.
  • Compression – None. This isn’t a requirement but it keeps everything looking nice.

These settings are generally true for all of the images I imported. There are a few advanced features you can also play with, such as using a “Packing Tag” which causes Unity to put everything into a single image. This can provide render and memory benefits, but doesn’t work with “Resources.Load” – which I use to load the Pokemon images when they are needed. It could make a lot of sense for the menu elements though.

Because I DO want to use “Resources.Load” for these images, they must be located within a folder in the project that is named “Resources” – this is a requirement by Unity, not just an organization pattern. Specifically I used “Resources/PokemonFronts” & “Resources/PokemonBacks” to hold each set.

Badges

I used an image of icons representing the various “Types” of Pokemon that I found here. They appear on the victory screen when you conquer a gym, as well as in the upper right corner of the screen while a trainer is preparing for his turn – to show which badges have been earned so far. Finally, they also appear as spinning icons above the board tile where the matching gym is located.

Like with the Pokemon images, I will want to be able to load these using “Resources.Load” so I placed them all in a “Resources/Types” folder. I named them using a convention of “Badge{TYPE}” like “BadgeBug” or “BadgeGhost”.

I used photoshop to create a copy of one of the badges where I painted out the center icon and converted the image to grey scale and made it a little lighter. This became the placeholder badge in the upper-right corner until it gets replaced by a real badge.

EmptyBadge_zps0djnqkug

Menus

Many of the menu elements were used from a single sprite sheet I found here. However, I didn’t use most of the assets as-is. For example, the backgrounds can be a small cropped portion and then stretch using slicing. You can see for example this background panel image – I only needed the corners and the rest can be filled in automatically:

BattleMenuBG_SpriteEditor_zpsx9mvcyyg

Below is a sample of the elements that I captured for use. I provided a larger preview for easier visibility, with the actual size assets in the bottom corner:

MenuAtlasPreview_zpsjgt7ejpf

Battle Screen

For the elements on the battle screen I used a few different resources. The command menu actually used a button from the earlier menu sprites. Most of the rest of it, such as the panels and hit point callouts came from here. Here is a preview of the atlas elements as I captured them:

BattleAtlasPreview_zpswacjey0t

The clean battle background (with no Pokemon already comped on it) came from here.

Miscellaneous

The title screen used a base Pokemon logo I found here. Then I added the extra text in my own version in Photoshop.

Logo_zpsffvlvuw6

On the capture screen (seen when you press the capture button without actually defeating a wild pokemon in battle) I use a picture of an open and closed pokeball. I got the Pokeballs here.

The button with a picture of dice used an asset found here.

I use a picture of a Pokestop to mark board tiles where you can gather resources. The original image was found here, but was modified to have a transparent background, be a little brighter, and to be the same size as the badges for convenience sake.

Pokestop_zpss49ynmyy

The game board tiles along the perimeter were all cropped to be square and of a consistent size, but the originals were found here:

Once they are all assembled, the final board can look something like this:

UnofficialPokemonGameBoard_zpsh6y9af3f

Sound FX

I really didn’t use as many sound fx as I probably should have. There are no button click noises, etc. The only sound fx I added were the sounds of the Pokemon attacking. I found them here. Note that I use “Resources.Load” to obtain a reference to these, so I placed them in a “Resources/Pokemon Cries” folder.

Music

The music sound tracks were a lucky find. You can grab them here. I didn’t import all of the music, but I did use several pieces:

  • 101 – Used on the title screen
  • 106, 118, 142 – Used for journeying around the board. The more gyms you defeat, the higher the music track you get.
  • 107, 128 – Battle music for a capture or gym battle.
  • 108, 129 – Victory music for a capture or gym battle.
  • 145 – Played for a game over screen.

After bringing in music tracks, you should remember to set the “Load Type” to “Streaming”.

Summary

Even a simple game requires a lot of assets, but this game is actually somewhat complex. It might take you awhile to gather together everything you need, but once you have something to work with, we can begin putting it all together!

5 thoughts on “Unofficial Pokemon Board Game – Resources

  1. Really excited to follow along this series. Thank you for doing it!

    In the repository, the menu, logo, button and other element place-holders are all in the Sprites folder, instead of the Resources folder. Is that because they aren’t referenced by the database and loaded via “Resources.Load”? Is there an advantage to having them outside the Resources folder?

    1. Hey Alex, if you want to use Resources.Load then the assets must be in a resources folder, however, every file in a such a folder will be copied to the final bundle when building the final project, even if you don’t actually use it anymore. Assets that you can manually link to will only be included in the final build if a scene traversal connects to it somehow. That is why I usually keep things outside a resources folder until I actually need to load it dynamically.

    1. Great question, normally I would have included the actual assets in the demo project, but in this case I didn’t feel comfortable because I am not the copyright owner and because those assets have not been released to the public. That is why I created a functional project and left it up to the readers to either copy the same assets that I did or to make or find other assets that they like instead.

    2. Another quick note, make sure you re-read the paragraph under the “Repository” header because it mentioned this, and also included an important note about how to update the assets without breaking any links to the prefabs.

Leave a Reply

Your email address will not be published. Required fields are marked *