Graphics with Fang The Fang Engine is created

  • Slides: 15
Download presentation
Graphics with Fang The Fang. Engine is created by Brian C. Ladd & Jam

Graphics with Fang The Fang. Engine 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

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 Blue. J http: //www. fangengine. org/index. php/Tutorials/Blue. J • Tutorial for creating wackadot (but older fang engine and more than we are including) http: //www. fangengine. org/index. php/Tutorial: Wackado t

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

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 fang 2. core. *; import fang 2. sprites. *; import java. awt. geom. *;

Goal: create a game panel: Step 2: Inherit • Make our class extend the

Goal: create a game panel: Step 2: Inherit • Make our class extend the Game. Loop, so it has everything Game. Loop has • public class Wackadot extends Game. Loop • { • // note that Game. Loop 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

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. run. As. Application(); } Run to see the result

Goal: Write a simple dot on the Canvas Step 1: Take control of start.

Goal: Write a simple dot on the Canvas Step 1: Take control of start. Game • Override the start. Game method so we can make it do what we want @Override public void start. Game() { // we will make it add a dot here }

Goal: Write a simple dot on the Canvas Step 2: Create a dot and

Goal: Write a simple dot on the Canvas Step 2: Create a dot and add to canvas • Add the dot by creating an Oval. Sprite 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 start. Game() { } Run Sprite dot=new Oval. Sprite(. 1, . 1); canvas. add. Sprite(dot);

Goal: Adjust the dot Step 1: location • All Sprites have a method to

Goal: Adjust the dot Step 1: location • All Sprites have a method to adjust their location: set. Location 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 start. Game() { } Run Sprite dot=new Oval. Sprite(. 1, . 1); dot. set. Location(0. 5, 0. 5); canvas. add. Sprite(dot);

Goal: Adjust the dot Step 2: color • All Sprites have a method to

Goal: Adjust the dot Step 2: color • All Sprites have a method to adjust their color: set. Color 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 start. Game() { } Run Sprite dot=new Oval. Sprite(. 1, . 1); dot. set. Location(0. 5, 0. 5); dot. set. Color(Color. RED); canvas. add. Sprite(dot);

Goal: Adjust the dot Step 3: scale • You set the size of the

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: set. Scale which takes in the adjustment scale multiplier @Override public void start. Game() { } Run Sprite dot=new Oval. Sprite(. 1, . 1); dot. set. Location(0. 5, 0. 5); dot. set. Color(Color. RED); dot. set. Scale(0. 01); canvas. add. Sprite(dot);

Goal: Change to a new shape More on extending and constructors • Because many

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 fang 2. sprites in upper left • Look at constructors – Line. Sprite wants start and end coordinates – Rectangle. Sprite wants width and height @Override public void start. Game() { } Run Sprite dot=new Line. Sprite(. 1, . 5, . 5); dot. set. Location(0. 5, 0. 5); dot. set. Color(Color. RED); canvas. add. Sprite(dot);

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

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 start. Game() { for (int x = 1; x < 10; x++){ Sprite dot=new Rectangle. Sprite(. 1, . 5); dot. set. Location(0. 5+x*. 01, 0. 5 -x*. 01); dot. set. Color(Color. RED); canvas. add. Sprite(dot); } } Run

 • • • Goal: Put shapes on top of each other Create and

• • • 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 fang 2. sprites in upper left Look at constructors – Line. Sprite wants start and end coordinates – Rectangle. Sprite wants width and height @Override public void start. Game() { Sprite dot=new Rectangle. Sprite(. 1, . 5); dot. set. Location(0. 5, 0. 5); dot. set. Color(Color. RED); Sprite line=new Line. Sprite(. 1, . 5, . 5); line. set. Location(0. 5, 0. 5); line. set. Color(Color. RED); canvas. add. Sprite(line); canvas. add. Sprite(dot); } Run

Goal (A Reach): Animate your graphics • The Fang. Engine has a method, advance.

Goal (A Reach): Animate your graphics • The Fang. Engine has a method, advance. Frame 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 start. Game() { counter = 1; } @Override public void advance. Frame(double time. Passed) { Sprite dot=new Rectangle. Sprite(. 1, . 5); dot. set. Location(0. 5+(counter*. 1), 0. 5 -(counter*. 1)); dot. set. Color(Color. RED); canvas. add. Sprite(dot); counter = counter + 1; } Run & Start Game

You try • Place 3 rectangles in the shape of a basket • Put

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