Images are made of pixels, and pixel art is anything where singular pixel's placement and color are controlled by the artist. Pixel art is an awesome way to create environments for entertainment products like video games. It's easy to learn and make, as all that is needed are a mouse and an app like MS Paint.
This lesson teaches you how to create a tileset and a few assets to go with it. And finally, you will use the tileset and assets to create a mockup screenshot of a game scene.
Video games made with pixel art, like classic Pokémon and Zelda series, use tiles to create game levels' backgrounds. Tilesets are a set of tiles that contains all the needed tiles to build a game world. Tiles are seamless, so they can be placed next to each other and there's no unevenness. The term tileatlas means a bigger collection of tilemaps that can also contain other assets like trees and rocks.
Tiles are used as they have performance and memory usage benefits. However, these days computers, consoles and mobile devices can handle heavier environment assets, but the simplicity of tilemaps has kept them popular.
Tiles can be made using any sort of digital method, like pixel art and vector art, no matter the style. This lesson will stick to pixels, and the assignments show how you can create your own tilemap and few assets to add to the scene.
Tiles can be done with multiple different software and apps. Pyxel Edit is an app that has a free version available, but it isn't supported anymore by the developers. They offer a paid version as well, but the free version still works pretty well. There are some differences between the free and the paid version. The Windows operating system has built-in apps like Paint or Paint3D that are also handy when creating pixel art.
Aseprite is a popular paid app for all sorts of pixel art like making tiles and animations. Software meant for digital drawings, like Photoshop and Krita, can also be use. They contain some inner tools that ease the process of making the tiles seamless.
Before you start this assignment, take a look at the tools that were mentioned above or search for others through search engines. Then learn how to use them and pick what suits you. There's no harm in knowing how to use multiple tools, but if you are just getting started with digital arts, it's good to pick one software at a time.
The aim of this assignment is to create a tileset that has nine seamless tiles made of pixels. The next step is to make some assets, like trees and rocks. Then, we will use those tiles and assets to make a mockup screenshot of a game scene.
Making tiles requires a little math. Tiles are often divisible by two. The size varies from game to game, but they often are 16x16px to 32x32px. The bigger the tile is, the more details it has. The demo tileset's individual tiles are 16x16pic, so the whole tileset is 48x48px.
The tileset will have nine tiles. This is quite common when making tilesets. The set has four corners, one centerpiece, and four tiles for every direction.
Let's create a simple ground tileset with individual tiles being 16x16px.
To make a simple tileset, start with the base. Choose one color that acts as the base ground.
For clarity, on the left image the tiles are shown individually, and on the right all the tiles are combined together. Most apps have grids to help see the tiles' edges.
Pick a darker color and add edges for the tiles. Make the top row thicker as that is the top of the platform that the player walks on.
With new darker brown color, draw thicker edges. This way the tileset will have more details and look more interesting.
Add grass to the top row. Use two green colors to have details. Two or three colors are enough with these small tiles. Otherwise, the tiles can become unreadable and messy looking.
Add small dots to the ground tiles.
Now the simple tileset is ready! With a similar method, you can create multiple different tilesets. This sort of tileset alone fits well into platformers, for example, as the character jumps from one place to another.
To create a game with a more open world, like Pokémon, more tiles are needed. Grass, roads, water, the list goes on. So, before any tiles, think about what your project needs - do you maybe need to make various sets or is one simple tileset enough?
The assignment's tileset is so simple that there is no need to pay attention to the repeating patterns; the base's dots don't create patterns and the grass and the edges work seamlessly due to their same thicknesses of edges.
When making more complex patterns, you need to pay attention to placing the tiles so that they won't look uneven.
Environments are bland with only ground tiles, so let's make some assets that can be added to the mockup.
Create at least a tree and a rock. The size of the assets depends on the tile's size. A tree that is 124x124px will be huge when comparing to a tile that is only 16x16px, so make assets that have proportions in check.
For the demo tileset, the tree's size is three times the individual tile, so the tree will be 48x48px. The rock is two times the tile's size, 32x32px.
For the mockup, create a canvas that is at least 15 times one tile. For the demo mockup, the canvas will be 15 x 16px = 240px. Now, create a mockup using the tileset and the assets that you made just before. For a more variable-looking mockup, make more assets and tilesets and create your dream level design.
Tilesets have been used since the age of classic games, and they are still a popular way to make environments.
Tiles don't require an excessive amount of time to make, as even simple ones have personality in them. Tiles can be made with any sort of art style like pixels or vectors.