graphics with fang n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Graphics with Fang PowerPoint Presentation
Download Presentation
Graphics with Fang

Loading in 2 Seconds...

play fullscreen
1 / 15

Graphics with Fang - PowerPoint PPT Presentation


  • 118 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Graphics with Fang' - brick


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation 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
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
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
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
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
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 canvas step 2 create a dot and add to canvas
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 dot step 1 location
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 dot step 2 color
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 dot step 3 scale
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 shape more on extending and constructors
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
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
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
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
You try
  • Place 3 rectangles in the shape of a basket
  • Put a dot into that basket