Game Development

Talking about concepts like Game Making and design.

Mockups and why they’re amazing (behinds the scenes stuff too)

Howdy folks, Sheriff Woody here from Toy Story 7: The Electric Boogaloo here to talk to you guys about mockup art and why it’s so gosh darn, rootin’ tootin’ important for game development.

…

“Toy story is good.” -GabeN

…

So anyways, this will be a fairly hefty post, but there will be plenty of visual material to look at.

Mockup art is still or animated material that attempts to communicate the “final look” of a product which can help a team cohere with an idea (sort of like a visual model that gives the impression that we’re “playing” it). Mockup art is in some ways like concept art, though concept art is more about the raw bare bones rapid idea building for things like character designs, environments, User Interface, effects, gameplay mechanics and so on.

Of course Mood Boards are also a form of conceptualization, they are in someways the precursor to the concept art phase, where the director tries to give the concept artist an idea of what they want something to look/feel like. Below is an example of a Mood Board:

In this made up example, let's say we want to have our concept artist design a somewhat realistic and modern looking train for some epic escape sequence.

In this made up mood board example, let’s say we want to have our concept artist design a somewhat realistic and modern looking train for some epic escape sequence in our game. This is to some degree what we probably would hand over to them.

As you can see above, the train example is simply our attempt at giving an artist a feeling of what we want and that they can tinker with these images to create some kind of conceptual art piece.

Concept art afterwards takes these elements to create an idea that we can get a feel for.

Clearly we would turn a train moodboard into this…

This is concept art from Counter Strike. while yes concept art can be made to look pretty, the true purpose is to quickly meld ideas for the director to decide.

This is concept art from Counter Strike Global Offensive. while yes concept art can be made to look pretty, the true purpose is to quickly meld ideas that look *just* good enough for the director to decide.

And generally this process of concept art is very loose and continual until something coheres.

But now, let’s get on with talking about mock ups and why they’re so boss…

(prepare for less impressive artwork compared to above!)

So with Mockups they are a conceptual tool that gives us a feeling of the kind of game we are making and what it might play like.

Below you can see the very first conceptual mockup of a game I made in collaboration with Jolly Crouton Media called Franchise Wars.

mockup example for the game franchise wars

In this very first mockup for the game Franchise Wars. While almost none of this made it into the final game, you can still see ideas of the HUD and cursor, the feeling it might give from a gameplay standpoint (and maybe even audio)

So even though this example did not at all represent the final product, it still communicated the idea of a turn based strategy game.

Actually I think the idea of that one was sort of an aggressive strategy game where you collect more tacos than the enemy team and…uh, yeah i dunno there’s some random stuff going on.

I mentioned earlier that mockups can be animated, and it’s true!

Franchise Wars attack mockup example

You can see though that these did not result in the final game, but you’ll see ideas being played around with visually to help programmers implement said features.

Actually in a game that a friend and I made for the Global Game Jam 2020 called Trapped in Time, I made an animated mockup for him below:

Trapped in Time upgrade interraction mockup

This mockup’s goal was to give the programmer an idea of how to design the UI interface for our resources as well as the interactive workbenches in game.

So while you don’t have to make mockups super fancy, you can still be very specific with certain designs of things to make it easier for your programmers to figure out how they will code the system you need by doing this. Mockups are simply amazing when words are just not enough to communicate the feeling or visual look of an idea.

It might seem like social media promotional material, but it’s really meant to help keep everyone on the same page. Because try imaging how this interface would have turned out had I not made this example for the coder.

It would be like me trying to explain to you that we’re going to make a frantic cooking game, and the kitchen shelf will be along the northern wall, and there will be a ui on the screen that shows your orders and your guy can hold items, and there’s a microwave and the walls will make the shape of a ‘U’.

…

While an abstract idea might be formed from this, it’s just not specific enough to help other people really understand what I just spewed out in the previous paragraph. And even if I was more detailed in my explanation, it would only make other people’s heads spin…so…

…

How about we…

…

Make this better…

…

UI and interaction mockup for Day of the Dad

Much better…

This example is from the Global Game Jam 2019 game, Day of the Dad.

As you can see, instantly this example gives us a feeling of how the UI might operate, the mechanics of the cooking ware, the UI above said cooking ware, how the Meters work, the end goal with the kiddos. It’s all accomplished in just a single image.

After all they do say that “a picture is worth a thousand words.” – Gabe New L

So yeah, I think you get the idea, mockups rock, use them if you are an artist/designer and you are in a team environment. They help reduce future frustration because no one likes to work on something for hours only to have it get thrown out. This definitely can help reduce that, though at the end of the day, mockups are a communication tool, an effective one at best especially for artistic projects.

For the rest of the post, I’ll just kind of spew out other old concept/mockup images I’ve made.

From the game, Ato.

The above example is from my current project called Ato. An atmospheric sword dueling game. The example was a test for visual color usage before I really committed to the look.

Level design concept, which actually I made a good number of these for myself visually because the tools to design levels were a bit lacking. So having created these helps me get a better feel for the level design. (because again the tool to create the levels was purely data entry, that’s right, no real-time visual feedback, just numbers and words to plug into a gray chart)

background designs

object spew, not really meant for sharing but when I work I like to have a canvas image file to work off of for comparing sprites all in one image.

The first conceptual image I made for Day of the Dad. (I think that thing at the top right by the microwave was a ramen cup?)

When I made Day of the Dad with the fine fellows of Cincinnati, I did not have Unity, so I literally designed the level in pixel art so one of the programmers could actually have something to go off of.

I think my approach with the level was to make it just varied enough and provide strategy. The idea was you that had very few but super close cooking ware options near the doorway. But to clear out larger amounts of orders, the bulk of the cooking happens on the back end so you have to plan ahead your mass cooking/delivery approach when you clear orders out. The microwave closest to the door was intended as a desperation, while the back 2 are also desperation, but mostly I think it was the same idea of mass cooking, however to effectively utilize them is tricky and requires some degree of setup. All in all it was quite challenging trying to make a “good” and varied single level for the game. (Of course, if we did have more time (since we only had 48 hours), there probably would be more level layout types)

Day of the Dad RECIPE CHART MEANT FOR NINTENDO POWER STRATEGY GUIDES.

Believe it or not, this recipe chart was incredibly invaluable to the programmers. References like these are logical and easy for them to understand and process.

So that’s about all I got, like I said this post was pretty hefty, but I hope you found it interesting/helpful.

Thanks for reading!

-Brandon

If I made a tutorial series

I apologize for abruptly doing a post that isn’t relevant with last week’s, but a mysterious thought crossed my mind a couple of nights ago from a dream…

I saw myself surrounded by water, and the sun started to set. I blinked once and right in front of me appeared a giant Island. I blinked again and it grew larger in scale. Suddenly it vanished before my eyes and I asked myself one question…

What if I did a tutorial on making a game with Game Maker 2?

What if, the tutorial was a video series where I provided art, music, sound assets. I would walk with the user through coding all of it from scratch, no experience required. I’d structure it to be as fun and engaging as possible. The final game could be a fun and cool project…

The Challenges

Fun vs Learning – I’d want to try to make it a simple and fun. Providing code might water down the experience of learning actual game development, where you have to problem solve ways to execute your idea. I could also use basic code systems like “drag and drop” but that would really limit the potential of what can be made and learned. Doing actual coding and explaining it line by line sounds like the ideal choice, but would also be really boring.

Lack of Ownership – When someone follows a tutorial, they might feel that what they created isn’t really theirs. I suppose this is an inevitable trade-off when a user is simply trying to learn vs create their own assets. The only idea I could have is perhaps suggest that if the user wanted to make their own assets they can.

Time – While it’s fun to think of ideas to pursue and get excited over them, committing to creating a series takes time. I’d essentially have to code the game ahead of time, streamline the code, do an actual recording session and then edit the footage. By the time I finished all of that, I could have spend that time making more than 1 game!

Redundancy – There are already thousands of free tutorials and guides to creating video games. If I made a tutorial series, the issue is that it would generally offer the same information, at most, it would show some different preference and techniques. But I suppose this is no different than making a game during the “Indiepocalypse” anyways (Where everyone is struggling to come up with a unique idea that’s fun).

Everyone is Different – Everyone has a different learning style, some are readers, some are visual, some verbal, etc.. Which in and of itself isn’t a bad thing. The challenge becomes how does someone make a tutorial that’s engaging to the user so they don’t feel like they’re just doing stuff just because someone told them to.

TLDR, these 3 elements are extremely hard to maximize together (but easy to maximize if only 2 are done):

  • Learning – Knowledge and experience that the user will use and reference to for the rest of their game making career. Making a user actually learn something without having them just repeat your actions isn’t really enjoyable but does serve as a reference.
  • Fun – How enjoyable and engaging it is for the user. Reducing frustrating redundant aspects and providing assets would help with time, but would water down the learning experience.
  • Time – Both for the length of each video itself and my own investment of time. Making each video short would really water the experience down, but making each one long is really unappealing and outright boring. The luxury of time is not something I have.

(I like how I made each one a different color, like it’s Pokemon or w/e)

In-spite of the challenges, If I made a tutorial series, I’d want to make it something that is useful, to the point, and enjoyable. I try picturing a younger version of myself, thinking what kind of tutorial I’d want to use for making games. Honestly I’d probably just want someone to do most of the heavy lifting on the code side and I just make the art and such (which really sounds like it could be accomplished with something like Scratch or Alice).

Let me know what your thoughts are if you have any. What type/style of tutorials have you found to be useful?

-Brandon

Game Development: The Pros and Cons to using an “Instance Test” Room for your game

Hi guys, I thought I’d make a game development post about how gameplay mechanics were tested in Frog Hop and the effect it had on the overall result of the final game.

An “Instance Test” room is a developer level that end users won’t be able to play. Its purpose is to bug test and prototype gameplay elements before they are even put into an actual level.

A simple example of the kind of stuff that you'd test for. In this case, if the enemies got stunned, the collision check script didn't run. And when out of stun, if they collide with the ground or an enemy below they jump.

A simple example of the kind of stuff that you would test for. In this case, if the enemies got stunned, the collision check script didn’t run and they would phase into each other. Normally when out of stun, if they collide with the ground or an enemy they jump, which is why they hovered in this example.

It seems like a no-brainer to have a test room so that you don’t tamper with the actual levels of your game. However there are problems that I ran into when using a test room.

When it comes to making a bigger game, it becomes harder to predict what might happen since there are significantly more assets to make than just a spike and trampoline for a Game Jam game (A small game that is usually made in a short period of time).

One of the biggest problems I ran into with Frog Hop was that I would finish creating a simple enemy such as the rabbit, but I would continue exploring that enemy type, which resulted in several variants. While this might not be bad in a short term and can be fun to explore, It resulted in creating A LOT of objects and interactive assets that made it very difficult to figure out where to put it in the actual levels of Frog Hop. Especially if it’s your first game, it can sometimes be hard to plan what assets will be the most fun to put in.

In general, you want to avoid getting carried away with spending too much time on polishing and adding too many new assets. Focus on creating your game starting from level 1, play your first level, if you feel it needs an obstacle of some sort, just instance test that one asset get it to a fairly functional state and just put it in your first level. I used this approach with my first game jam game Tempora, a puzzle-platformer where you can change the seasons to affect the level’s shape as well as how you interact with things.

Tempora, a puzzle platformer created for the Buswick 2014

Tempora, a puzzle platformer created for the Buswick 2014

I’ve found this approach works well for smaller game jam games, since you can naturally just play your game from start to finish and add what it needs. Of course with a bigger game, having some experience and good planning (I’ll talk about that in another post) are key to helping you avoid spending too much time on overly polishing and adding assets.

(Of course, we are talking about video game development here, and boy do games require a lot of work and are hard to plan out!)

I’ve found the term for this is called Scope Creep, where the project size ends up becoming larger than intended, resulting in having a huge back log of assets to make and potentially resulting in burnout.

Unlike burnout, Hoppy here is experiencing the opposite of burnout…chill-out?

When using Instance Test Rooms…

PROS:

  • Bug fixing.
  • Helps avoid tampering with final level designs.
  • Can discover new design concepts that could potentially work well for your project.
  • Decent source for capturing bizarre gameplay moments for your social media posts.

CONS:

  • Can result in Scope Creep, meaning you could get carried away with creating too many assets.
  • Can get caught up with polishing just one gameplay element and lose track of the overall layout of your game.
  • Can get “lost”, where you become attached to the test room and don’t actually design levels that would properly implement your asset.

In conclusion, from my own experience, instance test rooms in general are very useful for testing and polishing your planned asset. While they are great for this purpose, as well as for exploring game concepts, they should be used with caution as the project can run the risk of scope creep! Instance test rooms are important to have, just…don’t get TOO attached to them!

Hope you enjoyed reading,

-Brandon

www.tinywarriorgames.com