Jump to content
  • Advertisement
  • 11/19/14 03:32 PM
    Sign in to follow this  

    Designing a "Playable" UI That Secretly Teaches How to Play

    UX for Games

    Editor's note: The majority of images in this article are animated gifs, but we've had reports that they don't always appear animated for all readers -- if you're seeing a still image try clicking on it and you should see the animation. This article is part of a series (note that you don't strictly need to read the other posts to read this one). You can find the previous posts here: [rollup="Previous articles"]
    1. Toto Temple Deluxe: Platforming (Part 1)
    2. Toto Temple Deluxe: Platforming (Part 2)
    3. Toto Temple Deluxe: Collisions for Platforming
    4. Toto Temple Deluxe: The Unique Experience
    5. Toto Temple Deluxe: Evolution Through Iteration
    6. Toto Temple Deluxe: Sacrificing fun to remove the no-fun
    7. Toto Temple Deluxe: Odyssey of a Bubble
    8. Toto Temple Deluxe: Powers Up!
    [/rollup] Back in May 2013, we participated in a game jam called ToJam and we made a game in 3 days. This is how the original Toto Temple was born. About a year later, after a lot of revisions, live events and even a partnership deal with Ouya, Toto Temple evolved into a bigger and better game called Toto Temple Deluxe!

    How to play

    Just in case you haven't played the game, here's a short introduction to the gameplay:
    1. Get the goat and keep it on your head to score points
    2. First player to reach 3k points wins the game
    3. If you don't have the goat, steal it
    4. You steal the goat by dashing onto the carrier (this is important)
    That's essentially the goal of Toto Temple. There's more depth to it, but it's stuff you're supposed to figure out by yourself. Here's a relevant (and really important) example:
    1. Dashing is not strictly reserved for stealing the goat
    2. It makes you move quickly in a straight line, so use it to move around faster as well (don't walk)
    tt_getthegoat_01.gif Notice how Yellow got to the goat before Green did?
    That's it, you know how to play Toto Temple. We've added a lot more content since then, but the basics are still the same.

    First UI concept (jam version)

    Before we talk about the UI system currently in place in Toto Temple Deluxe, let's see where we started. The first (and only) menu we had in the jam version was this:
    tototemple_firstui.gif "A" to join, "B" to... un-join?
    Super straightforward. You press "A" to join and when there's at least 2 players, the "press start" option pops up and you can start the game. Note that there's no "color selection" option (say what!?). You simply press "A" and figure out which color you got depending on which controller you picked up. The lack of color selection might seem weird at first, but it didn't feel that important during the jam, especially since there's no behavior/skills differences between each color (more on that below).

    Live events: Looking for trouble

    Back in November 2013, the original Toto Temple was being featured at Gamercamp, a small and charming event taking place in Toronto.
    Between the jam version and the version we presented at Gamercamp, we've made a bunch of tweaks in the gameplay: smoother controls, balancing the points system, etc. One thing we didn't do, though, was making changes to the UI system. Why would we change something that isn't broken, right? During a live event, the ideal scenario is usually to let players figure out the game / controls by themselves. It's a lot less work for you and it's a good sign that your game (or UI) is well-designed. What we noticed back then is that once in the game, most players had no clue how to navigate using the "dash" mechanic. Even after "reading" the short tutorial for controls and listening to our oral explanations, players kept moving around by running and jumping.
    tt_dashandsteal_4.gif See? No dash. Oh wait! Green player is on to something...
    Over and over, you could hear us say: "To dash, you need to press the X button AND the direction in which you'd like to dash. So to dash up, you push the left joystick up and you press X at the same time. You can dash in all 4 directions, even left up right down consecutively if you want". What we think was happening is that players associated the dash mechanic with "stealing the goat", and only with that, since it's the main objective. They would wait to come aligned with the goat carrier before dashing. Like we mentioned above, dashing can be used to move around faster, something most players didn't think of. It's technically not a bad thing, since you're supposed to learn that kind of stuff by yourself as you play, but we still felt like we could have done a better job at introducing the concept to new players.

    Back to the drawing board

    At that point, we noticed that dashing in multiple directions was definitely something most players had trouble with. Dashing left and right was kind of okay, though. Since your Toto was automatically facing left or right, you ended up dashing in one direction or the other by simply pressing X (no direction). Dashing down is not often required at first (you start using it more as you start dashing to move around a lot). The real problem was dashing up. You had to dash up way more often than down, since gravity was pulling you down and you often wanted to go up in the level.
    tt_dashrace.gif Dashing is noticeably faster than running and jumping
    Eventually, players would understand that dashing is always useful, but it was hard to enjoy the game and be competitive without knowing that important detail. We had to do something about it.

    Character selection: First lesson

    A short time after gathering all that new information, we got invited to demo Toto Temple at a small gaming event in Montreal called The Prince of Arcade. It was a good occasion to try and improve the game's teaching methods and see it in action. First idea we had to solve the dashing problem was to bring the platforming and the physics into the menu and literally ask players to dash up to join the game, instead of simply pressing "A". It wouldn't teach them how to play, but they would at least be aware of the key combination.
    tt_firstdashup.gif Dash up to join, dash down to quit
    After watching players play the game all evening, we noticed that most of them would take less time to start dashing in different directions. The new "playable" menu definitely had an impact. We didn't know back then, but that would end up being our very first step towards a completely physical and playable UI.

    Deluxe makeover

    Shortly after testing out the playable menu, we got in touch with the great folks at Ouya and managed to get a partnership deal for a bigger and better version of the game. We had plans for more levels, new modes, power-ups, and of course, a completely new UI system. Since we were going for a physical and playable approach for the new UI, we decided to literally go "outdoors" with temple-like boxes, etc.
    ttd_join_01.gif No more abstract boxes! Smell that fresh air?
    The first version based on the new look and feel was pretty much the same thing, but inside some nice looking pillars in an outdoor scenery (see above), you know, instead of boring and flat boxes. Since we didn't have that big and colorful picture of the player in the background anymore, we added colored statues on top to really add contrast regarding who is in and who is not. It creates a visual mass in the top part of the screen that is easier for the eye to scan, compared to just a button being on / off. While not the main purpose, it also creates a small visual celebration. As a newcomer, it makes you feel a bit like the game is happy that you joined!

    Weird behaviors

    Now for some strange reasons we still don't understand, we've seen a lot of player dash up to join the game, then immediately dash down to leave the game. Then dash up, then dash down. Again and again and again. They would do that until someone pressed start, and if they were lucky, they would happen to be "in" as the game progressed to the next step. Most of the time, they ended up being "out" and we had to go back, wait for them to join, then proceed again. The worst cases were the ones when another player would mindlessly dash down and leave as we were waiting for the remaining player to join. What the heck? What we think is that players aren't used to have an impact on the UI by playing around with their character. They simply don't realize their actions are changing the game's settings.
    ttd_join_02.gif We also made the background light up to make it more obvious that you're in.
    To fix the problem, we simply removed the "dash down to quit" button (see above). To leave the game, you had to dash in the "join" button again (a toggle system, basically). It helped reduce the amount of weird "switch flicking", but once in a while we can still see some players join and leave over and over using only the top button. It didn't completely fix the problem, but at least they seem to understand what to do after their first try.

    More content, more problems

    The new "character selection" was done and functional, but we still needed new menus for that new Deluxe content (levels, modes, etc). To be honest, we haven't thought much about that when we made the first playable menu screen. While designing pretty much anything, you usually want to keep visual and functional unity through the whole process. Since we had "buttons" that needed to be dashed into in the first screen, it made sense that we kept the same system for the other screens. The first menu to follow was the level selection screen, and things started to get a bit more complicated from that point in time. On a more fundamental level, the moment we switched to a playable menu system, most controller inputs became forbidden for anything except controlling your character. Moving the left joystick would now move your character, so we couldn't use any cursor or pointer. Pressing the A button would make your character jump, so we couldn't use it to confirm any actions. Pressing X would do the same thing, since you'd use it to dash into the different buttons. We already had that problem with the first version, but we simply went with the "Start" button to start the game. It was a pretty easy fix.

    Level selection: More teaching

    The next menu screen we ended up needing was a "level selection" screen. We were aiming at 5 or 6 new Deluxe levels (or temples), so we needed a way to choose one from the bunch. Still with that same functional unity in mind, we came up with a first iteration using left and right buttons to choose your level (see below):
    ttd_levelselect_01.gif Still missing some assets, but you get the point.
    While sketching the new screen, we thought: "Hey, what a good opportunity to teach even more stuff to players!". With this one, we were trying to teach you 2 things related to movement:
    1. You can dash up, but you can also dash left and right
    2. Those buttons are too high? Well guess what, you can jump and dash consecutively!
    To help understand the directives a bit more, we even added subtle decoration details to guide your eye from the starting position of your character, all the way up to the buttons on each sides. Here's what worked:
    • We've seen a lot of players simply select the default level by pressing start right away on their first playtest. We concluded that it was okay since you usually don't know any of the levels on your first try (the first one is as good as any other). They saw that there were other levels available, so they understood that it was possible to manually choose.
    • Most players recognized the buttons and the fact they need to bump into them, just like they did in the previous screen.
    Here's what didn't work:
    • Players understood the "jump and dash" combination, but since they were new at the game, they were having a hard time hitting the button multiple times in a row.
    • The problem was coming from the fact that your eye wanted to look at the level thumbnails so you can pick the one you liked, but you felt like you also needed to look at your character to make sure you were aiming correctly at the button. It was weird and unpleasant.
    • Some of them also took a bit too much time to figure out that the X button could be use for something else than joining the game (they probably didn't notice the dash animation while they were looking at their controller to spot the X button).
    ttd_levelselect_02.gif "Oh ok, wait. What are the buttons? How do I..." - Yellow player
    Here's what we did (see above):
    • To make it more comfortable to select a level, we added little step so you could mindlessly dash left or right and focus on the level thumbnail. It wasn't teaching you to jump and dash consecutively anymore, but it was at least teaching you to jump (necessary to reach the button), a thing that the previous screen didn't require.
    • We added level icons with a single thumbnail so it could be easier to see the whole picture (how many levels total).
    • We moved the "dash left / right" instruction from the middle top to both sides. They're also closer to each button so they were easier to notice and we made them blue like the actual X button (in this case it's U for the Ouya equivalent).
    • It wasn't much of a problem, but we made the whole box smaller in width so it'd take less time to dash from one button to the other.

    Mode selection: Final exam

    The last menu to come in was the "mode selection" screen. Even if it was very simple at its core, it also happened to be the trickiest to implement. To quickly give you an idea of the UI flow before going further, here's the order in which you'd go through the 3 menu screens:
    1. Character selection comes first since we'll need to know how many players will join for the next step.
    2. Mode selection is second, so you can quickly define the teams if that was your intention from the start. We want to let you set what you have in mind as soon as possible, so you don't have to wait and "remember it".
    3. Level selection comes last. If we ever decide to create "mode-specific" levels, the filter will already be defined.
    ttd_uiflow.png An early sketch the whole UI flow
    For the "mode selection", we basically needed a simple way of selecting a mode from a list, just like with the "level selection". An obvious choice was to duplicate the screen we made for the "level selection", but it didn't feel right (hard to quickly differentiate one screen from the other, etc). We also wanted to cover as much of the different controls as possible, so the other obvious choice was to ask players to dash up and down (instead of left and right) to go through the list. With a button at the top and one at the bottom, the screen was pretty much done. Then the hard part came in and we had to design the team selection box (below).
    ttd_mode_01.gif Position-based team selection ftw!
    As you probably remember, one of the trickiest detail we had to deal with was that most of the controller buttons are already used to move your character around. Setting up teams without the use of a joystick-controlled cursor or the "A" button to confirm anything forced us to go in a different way. With only a small physical box at disposition, we had to design a system that was easy to understand, fast to setup and that didn't use any controller buttons. As you can see above, we decided to use a new variable to set things up: your position in the box. Here are the components and their uses:
    1. Avatar blocks are sitting on your head when you're not in a team, and they automatically snap in place when you enter a "team zone"
    2. A physical "VS" block to literally separate the two teams, which also acts as a "dead zone" to make the transition from team to team clearer
    3. A "dash down" button that makes the list loop around
    4. "Press start" indicator popping up when the teams are set
    We've never really encountered major problems with this screen so far, so we've kept like that since.

    Quick teaching roundup

    So far, here's what players should have in mind (subconsciously at least) before they even enter the game:
    1. They should know that the X button can be used simultaneously with the joystick
    2. They should know that A is for jump
    3. They should know that X works in multiple directions, including up, left and right
    They might not clearly remember everything they did in the menus, but their subconscious picture of the controls should look like this (below). Its a good thing, since it's exactly all the buttons they'll need to play the game!

    Post launch: Player requests

    Toto Temple Deluxe has been published and you've already seen the most of the UI that went into the game. Following the release, we did like we always do: we kept interacting with fans in forums, comments, blogs, etc. The 2 most recurring comments (or requests) we received were:
    1. I don't have friends to play with, can you add bots?
    2. I want to be able to choose my color at the start of the game! I know it doesn't change anything gameplay-wise, but [insert color] is my favorite color and I'd like to play with it.
    Both of these are super legit requests, and after some long discussions to evaluate the costs of implementing those things, we decided to go for it even if it was expensive, long and complicated. Not very bright, I know. But we love you.

    Update: Destroying a screen for 1 feature

    Both "bots selection" and "color selection" are closely related to "character selection", which we quickly identified as a problem, UI-wise at least. Our current menu for "character selection" (if we can even call it a "selection") wasn't really designed to give players a choice of color or character. The pillar boxes are pretty small, and handling a bots selection system later on would also add up to the clogginess. We tried to think of different solutions to keep our current UI for that screen, but none of them was efficient, clean or simply felt right. We then decided to start over from scratch!
    ttd_join_03.gif Characters automatically jump when you push the joystick to wake them up. That way, you can spot which one you are right when you're expecting visual feedback!
    Here's what changed:
    • We kept the big statues. It's not a change, but we loved them too much to get rid of them.
    • We now have a big public box, instead of beautiful, individual pillars (still sad about those pillars).
    • We added uncolored Totos with player numbers over their heads so you can keep track of who you are.
    • You can now choose the color you want by dashing in the corresponding button.
    • You can switch from your current color to an unselected one directly.
    • You can't steal someone's color, and vice versa.
    • We do not have bots yet, but this design should let you decided if, for instance, green player will join in as a bot, etc. We'll simply cut the "join" button into two buttons: "Join" and "add as bot". At least that's the plan.

    Conclusion: Benefits and difficulties

    Making a fully playable UI was definitely a good experiment for us. Even if it wasn't completely necessary, it helped convey the complexity of the controls to new players. We could have relied on traditional, text-based tutorials, but most player would have just ignored them to then have a hard time playing the game like it's supposed to be played. Making a playable UI system is great if your game needs it, obviously, but it also comes with its share of difficulties: Benefits:
    • You barely notice that you're learning
    • Way less boring than text and steps by steps / holding hand
    • Eases the players into your game mechanics
    • You don't have access to all controller buttons anymore
    • Hard to strike a good balance between efficiency and clarity
    • It's easy to start adding physical buttons everywhere, but that will get really confusing really fast
    Games with really simple mechanics or barely no menus may not really benefit from this kind of system. On the other hand, a playable UI could help preserve immersion and overall unity even if you don't need it as a teaching tool. Look at games like Antichamber by Alexander Bruce and Braid by Jonathan Blow. They both have playable menus, even if they don't necessarily teach the player how to play the game in a literal way. Instead, they help preserve immersion, so that you're not cut out of the game's universe each time you need to use a menu.
    antichamber.gif In Antichamber, you just need to look around and point at stuff to interact with the menu braid.gif In Braid, you physically go through a door to pick a world / level
    Obviously, we're not implying that our method is the best / only way to do a playable menu. It's just a long walkthrough (maybe too long, sorry) of our development process. If you think it could have been done better based on our game's needs, or if you have any comments, feedback or questions, we would love to hear them! Note: This article was originally published on the Juicy Beast blog, and is reproduced here with kind permission from the author Yowan. Thanks Yowan!

      Report Article
    Sign in to follow this  

    User Feedback

    Create an account or sign in to leave a review

    You need to be a member in order to leave a review

    Create an account

    Sign up for a new account in our community. It's easy!

    Register a new account

    Sign in

    Already have an account? Sign in here.

    Sign In Now

    There are no reviews to display.

  • Advertisement
  • Advertisement
  • What is your GameDev Story?

    In 2019 we are celebrating 20 years of GameDev.net! Share your GameDev Story with us.

    (You must login to your GameDev.net account.)

  • Latest Featured Articles

  • Featured Blogs

  • Advertisement
  • Popular Now

  • Similar Content

    • By muttsang
      Hello everyone,
      I am a Games Tech and Design student in my second year and I have made a game on the side for mobile. I want to publish the game in the Play Store for Android and I do not want to make money out of it. I just want to have a free game on the play store because I want to experience publishing games on platforms accessible to majority of people and enjoy what I have done. The problem is i do not know anything about copyright laws and legal stuff and I have used some assets from the internet where they have said the asset can only be used for personal use.
      I want to know if I could get in trouble for using those stuff for a free game (no monetization). and if i have to refer the original creator, how would I do it? 
      Sorry if it is a common and silly question but I have no idea whatsoever on the legal stuff. I looked it up on the internet and have found out that if the game does not make money i can publish it and some said that i could get into legal trouble if i am not careful about it. 
    • By GameDev.net
      Note: This article was originally posted to GameDev.net in 2003, and although the "shareware" terminology is now dated, the advice remains relevant and meaningful.
      Why is it that some shareware developers seem to be hugely successful in financial terms, growing their sales from scratch to generate tens of thousands of dollars in income, while the vast majority struggle to generate even a handful of sales? The answer can be found by exploring the difference in mindsets between both groups. For convenience, we'll label them as the professional and the amateur.
      First, let's examine the...
      Product Development Cycle
      Get inspired by an idea for a product. Create the product, regardless of whether there's a market for it. Release the product. Promote the product sporadically until bored with marketing. Note dismal results. Ask disempowering questions like, "Why do my sales suck?" Sulk for a while. Network mostly with others who are also getting dismal results, taking comfort in the fact that you aren't alone. Make a few sporadic changes to product or web site (maybe). Abandon the product (aside from continuing to process orders and handle support), and move on to the next product with step 1. Professional
      Do basic market research to determine the best opportunities for new products. Design a product that inspires you and that can exploit the market opportunities you identified. Create the product along with the system for selling the product and the marketing plan. Release the product. Promote the product systematically according to the marketing plan. Measure results and gather feedback. Study and learn from the top industry performers (companies and products). Ask empowering questions like, "How can I increase sales by 20% or more?" Update the product, the sales system, and the marketing plan based on lessons learned. Repeat from step 5.  
      After the first pass through this cycle, the initial results for the amateur and the professional may be virtually identical. But whereas the amateur typically stops after the first pass, the professional understands that this is just the beginning. Let's say they each release products that initially generate $100 per month in sales. The amateur will often conclude that the product is a failure, perhaps make a few minor revisions that don't help much, and then move onto the next product. But the professional says, "How can I get to $200 per month?" By iterating through this cycle of refinement and re-release many times (often more than ten times over a period of several years), the professional may ultimately end up with a hit that generates thousands of dollars in monthly income. To the amateur that initial $100 per month is seen as a flop. To the professional, however, it is seen as a seed. The professional understands that the initial launch is only the first step in a long stream of future updates and refinements, not just to the product but also to the sales system and the marketing plan. Here's why this works:
      In order to make a single shareware sale, there are an enormous number of factors that must all come together synergistically. The chance of getting all these factors correct on the initial release is slim to none. Let's say there are only ten critical factors in making a shareware sale (the quality of the product, the market demand for the product, the effectiveness of your registration incentives, the effectiveness of your ordering system, the file size of your shareware demo, and so on). And let's say that for each factor there is a range of effectiveness from 0% to 100%. Understand this: these factors don't add -- they multiply! If all of your critical factors are at 100%, but just one is at 0%, that means you could be getting zero sales, even though you did most things perfectly. For instance, you could have a truly brilliant product, but if people don't feel secure using your order form, that single flaw could cost you most of your potential sales.
      What if each of these 10 factors was at 60% effectiveness? Do you realize that this means you're only getting 0.610 = 0.6% of the sales you could be getting? Even if each factor is at 90% effectiveness, that's still only 35% of optimal. Obviously, this model is oversimplified. My goal is to dispel the prevailing myth that if each part of your ordering pathway is "good but not great," that your final sales will be good too -- the reality is that lots of good factors multiply together to create "utterly dismal." Here's the formula: (Good but not great)N = Utterly dismal (for a sufficiently large N). If everything about your product is just good (say 60% of optimal), this doesn't mean you'll be getting 60% of the potential sales. It means you're more likely getting less than 1% of the sales you could be getting. Refining the critical success factors and making each part of your product, your sales system, and your marketing just a little bit better with each consecutive release is how you grow your sales massively over time. It isn't out of the question that you can double or triple your sales in a day by doing this. See this article for some ideas on that.
      Now the truth of the matter is that most initial releases are nowhere near averaging 60% effectiveness for all critical success factors. Especially for first-time developers, there are probably many factors that are at 10% or less. The headline on your product web page, for instance, may be nonexistent or poorly written. Your product may have bugs or compatibility problems that prevent many people from running it. Your web site may look unprofessional and scare potential customers away. You may not have even scratched the surface of all the marketing you should be doing. Perhaps you only have one product and aren't experiencing the benefits of cross-selling other products. It's entirely possible that when all these factors come together, you may be generating something like 0.01% of the potential results that your product is capable of if you continued to nurture its development.
      Selling software through shareware channels is very different than selling software at retail. With try-before-you-buy, there are a huge number of steps each potential customer can go through before buying, any one of which can kill the sale. Just one suboptimal factor can cost you most of your potential sales, and when combined, multiple suboptimal factors may be tossing out potential customers left and right. Picture a ball rolling down a pipe with ten holes. If the ball passes all the way through the pipe without falling through any holes, you make a sale. But if the ball falls through even one of those ten holes, the sale is lost. The way you get your product from dismal sales to outstanding sales is by systematically identifying and plugging those holes.
      Having been in this industry for many years, I've seen this cycle repeat itself again and again. You would be absolutely amazed at how many of the greatest shareware hits experienced dismal sales after their initial release... sometimes even no sales at all in the entire first year. But the developers turned them into hits by continuously improving those critical success factors over a period of years.
      So which is the better approach? To release five products in five years, each at 0.01% effectiveness, or to raise a single product from 0.01% to 2%? If 0.01% makes you an average of $100 per month, the first scenario will get you to $500 per month, and this is exactly what amateur developers do. But the second scenario will get you to $20,000 per month with just one product, and it requires less work too.
      There are three good reasons why experienced professional shareware developers are often able to release more consistent hits than less experienced amateurs. First, the pros have already plugged many of the holes in their system that are shared by all products, such as optimizing their web sites to sell, refining the ordering process, implementing a money-back guarantee, crafting a solid marketing plan, gaining excellent search engine placement, etc. So when a new product is released, it inherits the benefits of prior system-wide optimization work. Secondly, the pros can apply the wisdom gained from refining each previous product to any new release, so when they release a new product, they've already eliminated all the obvious sale-killers that still plague amateur developers. And thirdly, the pros have already internalized the attitude that the first release is just the beginning; thus, they expect to continue to refine the product and immediately start listening to user feedback to help them locate new holes that need to be plugged.
      It is rare in the extreme that a developer's initial release will be anywhere near its full potential, even if the developer has vast experience. If you release a new shareware product, I guarantee it's going to be riddled with flaws, and it's probably earning less than 1% of its potential. If you raise each of ten critical success factors by just 5%, you'll increase your sales by 60%. And if you do this over and over again, you'll see your monthly sales gradually climb: $100... $160... $250... $400... $650... $1000... $1700... $2700... $4300... $6900... $11,000... $18,000... and so on. Note that you don't even reach $1000 per month until the 5th iteration!!!
      In order to improve these critical success factors, you have to confront the brutal, objective facts. Invite others to evaluate your product, your web site, and your ordering system. This requires putting your ego aside and being as open-minded as possible. Find out how others are marketing their products. Listen to what others have to say; don't delude yourself by trying to persuade them you're right and they're wrong. Don't worry about trying to make everything perfect all at once. But see if you can increase several critical success factors by a small amount with each successive release. For instance, you might try to make your product page just 20% more effective, your registration incentives 10% more enticing, your product interface 30% more intuitive, and so on.
      As a personal example, shortly after I released Dweep in mid-1999, I began getting requests for an expansion pack of more levels. So I released an expansion pack. Players also complained that Dweep moved too slow and needed a speed control. So I added a speed control. Then players wanted another expansion pack, so I released that. Then players wanted a level editor, so I added that. Then players wanted to be able to post their own levels, so I added a free levels archive. That turned out to be too much work to maintain, so I eventually took it down and replaced it with a forum where players can post their own levels, which has been working out wonderfully. During this time I also made major revisions to the web site, the marketing process, the ordering system, cross-promotions with others games, and the price (raising it from $9.95 to $24.95 while increasing the number of levels from 30 to 152). Most of Dweep's sales were a result of these later refinements, not the initial release.
      The amateur mindset leaves most of the potential rewards forever untapped, wallowing below 1% of the true potential. But professionals keep going... treating that shareware product as a tree that must be patiently watered before it bears a full harvest of fruit. I suppose you could say that the amateur sees the glass as 99.99% empty, while the professional sees it at 0.01% full.
      Now let's explore the differences between shareware amateurs and professionals in terms of...
      Personal Development
      Myopically focus personal development efforts on the areas you enjoy most (such as design or programming) as opposed to the areas where improvement would yield the greatest results (such as marketing or self-discipline). Gain knowledge sporadically through just one or two primary sources (i.e. reading books and articles, but not live seminars or audio programs). Apply your new knowledge to make your strengths even stronger (i.e. product development), while falling further behind in your weakest areas (i.e. marketing and sales). Guard the best of what you've learned as a treasured secret. Maintain a competitive scarcity mentality. Repeat from step 1.  
      Take personal inventory of strengths as well as weaknesses that specifically detract from those strengths (ex. poor goal-setting habits result in unfocused marketing plan). Identify key knowledge/skills that must be mastered (marketing, selling, programming, etc) as well as key character traits that need improvement (organization, self-discipline, focus, motivation, etc). Identify multiple sources where above knowledge/skills/traits can be improved (mentors, business associates, books to read, organizations to join, conferences/seminars to attend). Take action by diving into these sources. Read the books, join and become active in the organizations, attend the conferences/seminars, and learn from the key individuals. Patiently apply the new knowledge to your business and life, realizing that even small gains will compound exponentially as you continue running this cycle year after year. Pass on your new wisdom to others by sharing advice, writing, volunteering, mentoring others, etc. Maintain a noncompetitive abundance mentality. Repeat from step 1.  
      The amateur sees personal development in narrow, monodimensional terms -- i.e. becoming a better developer. Efforts are focused on acquiring more knowledge within this limited field. A shareware amateur's bookshelf will be dominated by books within a narrow field, such as software development, virtually ignoring other crucial parts of the business like marketing and sales.
      By contrast, the professional takes a holistic approach. The professional understands that all areas of one's life are intertwined and that a weakness in one area (such as financial management) can detract from strengths in other areas (such as programming). The professional's bookshelf will likely be filled with a varied mix of books on topics such as business, marketing, sales, finance, technology, psychology, philosophy, health, and relationships. The professional keeps an open mind to acquiring knowledge through a variety of media, perhaps reading a book on software development, having a discussion with peers about marketing, listening to an audio program on time management, and attending a seminar on sales techniques. The professional seeks to advance on multiple fronts, understanding that a 10% improvement in five different areas will yield better results than a 50% improvement in just one.
      The amateur guards knowledge as a scarce resource... a competitive edge. Thus, the amateur rarely becomes known in professional circles, thus missing out on scores of lucrative opportunities that professionals frequently share with each other. This attitude constricts the flow of new knowledge back to the amateur, and the result is that the amateur is cut-off and isolated from the "inner circle" of the highly successful within his/her industry. Few bother to help the amateur directly because the amateur has never done anything for them and is relatively unknown. The amateur is stuck in a downward spiral of scarcity where growing the business feels like climbing a mountain.
      Conversely, the professional understands the importance of information flow and that passing on knowledge to others only deepens his/her own understanding. This sharing of knowledge plants seeds of abundance that benefit the professional for years to come. By giving openly and generously, the professional develops a positive reputation that attracts other professionals. An abundance of new opportunities flow to the professional through this network, seemingly without effort. This creates an upward spiral where the professional is able to leverage this network to grow his/her business with relative ease.
      Finally, let's dive into the...
      Psychological Factors
      Nonexistent or foggy goals ("Make more money") Sporadic motivation coming from irregular outside influences (inspiring book/movie, great conversation, flash of insight, etc) Focus on making money and getting customers to buy Seeks to blame poor results on outside factors (poor economy, competition, lack of luck, unfairness, shortfallings of shareware model, etc) Expends effort on the most enjoyable actions Scarcity mentality based on zero-sum thinking ("I'm not going to give anything away unless I get something in return") Short-range time perspective used in planning, often limited to the timeline of a single product cycle Sees problems as obstacles Persistent self-doubt ("Success is elusive") Unbalanced approach improving major strengths while letting other areas slide Believes that success comes from doing (work), then having (results), then being (successful) "Once I achieve this (foggy) goal, then I'll be successful" Weak commitment ("I'll try this and see what happens") Avoids facing brutal facts, stays within comfort zone ("I don't enjoy/understand marketing, so I'll just keep programming for now") Believes that risk-taking and luck are necessary for big breakthroughs ("Releasing a new product is like betting on a spin of the roulette wheel") Success stories from others increase feelings of anxiety, inadequacy, or resentment Associates most frequently with other amateurs who are equally confused, having less frequent contact with professionals (group griping and pity parties outweigh true learning experiences) Negative attitude rips many new ideas to shreds before they pass the incubation stage Negative associations to building business (customers are headaches, too many responsibilities, being overextended, burning out, a risky gamble, can't make money and do what I love)  
      Crystal-clear goals, committed to writing ("Increase sales by 20% within 3 months") Deliberate cultivation of burning desire Focus on filling customer needs and providing value Accepts responsibility for poor results, seeks to understand causes and learn from them (registration incentives need improvement, product descriptions need rewriting, etc) Seeks to understand causes of poor results and learn from them Expends efforts on the most important actions (in terms of achieving goals) and finds ways to enjoy the process Abundance mentality based on law of sowing and reaping ("Givers get") Long-range time perspective used in planning, often thinking 5+ years ahead Sees problems as opportunities Persistent confidence and faith ("Success is inevitable") Balanced approach to improving multiple weak areas that detract from strengths Understands that success comes from first being (sucessful in one's thoughts), then doing (actions consistent with those thoughts), then having (results consistent with those actions) "Once I believe I'm successful, the external results will naturally follow" Strong commitment ("I will find a way or make one") Confronts brutal facts head-on ("Marketing is crucial to my business, so I must become a master marketer") Avoids unnecessary risks and bets on opportunities with the strongest chance of success while seeking to minimize the potential downside ("Releasing a new product isn't a gamble; I'll just keep refining it over time until it ultimately becomes a hit") Success stories from others are mined for new ideas and insights Networks with focused and successful professionals, learning by osmosis Associates most frequently with other focused and successful professionals, less frequent contact with amateurs (continuous flow of knowledge and ideas) Positive attitude lets new ideas incubate in imagination before putting them to the test in the real world Positive associations to building business (financial abundance, good life for family, early retirement, freedom, making people happy, fulfilling one's dreams, giving to charity, creating jobs) When results are weak, the amateur seeks security, comfort, and consolation. Amateurs want to know they aren't alone, so they find safety in numbers by holding group griping sessions in forums that attract other amateurs. Their inner insecurity makes it very hard for them to accept failure, so they're looking to put the blame elsewhere... on the failure of the shareware system, on the economy, etc. Amateurs look for validation of their position, seeking out "experts" who agree that success in their field is hopeless and that only the really lucky can succeed. When hearing of dismal sales from others, they feel more secure. Success stories are unnerving to the amateur, often making them feel anxious, envious, or resentful.
      The professional, on the other hand, is emotionally secure. The professional seeks understanding and knowledge. The professional accepts personal responsibility for his/her results and is always looking to improve. When the professional suffers a setback, s/he wants to understand the causes, assuming that the reason for failure was a lack of understanding or skill that led to mistakes. The professional will suffer failures at least as big as the amateur, if not bigger, but the professional will learn from each experience and move forward with an even stronger plan.
      You can't tell an early professional from an amateur purely by looking at a one-time snapshot of their results. The key differences are internal. Professionals and amateurs who start from scratch may begin on the same footing. After the first year their initial results may appear similar. But fast forward ten years.... Most likely the amateur will have given up and left the business or is still barely eeking out a living. Meanwhile the professional has become an established leader with a strong, sustainable income.
      So what is the essential difference between the shareware amateur and the shareware professional? It can be summarized in just one word: fear. The amateur feels vulnerable, believing that certain things might happen which s/he will be unable to handle. The amateur doesn't want to deal with products that aren't selling well, avoids facing his/her deepest inadequacies, and seeks to manage fear by clinging to the familiar and the comfortable. Instead of pursuing the greatest opportunities, the amateur pursues the safest and most comfortable paths. For instance, an amateur who feels more comfortable programming than marketing will heavily favor programming projects, whether or not that's what the business needs most. The amateur ties much of his/her sense of self-worth to external factors, and when those factors are threatened, the amateur feels a strong urge to return to the safety of the comfort zone.
      The professional, on the other hand, has internalized thoughts of security and abundance. The professional believes that no matter what happens, s/he'll be able to handle it. The professional doesn't cling to a comfort zone. When faced with change, s/he embraces it, seeks out the hidden opportunities, and charges boldly ahead. This isn't to say that professionals never feel fear; they do. The difference is that professionals turn and face their fears instead of shrinking from them.
      Amateurs will normally not be consciously aware of their fears. Such fears will be hidden behind rationalizations such as, "I simply don't like marketing," "I'm genetically disadvantaged when it comes to planning," or "I feel like a scam artist when I write sales copy." Thinking about such tasks and projects will typically make the amateur feel a sense of discomfort, anxiety, or even dread, but they often won't consciously know why. When confronted about these shortcomings, the amateur will often become emotional, sarcastic, and defensive. But whereas the amateur addresses this problem by getting defensive and shrinking back into the comfort zone, the professional lets go of his/her ego and strives to become consciously aware of his/her fears, driving them into the open where they readily dissolve. A professional says, "I probably feel uncomfortable marketing right now because of my lack of experience, but I know other people who happen to love marketing. I'll talk to them to see what they like about it, get some book recommendations, and within a few years, I'll be outstanding at marketing as well." Alternatively, a professional might hire or partner with someone else who has the skills s/he lacks, but the decision will be made out of awareness of this deficiency, not from fear and denial.
      These models of the amateur and the professional are abstractions of course. Between them lies a continuum where real people can be found. Hopefully you'll find the contrasts between these two poles helpful in continuing your own professional development.
      Steve Pavlina is the CEO and founder of Dexterity Software and writes and speaks on software and computer gaming industry topics regularly. This article is Copyright © 2002 by Steve Pavlina.
    • By jb-dev
      This is a short .gif showing off visuals effects for the parrying mechanic
    • By Dyonisian
      Note: This article was originally published on LinkedIn.  If you enjoy my article, please click through and consider connecting with me.
      Can programmers art? How far can creativity and programming take you?
      I have summarized what I learned in several months into 7 key techniques to improve the visual quality of your game.
      "Programmer art" is something of a running joke. For those unfamiliar with the term, it refers to the "placeholder" or "throw-together" art that programmers tend to use while developing games.
      Some of us don't have the necessary artistic skills, however, sometimes we just can't be bothered to put in the effort. We're concerned about the technical side of things working - art can come later.
      Here's what this usually means -

      I worked on a game jam with some new people a few months ago. I just wanted to make sure that my gameplay and AI code was doing what it was supposed to do. This would have to interface with code from other teammates as well, so it was important to test and check for bugs. This was the result.
      That's not what I'm going to talk about today though.
      I'm going to take a different angle on "programmer art" - not the joke art that programmers often use, but the fact that there's a LOT that a programmer can do to improve the visual appeal of a game. I believe some of this falls under "technical art" as well.
      My current job kind of forced me to think in this capacity.
      I was tasked with visualizing some scientific data. Though this data was the result of years of hard work on the part of scientists, the result was unimpressive to the untrained eye - a heap of excel files with some words and numbers.
      There are very few people in the world who can get excited by seeing a few excel files.
      My job? To make this data exciting to everyone else.
      My task was to visualize connectome data for a famous worm known as C. Elegans, made available by the wonderful people working on the OpenWorm project.
      Part of the data parsing to read and display the data as a worm's body with neurons on it was done by my teammate. My main task was to improve the visuals and the overall graphical quality.

      The first thing that comes to mind is using HD textures, PBR materials and high-poly models. Add in a 3D terrain using a height map, some post-processing and HDR lighting, and BOOM! Gorgeous 3D scene. I'm sure you've all seen loads of those by now.
      Except, almost none of that would really help me.
      The idea was very abstract - neurons and connections visible in a zoomed-in, x-ray-like view of a worm. I don't think rolling hills would have helped me much.
      I had no 3D modelling skills or access to an artist - even if I did, I'm not sure what kind of 3D models would have helped.
      As a result, what I've made isn't a gorgeous 3D environment with foliage and god-rays and lens flares. So it's not applicable in every case or the perfect example of how a programmer can make a gorgeous game.
      But, it does provide a distinct viewpoint and result. The special sets of constraints in the problem I had to solve led to this.
      So here's what I actually did:
      The 7 things I did to improve the visuals of my Unity game
      1. Conceptualizing the look
      This could be considered a pre-production step for art or any visual project. Ideally, what should it look like? What's the goal? What are your references?
      In this case, the viewer had a hologram-like feel to it (also there were plans to port it to a HoloLens eventually). I liked the idea of a futuristic hologram. And the metaphor of "AI bringing us towards a better future".
      So what were my references? Sci-fi of course!
      My first pick was one of my favourite franchises - Star Wars. I love how the holo-comms look in the movies.

      Holograms became a key component of my design.
      This is a HUD design from Prometheus that I found on Google -

      In this case, the colours appealed to me more than the design itself. I ended up basing the UI design on this concept.
      Key takeaway - Your imagination is the very first tool that helps you create impressive art. Use references! It's not cheating - it's inspiration. Your references will guide you as you create the look that you want.
      2. Shaders can help you achieve that look 
      I had some shader programming experience from University - D3D11 and HLSL. But that work had been about building a basic graphics engine with features like lighting, shadows, and some light post-processing. I had done some light Shader programming in Unity before as well.
      What I really needed now was impressive visual effects, not basic lighting and shadows.
      I was really lucky that this was about the time Unity made Shader Graph available, which made everything much easier. I can write Shader code, but being able to see in real time what each node (Which can be considered a line of code) does makes it so much easier to produce the effects you want.
      I familiarized myself with all the samples Unity had included with this new tool. That wouldn't have been enough though. Thankfully due to my previous experience with Shaders, I was able to make some adjustments and improvements to make them suit my needs.
      Some tweaking with speed, scaling, colours, and textures led to a nice hologram effect for the UI panels.

      I wanted the viewer to feel good to interact with as well, and some work implementing a glow effect (alongside the dissolve effects) led to this -
      Key takeaway - Shaders are an extremely powerful tool in a Game Programmer's repertoire. Tools like Unity's Shader Graph, the old Shader Forge asset, and Unreal's material editor make Shaders more accessible and easier to tune to get the exact look you want.
      PS - Step 5 below is also really important for getting a nice glow effect.
      3. Visual Effects and Animations using Shaders
      I was able to extend the dissolve and hologram shaders to fake some animation-like visual effects.
      And a combination of some timed Sine curves let me create an animation using the dissolve effect -
      The work here was to move the animation smoothly across individual neuron objects. The animation makes it look like they're a single connected object, but they're actually individual Sphere meshes with the Shader applied to them. This is made possible by applying the dissolve texture in World Space instead of Object Space.
      A single shader graph for the neurons had functionality for colour blending, glow, and dissolve animation.
      All of this made the graphs really large and difficult to work with though. Unity was constantly updating the Shader Graph tools, and the new updates include sub-graphs which make it much easier to manage.
      Key takeaway - There is more to shaders than meets the eye. As you gain familiarity with them, there are very few limits to the effects you can create. You can create animations and visual effects using Shaders too.
      4. Particle systems - more than just trails and sparks
      I have no idea why I put off working with the particle systems for so long!
      The "neurons" in the viewer were just spheres, which was pretty boring.
      Once I started to understand the basics of the particle system, I could see how powerful it was. I worked on some samples from great YouTube tutorials - I'm sharing a great one by Gabriel Aguiar in the comments below.
      After that, I opened up Photoshop and experimented with different brushes to create Particle textures.
      Once again, I referred to my sources of what neurons should look like. I wanted a similar look of "hair-like" connections coming out of the neurons, and the core being bright and dense.
      This is what it looked like finished, and the particle system even let me create a nice pulsating effect.
      Part of my work was also parsing a ton of "playback data" of neurons firing. I wanted this to look like bright beams of light, travelling from neuron to neuron. This involved some pathfinding and multi-threading work as well.
      Lastly, I decided to add a sort of feedback effect of neurons firing. This way, you can see where a signal is originating and where it's ending.
      Key takeaway - Particle systems can be used in many ways, not just for sparks and trails. Here, I used them to represent a rather abstract object, a neuron. They can be applied wherever a visual effect or a form of visual "feedback" seems relevant.
      5. Post-processing to tie the graphics and art together
      Post-processing makes a HUGE difference in the look of a game scene. It's not just about colours and tone, there's much more to it than that. You can easily adjust colours, brightness, contrast, and add effects such as bloom, motion blur, vignette, and screen-space reflections.
      First of all, Linear colour space with HDR enabled makes a huge difference - make sure you try this out.
      Next, Unity's new post-processing stack makes a lot of options available without impacting performance much.
      The glow around the edges of the sphere only appears with an HDR colour selected for the shader, HDR enabled, and Linear colour space. Post-processing helps bump this up too - bloom is one of the most important settings for this.
      Colour grading can be used to provide a warm or cool look to your entire scene. It's like applying a filter on top of the scene, as you would to an image in Photoshop. You can completely override the colours, desaturate to black and white, bump up the contrast, or apply a single colour to the whole scene.

      There is a great tutorial from Unity for getting that HD look in your scenes - if you want a visible glow you normally associate with beautiful games, you need to check this out.
      Key takeaway - Post processing ties everything together, and helps certain effects like glows stand out.
      6. Timing and animation curves for better "feel" 
      This is a core concept of animation. I have some training in graphic design and animation, which is where I picked this up. I'm not sure about the proper term for it - timing, animation curves, tween, etc.
      Basically, if you're animating something, it's rarely best to do it with linear timing. Instead, you want curves like this -

      Or more crazy ones for more "bouncy" or cartoon-ish effects.
      I applied this to the glow effects on the neurons, as I showed earlier.
      And you can use this sparingly when working with particle systems as well - for speed, size, and similar effects. I used this for the effect of neurons firing, which is like a green "explosion" outwards. The particles move outwards fast and then slow down.
      Unity has Animation Curve components you can attach to objects. You can set the curve using a GUI and then query it in your C# scripts. Definitely worth learning about.
      Key takeaway - Curves or tweens are an animation concept that is easy to pick up and apply. It can be a key differentiator for whether your animations and overall game look polished or not.
      7. Colour Palettes and Colour Theory - Often overlooked
      Colour is something that I tend to experiment with and work with based on my instincts. I like being creative, however, I really underestimated the benefits of applying colour theory and using palettes.
      Here's the before -
      Here are some of the afters -
      I implemented multiple themes because they all looked so good.
      I used a tool from Adobe for palettes, called Adobe Colour - link in the comments.
      I basically messed around with different types of "Colour harmony" - Monochrome, triad, complementary, and more. I also borrowed some colours from my references and built around that.
      Key takeaway - Don't underestimate the importance of colour and colour theory. Keep your initial concept and references in mind when choosing colours. This adds to that final, polished look you want.
      Bonus - consider procedural art
      Procedural Generation is just an amazing technique. I didn't apply it on this project, but I learned the basics of it such as generating Value and Perlin noise, generating and using Height maps for terrains, and generating mazes.

      Procedural art is definitely something I want to explore more.
      A couple of interesting things (Links in the "extra resources" section below) -
      Google deepdream has been used to generate art. There's an open-source AI project that can colour lineart. Kate Compton has a lot of interesting projects and resources about PCG and generative art. I hope this leads to tools that can be directly applied to Game Development. To support the creation of art for games. I hope I get the opportunity to create something like that myself too.
      These 7 techniques were at the core of what I did to improve the visual quality of my project.
      This was mostly the result of the unique set of constraints that I had. But I'm pretty sure some famous person said: "true creativity is born of constraints". Or something along those lines. It basically means that constraints and problems help channel your creativity.
      I'm sure there is more that I could have done, but I was happy with the stark difference between the "before" and "after" states of my project.
      I've also realized that this project has made me more of an artist. If you work on visual quality even as a programmer, you practice and sharpen your artistic abilities, and end up becoming something of an artist yourself. 
      Thanks for reading! Please like, share, and comment if you enjoyed this article.
      Did I miss something obvious? Let me know in the comments!
      Extra Resources
      OpenWorm project
      Great tutorial by Gabriel Aguiar
      Unity breaks down how to improve the look of a game using Post processing
      Another resource on post-processing by Dilmer Valecillos
      Brackey's tutorial on post-processing
      Adobe Colour wheel, great for colour theory and palettes
      An open-source AI project that can colour lineart
      A demo of generative art by Kate Compton
      Note: This article was originally published on LinkedIn. If you like it, please click through, get in contact, and consider connecting.
    • By invent71
      Hi GameDevs,
      We have been busy working on a new Retro Shoot em up called "IRIDIUM", A frantic new 2D shoot 'em up with huge levels and truly massive enemy ships. Mixing game styles from Uridium, Xenon 2 and Nemesis.
      We do have a demo to play for PC  https://nebula-design.itch.io/iridium
      If you love shootemups as much as us, please let us know your thoughts. Some example images below  We'd love to get this on NintendoSwitch if we can reach our goal.


Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!