Building My World
Foreward
As part of an initiative to explore aspects of game design with students in our Foundation Art and Design program, I decided to embark on a journey led by the very talented Mark Shufflebottom—a colleague from the Adobe Education Leaders (AEL) group and a lecturer in Motion Graphics and Interaction Design at the Sherridan Institute of Technology and Advanced Learning in Oakville, Ontario.
The 5 week course was run under the aegis of Adobe Gen Pro—part of the Adobe Education Exchange. Mark, along with other AEL colleagues offered the course in every corner of the globe. The course explored the conceptual dimensions of game and player engagement as well as an in-depth worflow that spanned Adobe Photoshop for texture creation, Adobe Fuse CC (preview) for character design, Mixamo for character rigging and animation, Unity 3D for world creation, 3D game object design, game mechanics and coding.
The course provided pre-recorded lectures and links to reference materials and videos and also engaged the students live in online sessions via Adobe Connect. The Adobe Connect session allowed students to interact with one another and the professors and to ask questions and gain clarification on an array of topics and issues. Quizzes and opinion polls were also a part of the weekly mix. The connect sessions also enabled Mark to bring top notch game developers right to our doorstep—allowing us to share in their unique perspectives and methods and to pepper them with questions.
Students were also required to post weekly assignments and to comment on and rate the work of at least three peers.
In all it was a fantastic and quite challenging learning experience that I would highly recommend for any educator looking to engage their students in novel ways using the paradigm of game.
I intend to use what I have learned to support a unit on descriptive narrative and visualization as part of a new Digital Storytelling course that I am offering in January 2016.
Production Process
Gameplay
Once game objectives were defined and coded into the game's logic WIN and LOSE conditions could be defined. In my case, collecting 10 Doubloons defined a win whereas wading into water that was above the character's waist resulted in a lose.
Photoshop
I began by creating a CUSTOM IMAGE SIZE of 512X512 PIXZELS. I then generated foreground and background colours in the Photoshop colour swatch. These colours are used to generate cloud or fiber textures from the FILTER RENDER {FIBERS or CLOUDS} menu.
Create foreground and background colours in the swatches as shown above.
You can render CLOUD or FIBER patterns to form the basis for your texture. The wood (above) and grass textures were created using the RENDER FIBERS function from the FILTER menu.
Using the FILTER menu a CLOUD pattern is rendered using the foreground and background colours in the colour swatch at the bottom of the vertical toobar on the left side of the screen.
A new ALPHA channel (see the large red hilite showing the new channel that has been automatically labelled as Alpha 1) is created by CLICKING on the NEW CHANNEL icon to the left of the TRASH ICON (see small hilite circle).
The RENDER DIFFERENCE CLOUDS is applied to the Alpha Channel. You can try this several times until you get a satisfactory pattern that you can use as a bump map.
DOUBLE-CLICK on the Alpha Channel name and RENAME to BUMP MAP as shown above. This channel will be used to imply hilight and shadow details once 3D lighting is applied to the graphic. A bump map often provides raised texture for 3D objects in a scene.
You then apply the RENDER LIGHTING EFFECTS function from the FILTER menu.
The lighting rig appears along with its control handles Make sure that you specify the BUMP MAP channel in the TEXTURE menu in the control panel at the right side of the screen. This loads the Alpha channel that you generated earlier and uses it to imply surface texture through lighting.
You can see the surface texture immediately. Experiment with the rig controls (hilite circles) and the material properties in the control panel on the right side of the screen.
In order to minimize pattern "TILING"—a phenomenon where distracting repeating patterns can be seen in large areas—it is necessary to copy the texture and offset it it to the left and then to the right then top and bottom. You make a copy and move it to the side (I colourized one side so that you can see the two layers. Once offset you then CLICK on the fly-away menu at the top of the Layers Palette. Once merged you can use the HEALING BRUSH to blend the line that runs through both copies. You repeat this process going in the other direction (right) and then up and down using the same technique until you have a pattern that, when applied over a large areea will not show distracting tiling patterns.
Merge the layers by clicking on the top right corner and then choosing MERGE DOWN or COMMAND E to merge the copy and the layer below it.
When you first offset the two panels you will probably see a noticeable line separating the two sections. Use the HEALING BRUSH to sample areas away from the line and blend into the line to make it disappear. Remember to MERGE THE LAYERS before using the HEALING BRUSH. SAVE a JPG version of the file for use in 3D programs such as UNITY 3D.
Textures made in Photoshop CC
Pattern swatches (originals were 512x512 pixels for use in Unity3D) created in Photoshop using the FILTERS menu and RENDER CLOUDS and RENDER FIBRES functions. Fibre filtering gave rise to the grass and wood textures whereas Cloud filters gave rise to stone textures. The LIGHTING FIlter was applied to create the 3D effect by applying it to an Alpha channel with a RENDER—DIFFERENCE CLOUDS FILTER applied to it.
I made this crate texture with stencilled type to apply to a cube within my game world. The idea was to have growling triggered as one approached the crates within the game.
I added a doubloon texture to apply to disc-shaped coins that would be scatterred around my world.
Adobe Illustrator
I wanted to create some signage and some branding for my 3D world so I used Illustrator to generate some graphics that could be used later on.
This vector logo was used in signage as well as for a patch on a game character's jacket.
Mixamo Fuse
I used Adobe Fuse to design my character then used Mixamo to rig and animate movements for it.
Fuse CC allows you to choose phenotypes for facial as well as torsos, arms and legs and to easily modify them into custom models which can then be clothed. The models are then uploaded to the Mixamo site for rigging and animating. The entire process is very simple and intuitive.
Mixamo.com is a website where you can rig, animate, publish and purchase models for use in 3D worlds.
Mixamo features a wide array of model packs for purchase.
These were the characters that I designed from scratch.
My main character Manus. The character is exported to .fbx format for Unity 3D
Unity 3D
Production of the game world proceeded inside Unity 3D using the Terrain Builder tools (hilighted Square) to build the topography, water and vegetation. A folder Grass, rock and other textures were added to the ASSETS folder applied to the terrain
Terrain is added by first defining a square area (light blue) on which your world will be constructed. The TERRAIN BUILDER tools (red square) are used to construct elevations, apply textures and add foliage to the landscape. Water is then added (blue disc) and textures and other graphics can be organized into named folders (elliptical hilight), placed inside the ASSETS folder for the PROJECT and applied to the landscape and any other 3D objects in the environment.
Textures created in Photoshop can be applied to objects such as the crates or to the landscape to simulate varied geological and geographic features such as sand, rock, grass, etc.
Mono Develop
Mono Develop is the coding environment for Unity 3D. It's Javascript and C Sharp frameworks allow one to code specific object and environmental behaviours in either language and to convert between the two.
The coding screen for Mono Develop allows you to code in Javascript of C Sharp and to convert between the two with ease. As you code you can debug your program on the fly with red hilites indicating syntax and coding errors.
Publishing
The final stage of development was publishing the game for consumption on a variety of consoles, browsers and operating systems. The BUILD function is accessed via the file menu where you can choose your target platform.
From the FILE menu of Unity 3D you can acess this BUILD menu that allows you to publish your game for a variety of consoles, operating systems, mobile devices and browsers.
Reference Links
A number of discussions supported by online reference materials supported our foray into game design. I will share, in kind, the URL links that were shared with me.
LIVE LECTURE LINKS