Graphics with Fang

1. 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

2. 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

3. 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.*;

4. 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 • }

5. 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

6. 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 }

7. 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

8. 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

9. 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

10. 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

11. 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

12. 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

13. 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

14. 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

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