Visual Design Concepts For Mobile Games

Chirstopher Carman

• Publisher: A K Peters/CRC Press
• Year: 2018
• eBook ISBN: 9781317614982
• Topic: Computer Science
• Subtopic: Programming Games
• Index: Computer Science

This book is geared towards both students as well as professionals who are looking to enter the mobile (tablet/smartphone) and PC (personal computer) industry as concept artists (for both 2D and 3D production pipelines) or 2D production artists (game-ready assets). This book is not specifically focused on game design or game development and is also not a 3D modeling or animation guide.

However, certain aspects of game design, game development, and 3D modeling and animation will impact the visual development and art creation process. So, at points throughout we will explore topics such as game engine performance and game mechanics, though at a very high-level, bird's-eye, vantage point and only as they pertain to the visual development of the various assignments throughout this book.

Through the completion of the exercises and assignments contained within Visual Development for Web & Mobile Games readers will be guided through the visual development process and execution of a variety of concepts and assets (final game art). This includes categories such as characters, props, and backgrounds, within an isometric design template. The categories themselves will relate more to their function within a very simple game design template than their completed visual representation (e.g., the "big build-able" category could be anything from a town square to a fire breathing dragon as long as it fits within the bare bones parameters of the asset types functionality). The concept, theme, and style of these assets, as well as the world they inhabit, will be completely up to the individual artist.

Key Features

• Weaves knowledge of classic visual development principles and web/mobile game art production practices.
• Assignments and exercises at the end of every chapter allow the reader to create a game art project from start to finish.
• Examines both 2D/3D game art pipelines.
• Includes a companion website with project files, asset downloads & author created video tutorials.

Chapter 1

Isometric Perspective

CHAPTER OBJECTIVES

In this first chapter, we will examine the origins of “social” (mobile/web) games and establish what makes them different from traditional console and PC games. We’ll begin by examining the isometric perspective and why historically it’s been effective for mobile and PC game development. In addition, we will walk through the various priorities to consider when designing within an isometric environment by completing the assignment at the end of this chapter (Assignment 1.1).

KEY LEARNING OUTCOMES

• Identify and define the term “social” game.

• Understand the basic priorities of isometric perspective.

EXERCISE/ASSIGNMENT

• Exercise 1.1: Play Some Games!

• Assignment 1.1: “The Saloon” (3–4) hours

What Is (and Isn’t) This Book about?

Let’s kick things off by talking about what this book is and what it is not. This book is geared toward both students and professionals who are looking to enter the mobile (tablet/smartphone) and PC (personal computer) industry as concept artists (for both 2D and 3D production pipelines) or 2D production artists (game-ready assets). This book is not specifically focused on game design or game development and is also not a 3D modeling or animation guide.

However, certain aspects of game design, game development, and 3D modeling and animation will impact the visual development and art creation process. So, at points throughout, we will explore topics such as game engine performance and game mechanics, though at a very high-level, bird’s-eye vantage point and only as they pertain to the visual development of the various assignments throughout this book.

“Adventureland.” (Copyright © 2009-2017 Zynga Inc.)

Isometric Game Board Template

Through the completion of exercises and assignments contained within each chapter, readers will be guided through the visual development process and execution of a variety of concepts and assets (final game art). This will include categories such as characters, props, and backgrounds within an isometric design template. The categories themselves will relate more to their function within a very simple game design template than their completed visual representation (e.g., the “big buildable” category could be anything from a town square to a fire-breathing dragon, as long as it fits within the bare-bones parameters of the asset type’s functionality). The concept, theme, and style of these assets, as well as the world they inhabit, will be completely up to the artist.

In addition to the isometric view, there are several other game screen perspectives that are commonly used in web and mobile games such as:

Side Scroll:

“Tiny Thief.” (Copyright © 2009-2017 Zynga Inc.)

Top Down:

“Stampede Run.” (Copyright © 2009-2017 Zynga Inc.)

However, for the visual development purposes of this book, we will be focusing the majority of our attention on the standard isometric environment, which we’ll explore further in this chapter.

With this in mind, we will be examining and developing additional assets outside of the isometric environment, including marketing art (box art, posters, etc.), game loading screens, simple user interface (UI) elements, and a supplemental side-scroll concept in Chapters 12, 13, 14 of this book.

What Exactly Is a “Social” Game?

A common designation given to the type of game that this book will explore is “social” game. So, what is a “social game” and what makes it different from a traditional console (Xbox, PlayStation, etc.) or PC (World of Warcraft, Civilization, etc.) game?

Before we get into what specifically “social games” are, let’s step back a bit and establish what a video game is in the broadest sense. Simply put, games are where engineering, visual arts, and interactive design merge to create an experience/product. An “allspice” of media, if you will. The term “social” games was coined to describe game design mechanics that integrate viral channels native to social media platforms such as Facebook into games for propagation and player acquisition purposes. The “Lonely Animal” feature of “FarmVille” is an example of an early social game success.

“FarmVille.” (Copyright © 2009-2017 Zynga Inc.)

However, when we use the term “social games” anywhere within this text, it’s in reference to any of the current market of mobile and web-based games with a multiple player function—whether synchronous (“World of Warcraft”) or asynchronous (“Connect Four”), these games are inherently “social.”

As social networking sites such as Facebook and Myspace functioned as the early platform for these games, the more recent “Blue Ocean” (area with the most opportunity for growth) is considered to be mobile and tablet gaming (made up primarily of the Apple and Android app stores). However, the fractured nature of the mobile market as of this writing has made it difficult for one company to establish dominance and utilize resources such as marketing and advertising dollars to drive user acquisition.

Much like any digital market, the mobile space is ripe for disruption and commonly sees “indie” games (produced by smaller game development teams) race to the top of the download charts. “Flappy Birds,” by lone developer Dong Nguyen, is an excellent example of this disruption.

While the hits-driven nature of the video game industries can pose challenges for a large established game developer to build a predictable business around, particularly with the web/mobile sector due to the lower barrier to entry, the prospect of a single developer uprooting the big players of the industry is both exciting and a unique opportunity that is not currently present in most other entertainment sectors.

Note: That from the perspective of this book, the visual development process from concept art to completed assets between web and mobile in general will be approached as one and the same. Any differing aspects that impact the visual development process for either platform will be noted.

The Evolution of Social Game Art

Early social games such as “Mafia Wars” and other text-based RPGs (role playing games) were much simpler to build from both game design and art creation perspectives when compared to the titles being published by traditional console game developers.

“Mafia Wars.” (Copyright © 2009-2017 Zynga Inc.)

Basic leader boards and puzzle games were the initial offerings on social networking platforms (Facebook, Myspace, Friendster). From a visual development and asse...

Table of contents

• Cover
• Half Title
• Title Page
• Copyright Page
• Table of Contents
• Preface
• Acknowledgments
• About the Author
• Chapter One Isometric Perspective
• Chapter Two Vector Tools
• Chapter Three Isometric Game Board Project Introduction
• Chapter Four 2D: The Pitch
• Chapter Five Visual Hierarchy
• Chapter Six Character Design, Part 1
• Chapter Seven Character Design, Part 2
• Chapter Eight Multistate Assets and Global Lighting
• Chapter Nine The Big Buildable
• Chapter Ten Prop Design (Continued)
• Chapter Eleven Art Team Roles and Collaboration
• Chapter Twelve 3D Production Pipeline and Marketing Art
• Chapter Thirteen User Interface and User Experience
• Chapter Fourteen Portfolio Tips and Parting Words
• Answer Key
• Index