Game development session1 fundamentals of graphics engine

The KODERUNNERS Community
Creative Coding 101 - Abhik Biswas

Game Development 101
Fundamentals
Instructors: Abhik Biswas & Aritra Dey

What is a Game???

Well, ain't
that a stupid
question!?!

Philosophers have wasted their lives
(and tons of papers and ink) trying to
answer this question.

At the end of the day, it feels a lot
like....

Yes, chasing your
own tail.

So lets start making
games

But WAIT....

How do we
create
games???

Well, it seems we need something called....
Game Engine

So what the hell
is a
Game
Engine???

A Game Engine is a
Software FrameWork
designed for creation
and development of
video games.

Well, technically you don't need a
Game Engine to create a game.
Games like Tic-Tac-Toe and Hangman can be made by
writing simple logical programs and can be played using
raw text or pixels.

Let's Play a game!

A Game Engine Covers all the Aspects of Game
Development including Graphics, Physics,
Simulation, Programming, AI, Sound etc.

Some Commercial Game Engines

Processing

Introduction to Processing
 Processing is a free to use and open source graphics engine (creative coding framework) created
by Casey Reas and Ben Fry.
 It is basically a Java dialect designed specifically for generating visual art, animation and any kind
of graphic application
 We would be using Processing as our primary graphics engine.

Why Processing?
 Prototyping is done in the form of a sketch
 Visual feedback feeds the curiosity that is inherent in new programmers
 It has its own IDE (very easy)
 Faster learning than OpenGL + GLUT or other alternatives
 Powerful, very powerful. It allows to develop from very simple to very complex
applications
 Scalable. It is possible to combine processing with pure Java and with Java
libraries. A pure Java application can use processing libraries as well..
Creative Coding 101 - Abhik Biswas ; Aritra Dey

Processing
Basic
Procedural/
Structured
Object
Oriented
; Aritra Dey

Cartesian Plotting in Processing
Think about graph paper
How would you draw a line between (0, 0) and
(5,5)?

EX : 01 Draw a Line in Processing
line(10, 10, 90, 90);
This is your first program
Type it in and click on the Triangle (Play button) in the
top menu or select Sketch -> Run

line(10, 10, 90, 90);
X and Y coordinates of
the first point
the second point

Why such an
output?

EX : 01 Cartesian Map in Processing
On a computer screen, the origin (0, 0)
is always at the top left location of the
screen

Basic Shapes
Points, Rectangles, Triangles, Quadrilaterals etc.
Eg: point (10,10) represents a point at (10,10)

rectangle(20, 20, 50, 50);
the first point
Length and Width of the
rectangle

quad(38,31,86,20,69,63,30,76);
X and Y
coordinates of
the 1st point
X and Y
coordinates of
the 2nd point
X and Y
coordinates of
the 3rd point
X and Y
coordinates of
the 4th point

triangle(13,75,28,20,26,75);
X and Y
coordinates of
the 1st point
X and Y
coordinates of
the 2nd point
X and Y
coordinates of
the 3rd point

Ellipses and Circles
 Ellipse can be represented by specifying the
1. The coordinates of the center of the ellipse
2. The radius of the ellipse in the X-direction
3. The radius of the ellipse in the Y-direction
 ellipse(xc, yc, xrad, yrad);
 A circle is an ellipse with the same value for the x-radius and y-radius

Representing Colors
Colors in Processing are represented as a combination of Red,
Green and Blue values
0 = no contribution of a particular color
255 = maximum contribution of a particular color
Pure Red = 255, 0, 0
Pure Green = 0, 255, 0

Experiment with Colors
 // Set fill color to Red
fill(255, 0, 0);
rect(5, 5, 70, 30);
 // Set fill color to Green
fill(0, 255, 0);
ellipse(20, 60, 25, 35);
 // Set fill color to a shade of Green
fill(0, 127, 0);
triangle(50, 50, 70, 70, 90, 30);
Red, Green, Blue combinations
Black = 0, 0, 0
Yellow = 255, 255, 0
Orange = 255, 102, 0
Brown = 165, 42, 42
Fuchsia = 255, 0, 255
Olive = 128, 128, 0
White = 255, 255, 255

Opacity / Transparency
Opacity/Transparency also defined separately in the fill function
0 = completely transparent
255 = completely opaque

fill(255, 0, 0);
rect(5, 5, 70, 30);
fill(0, 255, 0);
rect(25, 25, 40, 60);

fill(255, 0, 0);
rect(5, 5, 70, 30);
fill(0, 255, 0, 127);
rect(25, 25, 40, 60);
Transparency

Stroke Weight
 strokeWeight(value);
size(480, 120);
smooth();
ellipse(75, 60, 90, 90);
strokeWeight(8); // weight = 8 pix
ellipse(175, 60, 90, 90);
ellipse(279, 60, 90, 90);
strokeWeight(20); // weight = 20 pix
ellipse(389, 60, 90, 90);

Stroke Color
 stroke(color);
*Could be a single value
(to specify gray scale)
*Could be 3 values for RGB

THANK YOU

Game development session1 fundamentals of graphics engine

Recommended

Recommended

More Related Content

Recently uploaded

Recently uploaded (20)

Featured

Featured (20)

Game development session1 fundamentals of graphics engine

Editor's Notes