(BTS)Mastering Tilesets: Creating Immersive 2D Environments

Full Disclosure:

I want to be completely upfront with all of you, my wonderful readers. The asset packs used in this series were provided to me free of charge by Fanatical However, it's important to note that the use of these assets, the creation of the scene, and all of my opinions about them are entirely my own

On with the Show:

Hey there, game dev enthusiasts! ?? I'm Charles Hache, but you can call me Oz. I'm a game developer and Unity Certified Instructor with a serious passion for understanding the nuts and bolts of #GameDevelopment . Over the years, I've developed a deep appreciation for the critical role that #GameArchitecture plays in creating a compelling and immersive gaming experience.

I'm super excited ?? to introduce you to a new series I've been cooking up, dedicated to unravelling the mysteries of game architecture. Aptly titled "Understanding Game Architecture," this series aims to shed light on the principles of game architecture, how they influence #GameDesign , and the ways they shape the #DevelopmentProcess . We'll be exploring different architectural patterns, diving head-first into Unity 's engine, and examining how these patterns manifest in real-world game scenarios.

But before we delve into the complexities of game architecture, I thought it would be a good idea to set the stage ??. So, this LinkedIn post is all about setting up a scene for our upcoming series. We won't be building a complete game here; instead, the focus will be on showcasing production steps, demonstrating the use of some fantastic assets from a brilliant bundle I've recently discovered, and creating an immersive 2D environment.

In this post, we'll be focusing on Tilesets – a fundamental tool in any 2D game developer's toolkit ???. By the end of this post, you'll not only have a better understanding of tilesets and how to use them, but you'll also get a sneak peek of the scene we'll be using to explore game architecture in the upcoming series.

So, without further ado, let's dive in! ?? ♂?????

Setting up the game engine and importing assets ?????

In this stage, I'll be setting up my development environment using Unity 2022.3 LTS ???, the latest long-term support version of Unity, and JetBrains Rider for coding. ??

I will be incorporating assets from the Tier 1 bundle of the "Fantasy Dreamland" ??? and "Monster Factory" ?? series by ELV Games. Specifically, I'll be working with:

1. Grasslands Tileset ????: This pixel-art style asset includes various environmental tiles like grass, flowers, bushes, and trees, creating a vibrant outdoor setting. The set contains hundreds of tiles and includes animated elements like flowing water. ??
2. Village Tileset ?????: This asset set is perfect for designing a bustling village with houses, shops, and other buildings. It includes exterior tiles for complete scene creation.

In addition to these, the bundle also includes various character and monster sprites, music asset packs, and a character faces generator tool. While I won't be using these immediately, they will be invaluable as the development progresses. ??????

Remember, this is not a comprehensive list but it gives an idea of what's included in the bundle. As game development advances, I'll be integrating more of these assets into our game environment. ??

A note of satisfaction:

One of the things I ?? love about these asset packs is the variety of size options they come in. This is a real boon as it helps to avoid compression artifacts and ensures we keep those crisp pixel lines. In my case, I'll be using the 48 x 48 resolution. You might call me a monster ?? for not sticking to a power of 2 in my Pixel Art "Game," but I value the crispness of the images at this higher resolution.

The art assets come in 3 resolutions with native support for universal tile slicing or RPG Maker format.

• As for my import settings in Unity, I'll be using the following:
• Texture Type: Sprite ???
• Sprite Mode: Multiple (this allows me to use the Sprite Editor to cut them up)
• Pixels Per Unit: 48 (The length of one standard side)
• Filter Mode: Point (No smoothing)

Please keep in mind that this is not an optimization session, but rather an introduction to the process. However, I welcome your input and discussion on areas of improvement. Remember, my primary investment here is in the development of this learning series, not the game itself. ????

My next step will be to build the scene. Let me clarify that this is not a tutorial on level design, but rather a glimpse into my process. Tools like Tiled and Unity's Rules Tiles can be incredibly useful for this kind of work, and I'd be more than happy to do mini demos on them if there's interest. But for now, let's focus on setting the stage! ?????

Screenshots of the setting

So let's dive in and check out our little pixelated world in the making, shall we? ??

In the top-right quadrant of our map, we've added three quaint wooden structures, all in shades of warm brown. These buildings are nestled among the grass and flowers, creating a serene residential area. ????

The lower right quadrant is bustling with activity - the heart of our village. You'll find a well and lamp posts as the centerpieces, with three main buildings with vibrant red and blue roofs. You'll also notice one of our small wooden structures from the other quadrant has found its way here, adding to the charming chaos. ??????

The lower left quadrant boasts a sizeable grey brick house with a striking red roof, complete with two doors. Here, the locals have been busy preparing for winter - you'll notice four stacks of wooden logs and an axe embedded in a stump. The vibrant green trees add a lovely contrast to the grey bricks of the house. ????

In the upper left quadrant, two additional houses stand, one small and one medium-sized, with the medium one proudly displaying a sign. These are connected by a path of flagstones, winding their way through clumps of grass and white flowers. ????

But that's not all - the scene is set up on a plateau, cordoned off by a guard rail fence. Below, a whimsical forest of blue trees with white flowers awaits, giving our scene a dash of mystique. ????

I've included a few screenshots in the post for you to get a feel of our vibrant pixel world. But remember, this is just the beginning! ????

How did I get here?

If you're anything like me, you'll appreciate a good system. So here's my game plan: ????

First things first, I set up my tile set and palettes. These are my building blocks and the colors that breathe life into the world. ????

Then, it's time to lay down our layers. I add a Tilemap for each of the following, in this order:

1. Way background ???
2. Background ??
3. Background obstacles ??
4. Background decorations ??
5. Foreground ??
6. Foreground decorations ??
7. Way foreground ??

Following this, I create matching Sorting Layers. But wait, there's a twist! I add an extra layer for the player. This layer sits snugly between the background decorations and the foreground, ensuring our protagonist stands out. ?? ♂???

With the prep work done, it's time to roll up our sleeves and start creating! I first build the basic shape of the map in the Background layer. Then, I lay out the buildings and features in the Foreground and Foreground Decorations layers. Next up are the Background Obstacles, followed by the final dressing - the Background Decorations and some finishing touches to the Foreground Decorations. ?????

And voila! We have our pixel world taking shape. To help you visualize this process, I've included screenshots of the different building stages. But remember, as much as I love my system, game development is all about creativity - feel free to shake things up and make it your own. After all, every pixel world deserves to be unique! ????

Preview of Upcoming Series ????

All aboard, folks! This blog post is your ticket to an exciting journey into the realm of game architecture. ????

In the upcoming series, we'll be using the scene we've meticulously set up here as our playground to delve deeper into the structural intricacies of game development. We're starting at the very heart of Unity: Component Architecture. ?????

Ever wondered, "Why do we use GetComponent? Is there a more efficient way to structure our code? How can we optimize it to respect the component architecture?" Well, you're in luck! We'll explore these questions and much more. ????

And what's more, we'll be applying these principles in real-time, utilizing the fantastic assets from the bundles we've discussed here. This is the beauty of learning by doing, seeing theory transformed into a living, breathing pixel world. ????

Conclusion ????

And with that, we wrap up the first chapter of our journey. We've set up our development environment, picked our favorite asset bundles, and kick-started the creation of our game scene. I hope you're as excited as I am! ?????

Now it's your turn. I encourage you to tinker with these tilesets, create your own level designs, and infuse your pixel world with your unique creativity. ????

But don't forget, this is just the beginning. We're about to dive deep into the world of game architecture, and I promise it's going to be an enlightening ride. So, buckle up and stay tuned for the upcoming series - I'll see you on board! ????