Transcript Graphics with Fang

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 page
http://www.fangengine.org/index.php/Main_Page
• Download jar – fang 2
http://www.fangengine.org/index.php/download
• Install in BlueJ
http://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 Canvas
Step 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 Canvas
Step 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 dot
Step 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 dot
Step 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 dot
Step 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 shape
More 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 other
Create 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