Game Art Workflow – 3D Modelling

A Beginner’s Guide to Working With Vector Graphics for eLearning Modules

Sometimes, when you are producing an elearning module, you just can’t find the right image for your content. Or you might find an image that’s almost right, but not quite for the message you’re trying to convey. Maybe it’s the perfect image, but it’s not available in your client’s colour scheme.

Many of these issues can be fixed with even a basic knowledge of Adobe Illustrator or Photoshop. In this article, we will be learning how to make simple edits of vector images with Illustrator.

First of all, what is the difference between vector and raster images? Raster graphics use an array of pixels to construct the graphics, typically used with photographic image graphics. Your computer display is made up from grids containing small rectangles called pixels. The smaller and closer the units are together, the better the quality of the output image, however it also means it will generate a bigger file to store the image output data. If the number of pixels remains the same, enlarging your image will stretch the size of each pixel and the image will become chunky and blocky (pixellated).

Vector format files store the lines, paths, points, shapes and colours that make up a graphic as a mathematical formula. A vector design program uses this formula to construct the output image on your screen, providing the best quality possible, given your screen resolution. Since the vector formula file can produce a graphic scalable to any size and detail, the quality of the graphic is limited only by the resolution of your monitor, and the file size of vector data rendering the graphic stays the same.

Most image libraries now have many of their graphics available in a vector format. Usually, the most common format you might find vector graphics in will be .eps (Encapsulated PostScript file). You can open and edit these files with graphics programs such as Inkscape (which is free), or Adobe Illustrator.

When you open this file with a graphics program, you will find that your image is composed of a number of objects. Each object has an outline, or path, which is composed of lines and points. These paths may be freestanding lines, or form closed shapes which may be filled with a colour.

First, find the selection tool. This is usually the first tool icon available at the top left corner of the tool menu – a black arrow. With this tool, you can select single objects or objects that are grouped. Once an object is selected, you can move the object around your page, edit the fill and outline colours by clicking on a colour swatch, and copy and paste your selected object or objects just as you would with text, with Ctrl-C and Ctrl-V. You can also apply transformations to scale, rotate, or flip the object. If you are feeling ambitious, you can also edit the shape of the object by changing the curves on the paths or at the anchor points. If you’ve made a mistake, you can undo any of the changes you just made with Ctrl-Z. And finally, you can get rid of the object if it’s not working for you by right clicking on it and selecting Cut or Delete.

Once you have edited your object to your liking, you can save the document in the program’s default format to continue editing later, or export it to a raster format (such as .jpg, or .png) to be used in your elearning.

Congratulations! You’ve learned how to edit a vector graphic! Keep an eye on this space for more tips and tricks with working in Illustrator. In the meantime, you can check out our other articles on graphics in elearning – Gamificaton – 5 Great Tools to Make Great Graphics for Learning Games, How to Avoid Filler Graphics in Your Elearning, or Good Infographic Design.

mLearning: Bite-sized appeal…in two bites!

Look at how information is communicated these days: quick, concise and to the point. Readers are constantly craving the fastest way to gain information, in the quickest time possible.

Ever see CP24’s TV channel? You can find out the latest news, weather, sports scores and business market information within seconds of your eyes glancing at the screen. How about social media? Twitter limits what you see within 140 characters. So there is no need to read excessive information that is just too lengthy with text.

This is a great benefit to the reader, or in our case within the training industry, the learner. Content is cut down to the specific relevant material and communicated in a clear, concise manner.

Why spray it when you can just say it?

This is why mLearning needs to be compact and engaging for your learners:

Bite #1
Consider the size of most smartphones and mobile devices. If readers are going to scroll through endless content, they will probably wonder why their thumbs are exerting so much energy and stop the second they feel a general waste to their valuable time. Therefore, edit, revise, rescript – do whatever you can to limit the information you show the learner.

Bite #2
Content cut down for the sake of being small in size doesn’t cut it. You wouldn’t take out ingredients when baking a smaller cake – you would just measure less. The same goes for keeping your learners engaged – don’t remove the important stuff, just use less of it in a more concise manner.

In order for information to be retained, content needs to be visually delicious and appealing to the reader. Learners want engaging material which is read and absorbed quickly, keeping them craving for more. Otherwise, what’s the point of taking a bite if you aren’t hungry?

Use of Colour in eLearning

Colour has the ability to influence our mood, perception and preferences. Different colours can appeal to individuals for various reasons and may hold particular meanings within diverse cultures. Knowing how to utilize them to attract the interest of a vast array of learners can be quite useful when designing eLearning. In general, particular colours can invoke a specific feeling or atmosphere. Here are some guidelines you can follow when choosing colours for designing modules.

Warm colours can be used to emphasize important points

Warm colours refer to red, orange and yellow, and the shades that are created when they are mixed. Red in particular does a great job of gaining a learner’s attention because of its ability to create a sense of urgency. As well, red can be effectively used in instances where learners are expected to retain numerous facts and statistics.

Orange can assist with making content appear more relatable and uncomplicated. It is a colour that symbolizes optimism and can offer an air of warmth. Orange may thus be best used with content that may be harsher for the learner to digest.

Yellow is effective for highlighting points that you would like a learner to remember. It can boost memory and encourage higher order thinking. Yellow can however be difficult to read and is best used minimally throughout a course.

Cool colours can be used to create a sense of calm

Cool colours refer to blues, greens and purples.

Because blue is calming, it is particularly useful when the learner is expected to delve through large amounts of content. Blue is the most well-liked colour among both sexes and thus is used heavily by many organizations in their branding. Use blue in instances where you wish to make complex content appear more learner friendly.

Green is easy to read and encourages a sense of tranquility for the learner. It can be used to illustrate positive outcomes and subject matter in learning. As well it is a popular colour to use to highlight an organization’s greening initiatives.

Purple is a colour often used to signify royalty and decadence. It is a colour that is easy on the eyes and helps to create a fun atmosphere for learning.

How we browse the web

Steps for creating 3D characters for Games, eLearning and Learning Simulations (Gamification)

As a passionate character artist I have refined, tweaked, and adapted my workflow over the years. The process of creating well rounded characters is quite elaborate, and to be frank each one of these steps could each have their own list of steps. So let’s think of this as an overview of my workflow to create 3D characters for games.

Character Concept

Depending on the needs of the project, the design process for me actually begins as text.  Creating a Character Design Document (CDD).  This document helps to create a multidimensional character.  The document includes various aspects including backstory, likes, dislikes, physical appearance, abilities, accessories, and more. An additional function of the CDD, is that it allows others to really get a sense of who this character is before any visual work has been done.

Conceptual Reference

Before making any original art I create what I refer to as an image board.  Essentially it is a collage/visual map of various character traits.  Often I write notes on top of the image board if I am pointing out something specific. Again similar to the CDD, the image board helps other people understand where things are headed, and provide feedback.

Conceptual Art

This is where you can let your talent loose, and begin creating illustrations, paintings, and refining your design until you feel it is whole.

An additional step some modellers require, but one I feel is optional is to create a character model sheet, which includes front, side and back views.  (Some artists prefer to use the model sheet as template for modelling, allowing them to trace proportions and silhouettes).

Modelling & UVW Unwrapping

Using the 3D package software of your choice, (I prefer 3dStudio Max) you can begin the process of extruding planes, moving and welding vertices, until you create the 3D representation of your character.

Hi Poly Workflow Note

If you are building a hi-poly model for the purpose of creating normal maps, then you need to model 2 versions of your character. One with all the high res details, and one that will be your in game model.

Before the texturing processes can begin you need to unwrap your model. To explain this simply you need to take each surface of your model and break them apart and flatten them out so they have the least distortion possible. Once you have a texture sheet you are pleased with (leaving ample resolution for the high detail areas), we can begin really making this character look alive.

Texturing & Material Creation

Hi Poly Workflow Note

If you are baking out a normal map using a hi-poly model, generate the normal maps first and at the same time bake an ambient occlusion map to help guide the remaining texture maps.

While several surface painting tools exist, I still prefer the flexibility of Photoshop.  I prefer to generate the diffuse first. Once I am happy with my result I duplicate the group and begin reworking, adjusting and adding to the maps for the various maps required.

Depending on your game engine of choice, the type of maps required by the texture artist will be different, as how materiality is defined differs from game engine to game engine.

 

Instructional Design Process for Virtual Simulations

Within the training industry much thought is given around how to design and develop learning that continues to motivate participants to identify with new material. The integration of new technologies in the creation of learning, aids in extending the boundaries of what traditional eLearning modules can achieve.

The trend towards gamification, and the inclusion of virtual environments for training adds an element of interactivity and realism that serves to pique the interest of learners to drive participation and engagement.

Virtual Simulations can be beneficial for creating an interactive real-world model in which learners can discover and explore various scenarios that they can expect to encounter in the workplace. The objective of these type of scenarios is to reinforce the material, and to have learners practice and apply what they learn to their roles.

So, how does the process of designing virtual simulations differ from designing an eLearning module or an in-class training activity?

For the most part the process follows the principles of ADDIE. The first step entails consulting with the client on their expectations of the game or simulation, to gauge how they envision the end product as being relevant and beneficial for the intended audience. At a high level, at the proposal or needs analysis stage, the look and feel of the simulation is discussed as well as its overall functionality.

Once these elements have been discussed, a High-Level Design document is created. Its role is to communicate the overall vision of the simulation. Within this document the subsequent items are generally included. A description of the simulation or game which can include a write-up of the story along with visuals to illustrate the proposed end look. The document should also include the learning objectives and offer a run through of how it should work from start to finish, along with a mapped diagram of different scenarios within the module.

For this type of activity, using a flow diagram is beneficial for demonstrating the various decision making options that learners can explore while navigating through this virtual world. Learners will be posed unique challenges to make choices which will direct / branch them to other scenarios within the simulation module.

After the High-Level Design document has been signed-off on, storyboards can then be created for each screen of the game. To maintain a consistent feel and to ensure that all who work on the game understand the creative direction, the properties of graphic elements such as the user interface and simulation environment should be outlined in detail.

The game goes into production once there has been approval on all storyboards. The key purpose of this step known as the Alpha phase is to ensure that the simulation functions as it was intended. Once the client approves that the overall functionality is what was envisioned, it can be polished and the Beta phase can proceed.

In this phase, emphasis should be placed on testing. It is not uncommon for a highly sought out product to enter the market only to fail because testing at this stage was insufficient. Thus, giving ample time to this step can really ensure a refined product. At the testing phase some crucial items to evaluate are graphics, sound, and the responsiveness of user controls, character animations, and game effects.

Be mindful of products not working the same on all platforms such as PC, Android or iOS. Once you have ensured that the polished product has been tested on all specified platforms and bugs have been fixed, it is then ready to be implemented into the training program.

To learn more about the work that we do around gaming and virtual simulations please visit our website at http://www.pathwaystrainingandelearning.ca/.

Mobile Learning – What Works and What Doesn’t!

3 Tips for Designing it Right and 3 Traps to Avoid

Mobile learning is the new buzz-word and although there seems to be a lot of talk about this new trend, few companies are actually doing it. As mobile learning is so new, there are a few things you need to consider in order to effectively instructional design for a mobile learning experience.  For those of you who are considering this new medium, here are some tips you need to consider when designing learning for mobile.

1. Design for touch and forget about the mouse – When you are designing for mobile devices, there can be no more hovering mouse overs for your learning activity. Design your learning activities with “tap” and “swipe” in mind and ensure your instructions for activities reflect this language also.
2. Think about finger size – Learning activities must consider finger size and activities must be designed accordingly (e.g. if you are doing a drag and drop activity, are the boxes big enough for a learner to actually touch and drag? If not, the activity won’t work).
3. Think about screen size – Less text is definitely better when you are creating learning for mobile. Due to the small screen, it is just not possible to have heavy text on the screen, like in some eLearning courses. Things that look great on a desktop eLearning course can look terrible when shrunk down on a mobile device.

Traps to Avoid

Here are some common traps you should avoid when designing for mobile learning.

1. Don’t use the same font for all devices! – Our experience has been that 4-5 point font works well on small phones, 5-6 on a large mobile device and 7-8 point font for a tablet works best.
2. Don’t publish for a universal experience. Publish eLearning courses to work with specific mobile operating systems. Publish specifically for the device the learner is on (e.g. iOS, Android, Windows, etc.) If you are not publishing the learning specifically for the device, it becomes very confusing to the learner as they are expecting to be able to use the same navigation as they normally would on their own mobile. A course that works the same on all platforms can often be very confusing for the learner as it may require different interactions and navigation then what the learner is use to doing on their own mobile device.
3. Use standard navigation that is intuitive when designing eLearning for mobile devices – You know how most eLearning has the language “click the next button to advance the screen or click the previous button to go back. Remember to change the language for advancing the course such as “Swipe your mobile device from right to left to advance the course”. Make the language match the medium.

Mobile learning is an innovative way of increasing learner’s access to training.  Keep these tips in mind and avoid the common traps to ensure a successful mobile learning launch!

If you want to know more about Mobile Learning, please visit us at http://www.pathwaystrainingandelearning.ca or contact us at info@pathwaysinc.ca.

 

WHY GAMIFICATION WORKS

We have already written a lot about the benefits of gamification on elearning, but in this article we will break down how gamification works and why.

As we already know, ‘gamification is the application of game elements and digital game design techniques to non-game problems such as business impact and social challenges’. * Using game mechanics such as levels, point systems, achievements and leaderboards make any interactive content more engaging. These things work if one has an understanding of psychology in relation to motivation, behaviour and personality types (with relation to play styles). Understanding these concepts in turn helps a designer leverage people’s desires for competition, achievement, status, altruism, and collaboration, among other things.

Motivation

Motivation is commonly divided into two subtypes: intrinsic (internal) and extrinsic (external).

Intrinsic motivation is when a person is motivated to do something because they get personal enjoyment from doing the task. Intrinsic motivation fosters enjoyment, engagement, and creativity when learning and performing tasks. For example, one might participate in a sport because they love to compete or complete a puzzle for feeling of achievement in solving it. This form of motivation is more difficult to use in gamification as people enjoy a wide variety of things for a wide variety of reasons. Trying to encompass as many of these reasons in your elearning as possible would be unfeasible.

Extrinsic motivation is when a person is motivated to do something for external rewards or to prevent punishment. Rewards can be tangible things like points and trophies, or intangible things such as status from your leaderboard ranking. This form of motivation is easier to add to an elearning module, which will ideally promote intrinsic motivation to complete it.

For more on gamification, check out our other articles on the subject: Game On! The Gamification of Learning and Why Few Companies Are Doing It Right, Games for Education – Tangential Learning, Replay Value in Games, Five Ways to Make Games Educational, Advantages of HTML5 for eLearning, and Mobile Learning (m-Learning) and Gamification.

* Kevin Werbach. “(Re)Defining Gamification” Springer Lecture Notes in Computer Science 8462 (2014).

LEARNING GAMIFICATION – WHAT IS A SPRITE ANIMATION?

Those not versed in the lingo of the gaming industry might think that a sprite animation refers to a video of a winged woodland fairy frolicking in a forest. However, that’s not entirely correct. A sprite also refers to a computer graphic that may be moved on-screen and otherwise manipulated as a single entity. Basically, a sprite is a 2D image, large or small, such as the icons on your desktop or the arrow of your mouse cursor.

Sprites are very useful when it comes to making computer games. Compared to rendering 3D models in real time, sprites require very little processing power. Sprites have been used in 2D games for decades! For example, in Super Mario Bros, every character, brick, item and monster is a sprite or a sprite animation. Mario has a sprite sequence for running, jumping, ducking, and every action he performs.

Even in modern 3D games, sprites have not been completely replaced by 3D models. Menu items, buttons that light up, and particle effects such as a smoke, fire or sparkles, are usually done with sprites to save on processing power.

Often, the .png file format is used to store sprite images, due to its high quality to low file size ratio, but more importantly because it can store an alpha channel. In simple terms, alpha channel means transparency. Therefore, a .png file can have a transparent background rather than always appearing as a solid rectangle.

Sprites can be used as still images or as an animated image sequence. A sprite animation is essentially a sequence of .png (or similar) images played once, or looping continuously.

In the above image, five sprite images represent every possible lever location of a power-up panel in the game “Earthlings Go Home”, created at Pathways Inc. When the lever reaches the top position, a blue light indicator turns on to let the player know that they can use a special power-up ability.

Also from the same game, the image sequence above shows a few frames of an asteroid rotating. This image sequence contains an alpha channel so that the background of the asteroid is transparent. When set to loop, the image sequence gives the impression of a spinning asteroid flying through space. Using a sprite sequence in this case saves on CPU resources, which is important when targeting the mobile device market. Smart phones and tablets today still lack the processing power required by intensive 3D games, and sprite animations reduce the load significantly.

Sprites are essentially a 2D animation, however, they can create the illusion of a 3D animation. The examples shown in this article were created in 3D, and rendered to a 2D image sequence. They can include such 3D properties as lighting/shadows, specular highlights, reflections, caustics and HDRI. However, these properties are “baked into” the images, and are therefore not dynamic as true 3D properties would be. The image sequence of the moon, for example, has a shadow in the bottom left and a highlight in the top right. This is how the image is rendered, and the lighting will not change dynamically according to scene lighting of the game. Therefore, some careful planning must be done to ensure that multiple sprites in a scene are not lit from inconsistent angles, or the whole scene will look wrong. For this particular game, it was decided that light would always come from the top right corner.

Sprite sequences are also useful to display the player character (and all other characters in the game), especially if the game is a platformer, top-down or orthographic. In 3D games, sprites can be used to reduce the poly count of assets difficult to model in low-poly. Such assets include trees and bushes, which would require thousands of polys to model, but can be “faked” with a few intersecting planes mapped with a leafy texture. This method saves a significant amount of processing, while yielding a believable effect with only a few intersecting polygons.

In summary, sprites and sprite animations continue to have a strong presence even in the modern world of 3D games and powerful computers with lightning-fast video cards. Sprites are especially useful in mobile games, where graphic processing and CPU power is restricted. There is much that can be done with sprite animations to give the illusion of 3D, and even traditional 2D gaming continues to maintain a strong player base.

 

If you would like to see more examples of sprite animations and games we are creating our company, please feel free to explore our website: http://www.pathwaystrainingandelearning.com/ . We always look for fresh ways to engage the audience and to make the experience as fun as possible!