Graphics with Fang

The FangEngine is created by Brian C. Ladd & Jam Jenkins

Presentation by Pepper

With much credit to:Jenkins, Jam & Brian C. Ladd. Introductory Programming with Simple Games.

Mass: Wiley, 2011

Resources

• Fang Engine main pagehttp://www.fangengine.org/index.php/Main_Page• Download jar – fang 2http://www.fangengine.org/index.php/download• Install in BlueJhttp://www.fangengine.org/index.php/Tutorials/BlueJ• Tutorial for creating wackadot (but older fang engine

and more than we are including)http://www.fangengine.org/index.php/

Tutorial:Wackadot

Goal: create a game panel: Step 1: Bring in the Fang Knowledge

• Bring the Fang 2 engine knowledge into our program so we can call on it.

import fang2.core.*;import fang2.sprites.*;import java.awt.*;import java.awt.geom.*;

Goal: create a game panel: Step 2: Inherit

• Make our class extend the GameLoop, so it has everything GameLoop has

• public class Wackadot extends GameLoop • {• // note that GameLoop contains the variable

canvas• // it also has a variable called random• }

Goal: create a game panel: Step 3: Create a main method for running

We can then run the game as an application by asking our program instance to run itself.

public static void main(String[] args) { Wackadot mygame = new Wackadot(); mygame.runAsApplication(); }Run to see the result

Goal: Write a simple dot on the CanvasStep 1: Take control of startGame

• Override the startGame method so we can make it do what we want@Override public void startGame() { // we will make it add a dot here }

Goal: Write a simple dot on the CanvasStep 2: Create a dot and add to canvas• Add the dot by creating an OvalSprite object and

adding it to the canvas. • Calling a constructor – makes itself when it knows the

width and height• Consider that the default game board is 1 * 1

@Override public void startGame() {

Sprite dot=new OvalSprite(.1, .1); canvas.addSprite(dot);

}Run

Goal: Adjust the dotStep 1: location

• All Sprites have a method to adjust their location: setLocation which takes in x and then y

• To get the middle, set location to .5, .5• Set location before you paint it onto the screen.

@Override public void startGame() {

Sprite dot=new OvalSprite(.1, .1); dot.setLocation(0.5, 0.5); canvas.addSprite(dot);

}Run

Goal: Adjust the dotStep 2: color

• All Sprites have a method to adjust their color: setColor which takes in predefined Java color object

• To get the list of colors that come with java.awt.Color:http://docs.oracle.com/javase/1.4.2/docs/api/java/awt/Color.html• Set color before you paint it onto the screen.

@Override public void startGame() {

Sprite dot=new OvalSprite(.1, .1); dot.setLocation(0.5, 0.5); dot.setColor(Color.RED); canvas.addSprite(dot);

}Run

Goal: Adjust the dotStep 3: scale

• You set the size of the dot, but you can then scale it up or down. .1 is the default. 1 makes it larger; .01 makes it smaller

• All Sprites have a method to adjust their scale: setScale which takes in the adjustment scale multiplier@Override public void startGame() {

Sprite dot=new OvalSprite(.1, .1); dot.setLocation(0.5, 0.5); dot.setColor(Color.RED); dot.setScale(0.01); canvas.addSprite(dot);

}Run

Goal: Change to a new shapeMore on extending and constructors

• Because many types of Sprites extend Sprite, and you have a Sprite variable, you can fill it with any type of Sprite

• See list: http://www.fangengine.org/images/docs/api/ and click on fang2.sprites in upper left

• Look at constructors – LineSprite wants start and end coordinates– RectangleSprite wants width and height

@Override public void startGame() {

Sprite dot=new LineSprite(.1, .1, .5,.5); dot.setLocation(0.5, 0.5); dot.setColor(Color.RED); canvas.addSprite(dot);

}Run

Goal: Loop to add many shapes • Loop like you normally would, adjusting something by

the loop counter• It is simpler to create a method and loop the method

@Override public void startGame() { for (int x = 1; x < 10; x++){

Sprite dot=new RectangleSprite(.1, .5); dot.setLocation(0.5+x*.01, 0.5-x*.01); dot.setColor(Color.RED); canvas.addSprite(dot);}

}Run

Goal: Put shapes on top of each otherCreate and add more than one

• Because many types of Sprites extend Sprite, and you have a Sprite variable, you can fill it with any type of Sprite

• See list: http://www.fangengine.org/images/docs/api/ and click on fang2.sprites in upper left

• Look at constructors – LineSprite wants start and end coordinates– RectangleSprite wants width and height

@Override public void startGame() {

Sprite dot=new RectangleSprite(.1, .5); dot.setLocation(0.5, 0.5); dot.setColor(Color.RED); Sprite line=new LineSprite(.1, .1, .5,.5); line.setLocation(0.5, 0.5); line.setColor(Color.RED); canvas.addSprite(line); canvas.addSprite(dot);

}Run

Goal (A Reach): Animate your graphics• The FangEngine has a method, advanceFrame that runs every few seconds. Use it

to draw a new rectangle every time it runs, increasing a counting variable.

int counter;@Override public void startGame() { counter = 1; } @Override public void advanceFrame(double timePassed) {

Sprite dot=new RectangleSprite(.1, .5); dot.setLocation(0.5+(counter*.1), 0.5-(counter*.1)); dot.setColor(Color.RED); canvas.addSprite(dot); counter = counter + 1;

}Run & Start Game

You try

• Place 3 rectangles in the shape of a basket• Put a dot into that basket