Introduction to GDD 201
In this course you will practice the skills needed to break into, and excel in, the games industry.
We will be beginning our Student Passports, which will serve as a place to showcase your achievements
in the GDD program.
We will also start building your Portfolio. Your Portfolio will be one of the most important
assets you bring to your eventual job search, it is what employers look at to understand who you are and what you can bring to their studio.
To become better at making games, we will also be reading Seven Games by Oliver Roeder, exploring and critiquing new game ideas, and analyzing
games to evaluate their strengths and weaknesses.
Introduce Yourself
- Let us know who you are, why you're here, your experience in game development, and the area of game development that you're most interested in. This will help me introduce material to the course that might help with your specific interest if there isn't otherwise a lesson on that subject.
- Show off or discuss anything you've made in the past
- Tell us your favorite game/genre
Getting Started
- Review the course syllabus and grading rubric.
- Download and install Cyberduck to connect to MyWebspace FTP . Instructions on how to connect
- Cyberduck will allow you to copy files from your computer onto a server so that they can be viewed from the internet. This is how you will share your work.
- When connecting: User name "mywebspace.quinnipiac.edu|QUUsername" (there is a vertical pipe before you enter your QU Network Username, the shift+backslash key)
- Use the Bookmark > New Bookmark button in Cyberduck to save the connection for easier log in.
Portfolio building with HTML/CSS/JavaScript
Our first exploration of portfolio building will lead us through some of the basics of
front-end web development: using HTML, CSS, and JavaScript, to make a webpage from scratch.
In this assignment, we will cover the basics in a lecture, and I will provide resources for continuing to
beyond what we cover in class.
The objective it to learn the basics of what makes a web portfolio work, how the various tags in HTML are used,
how CSS can be leveraged to style your portfolio, and the features that JavaScript brings to your website.
HTML
- HyperText Markup Language is the code that web browsers look at to understand how to display content to a user. HTML is not a programming language, it cannot perform operations or define variables, it doesn't evaluate "if" statements or offer the ability to loop over a section of code. HTML is a markup language, something used to define how content should look when displayed to a user.
- Begin by creating a new folder in your GDD201 directory (on your computer). Call it
Portfolio
.
Open VS Code and create a new file (File > New File). Call inindex.html
, and save it in your Portfolio folder. All of the content for your portfolio will live inside this folder. -
To add an image, video, PDF document, or other file, you can upload it to the same place as your webpage, and then reference it by it's path.
Example: To add an image I would use<img> src="media/myImage.png">
. This means that wherever my website is uploaded to needs to have a folder called "media" and inside it a file called myImage.png. - Webpage Boilerplate Code - Copy and paste this code into the index.html file. Save the file and then open index.html
in a web browser.
<!DOCTYPE html> <html> <head> <title>Professor Blake's Game Development Portfolio</title> </head> <body> <h1>Game programmer, designer, and I got to Gold once in Apex Legends.</h1> <p>Hello, I'm XYZ.</p> </body> </html>
- You can now add content to between the
body
tags to start building out your site. Experiment with the following tags: <b>
: Bold Text<i>
: Italic Text<u>
: Underline Text
<u>Thank you Mario</u>, But <i>our</i> Princess is in <b>Another Castle</b>!
Thank you Mario, But our Princess is in Another Castle!<p>
: Paragraph Tag
Welcome to my Website <p>I hope you enjoy your stay!</p>
Welcome to my WebsiteI hope you enjoy your stay!
<h1>
: Header 1 Tag -<h6>
: Header 6 Tag
<h1>This is Header 1<h1> <h6>This is Header 6<h6>
This is Header 1
This is Header 6
<a>
: Hyperlink Tag
Here's a link to the <a href="https://games.qu.edu/">QU GDD Website<a>
Here's a link to the QU GDD Website<div>
: Section Tag
The classes for the following sections are defined in the <code>style.css</code> file that is referenced in the header of this website. <div class="myDiv">Here is a section which uses the "myDiv" class.<div> <div class="myOtherDiv">Here is a section which uses the "myOtherDiv" class.<div>
The classes for the following sections are defined in thestyle.css
file that is referenced in the header of this website.Here is a section which uses the "myDiv" class.Here is a section which uses the "myOtherDiv" class.<code>
: Code Tag
To destroy a GameObject in Unity, use <code>Destory(gameObject);</code>.
To destroy a GameObject in Unity, useDestroy(gameObject);
.<ul>
: Unordered List Tag<li>
: List Item Tag
Professor Blake's Favorite Games: <ul> <li>Quake</li> <li>Chrono Trigger</li> <li>Half Life</li> <li>Mario Kart 64</li> </ul>.
Professor Blake's Favorite Games:- Quake
- Chrono Trigger
- Half Life
- Mario Kart 64
Tags
Here are a few common HTML tags to get you started.
CSS
- Cascading Style Sheets are used to style how a webpage looks. By creating classes with various visual properties, and applying those classes to HTML elements, we can create interesting looking websites.
- CSS can be added to a webpage by defining CSS classes within the
<head>
of a single page, or by placing the classes inside a separate file that is hosted elsewhere online and referenced in your<head>
section. -
To override a standard HTML element style you can add the element to your CSS classes and when used in the webpage it will inherit your definitions:
body{ color:greenyellow; background-color: black; font-size: 24pt; font-family: 'Courier New', Courier, monospace; } h1{ font-size: 21pt; color:red; }
-
If you want to define your own CSS classes, you can define them with a "." before the name you choose,
then use the
class
attribute in your element tag..menuArea{ color:greenyellow; background-color: black; font-size: 24pt; font-family: 'Courier New', Courier, monospace; } .importantInfo{ font-size: 21pt; color:red; }
JavaScript
- JavaScript is the programming language used to control the behavior of websites. It can be used to change web content, read data from APIs, perform calculations, event to make games that play in the browser.
-
JavaScript code can be added to a webpage by using the <script> tag:
<script>console.log("Hello World!");</script>
-
document.getElementById()
allows you to reference any element on your webpage by giving the element an ID, and then finding it.
<script> var d = new Date(); document.getElementById("time").innerHTML = d.getTime(); </script>
-
innerHTML
is the HTML code found between the open and close tag of an element.document.getElementById("gold").innerHTML = "</h1>You've found 100 gold!</h1>";
-
style
is a reference to the CSS properties of an element.document.getElementById("name").style.background-color = "red";
-
Useful JavaScript
Code Examples
- HTML Page - Explains how to view the source of any website in your browser.
- CSS Introduction - Example of how to include CSS classes inside your webpage and utilize them inside your webpage's HTML elements.
- CSS Style Sheet Reference - Explains how to reference a CSS stylesheet from outside of the webpage.
- Grid Layout 1 - A look at how to utilize the Grid layout module for your portfolio.
- Grid Layout 2 - A more complete example of using the grid layout module.
- Grid Layout 3 - A portfolio showcasing images, GIFs, and videos.
- JavaScript Example - A portfolio using JavaScript to control content.
Student Examples
Portfolio building with a Website Builder
As you begin your journey into the game development industry, your portfolio is the key to landing your first, or next, job. A potential
employer's perception of you can be heavily influenced by the way you design your portfolio.
Now that we understand the fundamentals of front end web development, we're ready to start utilizing the
tools available to us to build effective, professional, web portfolios.
These tools will help you deliver your message to potential employers or clients, showcasing the work that you are capable of producing,
your skills, education, and experience. Using website building software can allow you to focus on creating a portfolio that works for you,
without the need to be an expert front end developer.
Website Builder Features
- Drag & Drop Design: Most website building software allows you to add common website elements with a drag-and-drop interface, making it simple to size and position text, images, GIFs, video, etc. This makes a web portfolio accessible to everyone, not just programmers.
- App Integration: Some builders also offer a marketplace of useful website plugins to boost the functionality of your page. For example: If you have a social media feed that you want to stream alongside your portfolio, you may be able to add an app that does so seamlessly.
- Responsive Design: Designing your portfolio for large and small screens is essential, you don't know where a client or employer will be viewing it. Most website builders provide a simple way to build both views, ensuring your portfolio is ready to be viewed anywhere.
- Search Engine Optimization: Getting to the top of search queries is important when you want to be found. SEO tools provided by website building services can help ensure your portfolio doesn't get stuck at the bottom of the list.
- Web Hosting: At Quinnipiac, we have access to server space on MyWebspace. After you graduate, however, you will want to host your work somewhere that you can control. Most website building software also provides the option to host your website on their servers, ensuring you never lose access to your portfolio or encounter server downtime when you need to show your portfolio.
- SquareSpace: SquareSpace features a suite of tools and integrations that make it easy to build your portfolio, or any other webpage.
- WIX: Powerful and easy to use, Wix is one of the highest rated, and most popular, website building tools.
- Google Sites: Simple and effective, on a reputable platform.
- Common Issues with Student Portfolios and CV's - Sally Blake: Great list of DOs and DON'Ts to help your portfolio stand out, for the right reasons.
Game Ideas: Ideation Strategies and Planning
All game designers go through a humbling process early in their education where they sit down to come up with an idea for a game
and after jotting down a few of the high-level bullet points, they realize their game idea just isn't good. Or, worse, they begin
developing their bad game idea, and after weeks/months/years, arrive at the same conclusion.
Coming up with bad game ideas isn't a fault of the designer, but pushing one through to production can be a very costly mistake. So how do we come up with good game ideas?
Fail Fast
- The mantra of good game design is to Fail Fast. This phrase has applications across a wide swath of industries, but in game design, it is a term that is aimed at pushing designers to test out many ideas quickly to find the best ones, rather than to roll around with one idea forever, trying to make it into a winner. This helps designers avoid getting hung up on their love for an idea that might not actually play well when brought to life.
Utilize Ideation Techniques
-
As creatives, we often feel like our value lies in simply pulling good ideas out of thin air. New designers often coin
themselves "The Ideas Person." This line of thinking can stunt the progress of a team as they await their Ideas Person's
next great game to appear out of the ether.
The better way to create strong game ideas is to use ideation techniques and work as a team to find something worth pursuing. -
Here are a few techniques you can try. Find these, and others at the Interactive
Design Foundation's Website. You should also look around for other techniques, the best one is the one that works for you and your team!
-
Brainstorm / Brain Dump: These are very loose techniques that can evolve as teams use them to fit what works best. The Brainstorm
involves a team simply throwing their ideas out in a group setting, building on previous ideas or introducing something new. It's important to
create an environment where each team member feels comfortable sharing even the wildest idea. If people are feeling their voice is being unheard, they're
likely to stop participating and their ideas, and contributions, are lost.
The Brain Dump technique is a method that aims to avoid this potential issues of the Brainstorm by asking everyone on the team to contribute ideas by writing them on a piece of paper and adding them to a pile. This prevents the outgoing and loud members from silencing the voice of the quieter team members. -
Brainwriting: This technique allows teams to benefit from the Brain Dump process but also gains the value of the community input by asking team members to write down their ideas, and then pass those ideas around for others to iterate on them. - Worst Idea: This is a fun, and helpful, technique that asks designers to list horrible ideas in place of good ones. This can be entertaining, but also helps identify directions to avoid going and focuses designers on a path to a successful idea. This is best used when a core element of a game has been decided on, perhaps a strong narrative element for a game, but the rest needs to be iterated on.
-
Mind Map: One of the tools that works great for individual designers and teams, this technique starts with writing the down ideas and building off them with brief (one or two word) follow up ideas. A series of nodes and paths emerges and game ideas can arise by following a route through the nodes.
-
Brainstorm / Brain Dump: These are very loose techniques that can evolve as teams use them to fit what works best. The Brainstorm
involves a team simply throwing their ideas out in a group setting, building on previous ideas or introducing something new. It's important to
create an environment where each team member feels comfortable sharing even the wildest idea. If people are feeling their voice is being unheard, they're
likely to stop participating and their ideas, and contributions, are lost.
Game Idea Assignment 1
Develop a game idea for a new game that involves using memory. There are many games that involve memory and they are explored at length in the book. Look at the sections on checkers, chess, scrabble, and bridge in particular. Think about games that you enjoy that require memory either of strategy, game pieces, or mechanics.
Use a milanote board and include:
- Overview: High-level look at your game, the elevator pitch. A few sentences describing what the game is about.
- Theme: The background of your game, the subject and scenarios that set the scene.
- Game Mechanics: Detailed descriptions of how the player plays the game, what makes the gameplay interesting, how player decisions are translated into the game world. What happens in the game that the player must understand, and eventually master?
- Mood Board: Create a Mood Board that helps set expectations for the visual style of your game. Consider 2D/3D art, pixel/low poly/stylized/photorealistic, tone, brightness, etc.
- Win/Lose Conditions: If your game has important "state" changes, such as the player losing the game, or winning the game, describe how these conditions are met and the impact they have on the game.
- Characters: Describe the important characters in your game, the subjects that drive your story or gameplay.
- Rules: What rules govern your game? Is there a gameplay arena, like a field? A time limit? A score?
- Target Audience: Who is this game designed for? What considerations need to be made for this group? How does your game design support the needs of this group?
- Hardware Goals: If the idea is for a digital game, what platforms would it be appropriate for? What considerations need to be made for each platform you wish to deploy it to? If it is not a digital game: What material would the game require? Is it purchased in a box?
- Feedback to Player: How does the game communicate back to the player? How does the player know when they're doing well? When they're failing? When they're going in the right direction, about to lose, close to victory, or totally lost and in need of a map?
- Supporting Material: Provide supporting material for your decisions from our readings, or other sources. Your design decisions should be based on a combination of creativity, intuition, and research. Set yourself up for success by using the knowledge others have worked hard to gain as you design your games.
Check the Grading page for more information about what is required.