Jump to content
  • entries
    14
  • comments
    10
  • views
    1828

Perceiving is believing – the game design edition

FriendlyHobbit

890 views

http://www.tinker-entertainment.com/sitavriend/psychology-and-games/perceiving-is-believing-the-game-design-edition/

Perceiving is believing, or is it really? We have five basic senses which we use to perceive the world with: smell, taste, touch, seeing and hearing. But there is a difference between sensing and perceiving. Our senses provide us with raw data from the environment around us. This raw data can be visuals from our eyes, airborne chemicals our noses pick up, tastes on our tongue, soundwaves via our ears or tactile (touch) information from our skin. Perception, on the other hand, is the way our brain organizes and interprets this raw data. We use our perception to make sense of what we sensed. Perception can be influenced by the context in which the stimuli (what we have sensed) presented, our expectations and our current mood. What you see isn’t always what you get and that is true for all senses. Perceiving isn’t always believing.

per.thumb.jpg.4208876137320127a9f866f3e2bcaf82.jpg

Our brain works in weird ways which affects our perception too. Sometimes you don’t perceive something you’ve sensed or you perceived something that wasn’t there in the first place (Gosselin & Schyns, 2003). Our brain can also play tricks on our perception. It can interpret the stimuli in weird ways. Optical illusions are a fun example of how our perception works, below are a couple examples. How can two colors be the same while you perceive them as different? Illusion 1 is an example of how context and expectations shape your perception. Square A and B are the same shade of grey but your brain interprets them as completely different. You see a checkerboard and expect a certain pattern, A is supposed to be black and B is supposed to be white. Combine this with the contexts of the shadow: your brain expects the squares in the shadow to be darker. Sometimes your brain makes you see things that aren’t there. You probably sees a black triangle laying on top of three circles and a white triangle in illusion 2. That is your brain filling up the gabs. There is no black triangle, the triangle is a lie! There are just three white pizza’s all with a missing slice and three lines with the same angles.  Illusion 3 is a picture of two faces or a vase. It all depends on the angle you are looking from, but you can never see both at the same time.

checkershadow_illusion4med.thumb.jpg.161a46e8dfeeec65c9f965273c2846a8.jpg

How we perceive these illusions depends on our perceptual sets. A perceptual set is the tendency to interpret a stimulus in a certain way only. It is what makes you see the faces before the vase in illusion 3 (or the vase before the faces). Our perceptual sets are heavily influenced by our emotions, expectations, beliefs, context and past experiences.

Perception is sometimes weird and that our brain words in strange ways. You might wonder why we have such a thing as perception in the first place. Why can we not just perceive the world as we sensed it? And what is the function of perception? Perception is quite useful for filtering out the necessary information only. We would go crazy by all the stimuli around us if we would perceive the world as we sense it. We use our perception for attention, to figure out what information is coming in. The incoming information can be filtered through our selective attention, that way our brain ignores anything else but the stimuli of interest. Selective attention is what we use when we become immersed in a game. We only focus our attention to the stimuli from the game and ignore the outside world. Perception is also used for localizing where the information of interest is coming from. When you walk through your town and smell something amazing you might want to wonder where it’s coming from. Or your perception already did the work and you know it was from the bakery across the street. Perception can also help you recognize a stimuli. You smell the bakery and immediately recognize that they just finished baking their bread.

We can also filter out unnecessary information with our senses directly. Our sensory cells respond less and less when a stimulus stays the same for a while. After a while we no longer register the stimulus. This is called sensory adaptation. Think about the pressure of your clothes, you notice it when you put them on and when you move. Most of the day you just won’t notice them due to sensory adaptation. The same happens to the noise your fridge makes or the ticking of your clock. The smell cells in your nose will even stop responding for a while. They need to be given a chance to recover before you can smell again (Dalton, 2000).

Not all senses are equally important to games. Smell isn’t used in games since the smell-o-console hasn’t been invented yet. You’re also not very likely to lick your screen to see what the game tastes like. The only senses we can use in games are vision, hearing and tactile (touch, vibration and pressure). As designers we only have to account for hearing and vision. We have very little control over the feel of the keyboard or controller. Do think about adding vibration occasionally when your game is played with a controller.

Thomas was alone is a favorite of mine because of the excellent use of emotional narration but the game also works well perception-wise. When you play the game for the first time you immediately understand who Thomas is. Considering Thomas is a red rectangle, that is kind of amazing. Thomas was alone shapes the player’s perception with its title, expectations and context. From the title you immediately expect to play or interact with a character named Thomas. You expect Thomas to be one of the characters or perhaps the playable character. The narration adds to this as well once the player starts the game. There is no need to show a big arrow with the word ‘playable character’ written on it, your perception worked it out already. Without its art, the game would be nowhere. The choice for abstract art was a conscious one. It’s not just to play with our perception, it helps our perception. The color scheme of the game is mostly monochrome except for the characters, they really pop-out. From the first interaction it is clear that these colorful rectangles are the objects of interest. Your gaming knowledge matters to your perception as well. It helps you understand where the characters need to go, where you can and can’t go and how to interact with the game in general.

thomas.png.0c8953e5c0ea1078fdc3692e7270e762.png

Tips and suggestions
These tips and suggestions can be applied to all types of games. For some genres it might be easier than others but it is good practice to make use of player expectations. Do a little research into other games your target audience plays or research similar games. Find out what these games have in common with each other or what popular gaming conventions are in the genre. If you plan to make a mobile game where players have to slice things in half, look at other games where players slice things in half (hint: Fruit Ninja). How do players interact with the game? Is it a common way to interact with these types of games? Are all good questions to ask yourself. Don’t just blindly copy mechanics and features from a similar game, find out what is common knowledge among your players and what they expect.

Help the player’s selective attention by making use of the pop-out effect for objects of interest. Think about the little shake animation in candy crush. The shake grabs the player’s attention immediately, it’s even visible from the corners of your eyes. Or make use of colors that are brighter than others for objects of interest. This might be the domain of the artists but it is very important for game designers to take this into account as well. It’s the game designer’s task to guide the art team into making decisions that benefit and complement the game design. Audio can also be used in interesting ways to help the player’s perception in the game. You can use it as a mechanic to lure the players or as a way to foreshadow an upcoming monster. Perception is an interesting thing our brain does. We can aid it through our game design or play with it. The possibilities are endless.

References and stuff

  • Crash course psychology: https://www.youtube.com/watch?v=unWnZvXJH2o&t=9s
  • Gosselin, F. & Schyns, P. G. (2003). Superstition perception reveal properties of internal representations. Psychological Science, 14(5), 505-509.
  • Dalton, P. (2000). Psychophysical and behavioral characteristics of olfactory adaptation. Chemical senses, 25, 487-492


0 Comments


Recommended Comments

There are no comments to display.

Create an account or sign in to comment

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

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
  • Advertisement
  • Advertisement
  • Blog Entries

  • Similar Content

    • By Gas Lantern Games
      Hello!

      I have spent the last year and a half developing a game in my spare time in Unity! I am releasing it soon on Steam. Ant Empire is a strategic remake of some older games. It is influenced by games such as Ant Empire and Civilization.

      I am currently doing a kickstarter to help fund an AI before launch.

      I have attached some images (tried some gifs but they were too large) to show the current stage of Ant Empire, which is nearly completed.







    • By MarkNefedov
      So, initially I was planning to create a base class, and some inherited classes like weapon/armour/etc, and each class will have an enum that specifies its type, and everything was going ok until I hit "usable items".
      I ended up with creating UsableItem class, and tons of inherited classes, like Drink/Apple/SuperApple/MagickPotato/Potion/Landmine/(whatever that player can use) each with unique behaviour. I planned to store items in the SQLite database, but I discovered that there are not many ways of creating variables(pointers) with type determined at runtime (that preferably get their stats/model/icon/etc from DB). So, I think that I need to use some variation of the Factory pattern, but I have no idea how I should implement it for this particular case (giant switch/case 😂 ).
      It would be really nice if you guys can give me some advice on how I should manage this kind of problem or maybe how I should redesign the inventory.
      Inventory storage is an array of pointers. I'm working with CryEngine V, so RTTI can't be used.
      Example code:
      namespace Inventory { enum ItemType { Static, Building, Usable, Weapon, Armour }; class InventoryItem { public: virtual ~InventoryItem() = default; virtual ItemType GetType() = 0; virtual string GetName() = 0; virtual string GetIcon() = 0; virtual void Destroy() { //TODO: Notify inventory storage delete this; } }; class UsableItem : public InventoryItem { public: struct Usage { int Index; string Use_Name; }; virtual CryMT::vector<Usage> GetUsages() = 0; virtual void UseItem(int usage) = 0; }; class TestItem : public UsableItem { int Counter =0; ItemType GetType() override { return ItemType::Usable; } string GetName() override { return "TestItem"; } string GetIcon() override { return "NULL"; } CryMT::vector<Usage> GetUsages() override { CryMT::vector<Usage> Usages; Usages.push_back(Usage{1, "Dec"}); Usages.push_back(Usage{2,"Inc"}); Usages.push_back(Usage{3,"Show"}); return Usages; } void UseItem(int usage) override { CryMT::vector<Usage> uses = GetUsages(); switch (usage) { case 0: for (int i =0; i<uses.size(); i++) { CryLog(uses[i].Use_Name); } break; case 1: Counter--; CryLog("Dec"); CryLog("%d", Counter); break; case 2: Counter++; CryLog("Inc"); CryLog("%d", Counter); break; case 3: CryLog("%d", Counter); break; default: CryLog("WRONG INDEX"); break; } } }; }  
    • By gdarchive
      Intro
      Due to my belief in learning through self-discovery and my ongoing creative evolution, I've long put off doing any tutorials. However, after making pixel art for over 3 years I've established many solid techniques worth laying out in a concrete fashion. While I'm excited by the prospect of helping others with my experience, I still urge artists to explore things their own way. The wonderful thing about art is the unlimited number of solutions to a problem. I offer you solutions that have worked for me and I hope they work for you, but I will be even more thrilled if you discover a better solution along the way.

       
      When it comes to pixel art, it all starts with a good color palette. Creating a custom color palette can be a very satisfying and powerful way to establish your own unique look. I'll guide you through my method as I create a new palette. But first, let's go over some basic principals.
       
      It's all about HSB
      I find it easiest to understand and control color through HSB.
      Hue - The actual color (0 - 360º)
      Saturation - The intensity or purity of a color (0 - 100%)
      Brightness - The amount of black or white mixed with a color (0 - 100%)
      By understanding and adjusting these 3 fundamental properties you can create custom colors with precise control. I recommend this article by Steven Bradley for more detailed definitions of HSB.
       
      Color Ramps
      A color ramp is a specific range of colors that work well together, arranged according to brightness. Here is an example of what I consider a good color ramp. 

       
      Brightness steadily increases from left to right in this example. As the colors reach high brightness levels it's important to decrease saturation, or you'll end up with intense eye burning colors. Also, colors with very low brightness can become overly rich and weighty with high saturation. Saturation peaks in the middle swatch in this example.  
      A good color ramp should also apply hue-shifting, which is a transition in hue across the color ramp. In the previous example the hue is shifting by positive degrees as the brightness increases. 
      Many beginners overlook hue-shifting and end up with 'straight ramps' that only transition brightness and saturation. There is no law that says you can't do this but the resulting colors will lack interest and be difficult to harmonize with ramps of a different hue. This only makes sense to me if you want a monochromatic look and stick to one straight ramp.
       
      The Palette
      A color ramp is essentially a palette, but most palettes contain multiple ramps. I like to create large palettes with lots of ramps, which I can then pull smaller palettes from per assignment. 
      Mondo  - 128 colors

      Become a Pixel Insider member and download Mondo
       
      I took the opportunity to make a brand new palette for this tutorial. My intention was to create a general purpose palette that strikes a balance between vibrant colors and desaturated natural colors. So, how to make such a large palette?
      First I decide how many swatches I want per ramp and how many degrees of hue shift. For this palette I want 9 swatches per ramp with 20 degrees of positive hue shift between each swatch. I like a lot of hue shift because it creates harmony between ramps and just looks neat, but 20 is about as high as I go.

      The color picker panel in Photoshop. We only need to be concerned with adjusting HSB.
       
      I use Photoshop, but a similar color picker panel should be accessible in just about any graphics software. To start I pick a color that will fit right in the the middle of a ramp. The hue is somewhat arbitrary, but the saturation and brightness is critical. I want the middle color to be be the most vibrant so I set the saturation and hue to the max combined number I'm willing to go.

       
      After I've chosen my first color I can set the hue for the remaining swatches based on the positive 20 degree shift I wanted. I could reverse the direction of hue shift if I want but positive hue shift usually results in more natural colors, warming as they become brighter. 
      I still need to sort out the increments for S&B. Unlike hue, shifting the S&B in uniform increments doesn't necessarily produce satisfactory results. However, there are a few tendencies I follow. Brightness consistently increases from left to right and usually never starts at 0, unless I want black. Saturation peaks around the middle and never fully goes to 100, or 0. The goal in mind is to create even contrast between each color.

       
      After some tuning and eyeballing these are my final values and resulting color ramp. The hue shift looks pretty strong but it will make sense when I add more ramps.

       
      This version shows the difference in the increments. Pay attention to what the S&B are doing. You can see there is some consistency in the pattern. The saturation takes larger steps on the ends and smaller steps in the middle where it's the highest percentage. The brightness takes smaller steps as it gets closer to the end at full 100%.

       
      Here's another visualization that clearly shows the flow of S&B as line graphs. You don't have to follow this general flow of S&B. It just depends what look you're going for. I've made ramps where the saturation continues to climb as the brightness decreases, creating an X pattern. This results in vivid dark colors. The biggest mistake is combining high saturation and brightness, unless you want to burn some eyeballs. I recommend a lot of experimentation with the HSB values of your ramp. I've tried to come up with mathematically precise formulas but it always seems to come down to trusting the eyeballs to some extent.  
      Now let's finish the palette.

       
      Up to this point all I have been doing is picking colors and drawing them as single pixel dots on a tiny canvas. I haven't actually added any swatches into the swatch panel. With the first ramp established all I have to do to create more ramps for my palette is shift the entire set of hues.
       

       
      I want 8 ramps total so I will shift the hues of each ramp by 45 degrees to complete the 360 degree cycle around the color wheel. I could do this in the color picker by adjusting the H value one color at a time, but In Photoshop I can save a lot of time by duplicating the ramp and changing the hue of the entire selection (Image-Adjustments-hue/saturation, or ⌘+U).

       
      After adjusting the hue of all my color ramps my palette appears like this. It looks pretty nice but It's lacking more neutral desaturated colors.

       
      To add desaturated colors I duplicate the whole middle section of the palette, omitting only the darkest and lightest colors on the ends, flip it over and desaturate them with the Hue/Saturation panel. I omit the light and dark columns because they appear nearly the same as the originals. I flip the colors because it makes for easy navigation, and it looks cool. The desaturated colors can provide a more natural look, and work well as grays in combination with the vibrant colors.

       
      The final task is actually adding the colors into the swatch panel. With the color picker panel open I sample each color with the eyedropper and click the 'Add to Swatches' button. I add them from left to right, top to bottom so they will appear in the swatch panel in the correct order. This is quite tedious but the only way I know of to add the colors in the particular order I want. 

       
      Once I've added all the colors into the swatch panel I click on the panel options and make sure to save my palette. I can then easily load the palette as a .aco file into the swatch panel anytime. Also, by selecting 'Save Swatches for Exchange' you can create a .ase file, which can be loaded into several other Adobe programs. Save the image of your palette as a .png file and you can load it into Aseprite.   
      Well, that completes my 128 color palette - Mondo. Now let's look at how I use the palette with some examples. 
       
      Picking Colors

       
      This example keeps it pretty simple, mostly relying on horizontal ramps of adjacent colors. You can also see how the warm desaturated colors work nicely with the vivid hues. I've added white into palette for extra contrast. 
       

       
      This example shows how ramps can move horizontally and diagonally. Because of the hue shift every color is surrounded by colors that can work together.
       

       
      Harmony is everywhere, just pick and play!
       

       
      This example uses complimentary color in combination with neutrals. The result captures an ominous yet hopeful feeling that perfectly fits the mood I wanted. 
      Picking colors for your art always requires some good sense, but a versatile palette with criss-crossing ramps like this makes it much easier. A little color goes a long way with pixel art, as you can see I never use a lot of colors for any one image.
      Creating a palette with this method also works great for game art, and will ensure everything in your game has consistent colors. I used this method to create a 160 color palette for Thyrian Defenders. We've been able to depict an incredible range of environments and characters while maintaining a consistent look overall. Other aesthetic choices come into play, but color is the fundamental ingredient that ties everything together.  
       
      Final Word
      Overall I'm quite happy with how this palette turned out. I think you'll be seeing more of my work in the Mondo palette from now on!
      I hope this helps you come up with some palettes of your own. I know It can take a bit of time to get a feel for HSB, but even if you're a beginner I think making palettes like this is a great way to understand color. Go crazy with HSB and don't be afraid to experiment with formulas that look different than my example. Also, you don't have to make such a large palette. Start with trying to make a small ramp.
       
      About The Author
      Raymond Schlitter (Slynyrd) is a former graphic designer who turned his creative passion to pixel art and game design in early 2015. Now he shares his knowledge with tutorials while he continues to make fantastic art and work on games. Support him on Patreon and get the inside scoop on his latest work.
       
      Note: This post was originally published on Raymond's blog, and is reproduced here with kind permission from the author.  If you enjoyed this article please consider supporting Raymond on Patreon, where he provides backers with exclusive downloads such the Mondo palette as .aco, .ase, and .png files. Get Mondo!  You can also make a one time donation to the author if you prefer not to subscribe on Patreon.
      [Wayback Machine Archive]
    • By Effekseer
      Effekseer Project develops "Effekseer," which is visual software for creating open source games; on September 13,
      I released "Effekseer 1.4," which is the latest major version release. 
      Effekseer is a tool to create various visual effects used in games and others.
      With Effekseer, you can easily create various visual effects such as explosion, light emission, and particle simply by specifying different parameters.
      Effekseer's effect creation tool works on Windows and macOS.
      The created visual effects can be viewed on Windows, macOS, Linux, iOS, Android and other environments with DirectX, OpenGL and so on.
      In addition, there are plugins / libraries for game engines such as Unity and UnrealEngine4 to view visual effects.
      Effekseer 1.4 is an updated version of Effekseer 1.3 released in November 2017.
      This update contains the following changes:
      The renewal of UI. Support the tool for macOS. Addition of a function to read FBX with animation. Addition of parameters to protect collied effects and objects. Addition of parameters for easier control of the effects. In addtion I improve plugins/libraries for Unity, UnrealEngine4 and Cocos2d-x.
      Besides that, more than 40 new sample effects have been added and many bugs have been fixed.
      Effekseer 1.4 is available on the project website.
      The license for the software is the MIT license.
      Effekseer 
      http://effekseer.github.io/

      Github
      https://github.com/effekseer/Effekseer
      
      Sample Effects.
      Tool Demo
       

      View full story
    • By Effekseer
      Effekseer Project develops "Effekseer," which is visual software for creating open source games; on September 13,
      I released "Effekseer 1.4," which is the latest major version release. 
      Effekseer is a tool to create various visual effects used in games and others.
      With Effekseer, you can easily create various visual effects such as explosion, light emission, and particle simply by specifying different parameters.
      Effekseer's effect creation tool works on Windows and macOS.
      The created visual effects can be viewed on Windows, macOS, Linux, iOS, Android and other environments with DirectX, OpenGL and so on.
      In addition, there are plugins / libraries for game engines such as Unity and UnrealEngine4 to view visual effects.
      Effekseer 1.4 is an updated version of Effekseer 1.3 released in November 2017.
      This update contains the following changes:
      The renewal of UI. Support the tool for macOS. Addition of a function to read FBX with animation. Addition of parameters to protect collied effects and objects. Addition of parameters for easier control of the effects. In addtion I improve plugins/libraries for Unity, UnrealEngine4 and Cocos2d-x.
      Besides that, more than 40 new sample effects have been added and many bugs have been fixed.
      Effekseer 1.4 is available on the project website.
      The license for the software is the MIT license.
      Effekseer 
      http://effekseer.github.io/

      Github
      https://github.com/effekseer/Effekseer
      
      Sample Effects.
      Tool Demo
       
×

Important Information

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

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!