Assignments:Sprite Mosaic

From FANG

Contents 1 Introduction 2 About Sprites 2.1 Basic Sprites 3 Requirements

Introduction

Are video games art? This assignment is about exploring the intersection of video games and art while also learning about various sprites available in the FANG Engine. In this assignment you can combine your technical and creative skills. You are encouraged to work in pairs on this assignment.

Note: this assignment uses a beta version of the FANG Engine only available on sandbox.fangengine.org, playground.fangengine.org, and ggc.javawide.org.

About Sprites

In this assignment, you must make art out of the basic sprites available in the FANG Engine. Sprites are the visual elements on the screen in a game. All sprites have four basic properties:

• shape - the outline of the sprite. By default, all sprites are filled
• size - how much of the screen the sprite takes up. Typical values are between 0 (invisibly small) and 1 (full screen).
• rotation - how the sprite is oriented. This can be set in degrees, revolutions, or radians.
• color - the shade used to fill the sprite. Colors are typically obtained from the Palette.

Two examples can help you learn about sprites:

• Sprite Type Code - run this example to see the code for making various types of sprites
• Color Swatches - run this example to see how to set the color of sprites

Basic Sprites

• OvalSprite
  The OvalSprite is the sprite you want to use when you want an oval. When you make the sprite, you'll need to provide the width and height. If the width and height are the same, you have a circle. The width and height you provide tells how big the sprite is initially. For example, an oval sprite that has width 0.25, and height 0.25 takes up one quarter of the screen. You can also use the setSize method to make the oval as big or as small as you want. The size you specify is the size of the larger of width and height.
• RectangleSprite
  The RectangleSprite is the sprite you want to use when you want a rectangle. Like when you make the OvalSprite, you'll need to provide the width and height. If the width and height are the same, you have a square. The width and height you provide tells how big the sprite is initially. For example, a square that has width 0.5, and height 0.5 takes up half of the screen. You can also use the setSize method to make the rectangle as big or as small as you want. The size you specify is the size of the larger of width and height.
• PolygonSprite
  The PolygonSprite is a very flexible sprite. There are two ways of making it:
  • Make a PolygonSprite with just one parameter and you are making a regular polygon where the number you send represents the number of sides. For example, there is no TriangleSprite because you can just make a PolygonSprite with 3 sides. The default regular polygon size is the full screen.
  • Make a PolygonSprite with at least 3 pairs of coordinates and you are making your own shape by specifying the vertices. When you make a polygon in this way, the first two parameters passed represent the x and y locations of the first vertex, the next two represent the x and y locations of the second vertex and so forth. Send as many pairs of coordinates as you want, but make sure to supply them in pairs (i.e. you cannot make a PolygonSprite this way with an odd number of parameters).
• LineSprite
  Use the LineSprite when you want just a single line. When you make the line, you'll need to send it two coordinates corresponding to the endpoints. The default line is very thin. You can set the thickness by calling the setLineThickness method and specifying the width. The default width is about 1/100th of the screen (0.01). You may want to try setting the line to be thicker, about 1/10th the screen (0.1).
• PieSprite
  Use the PieSprite when you want to make shapes like a partially eaten pizza pie. When you make the PieSprite, you'll need to specify four parameters. The first two parameters are the width and height and function just like is done with the OvalSprite. The second two parameters indicate the starting and ending angles in degrees. The degrees should be between 0 and 360.
• ArcSprite
  Use the ArcSprite when you want to make shapes like an oval that has been cut off. When you make the ArcSprite, you'll need to specify four parameters. The first two parameters are the width and height and function just like is done with the OvalSprite. The second two parameters indicate the starting and ending angles in degrees. The degrees should be between 0 and 360.
• StringSprite
  Use the StringSprite when you want to display text on the screen. The StringSprite just needs one piece of information - the sequence of characters you want to display. Be sure to put these in quotes when you send them to the StringSprite. You can position and size StringSprites in several different ways:
  • centerJustify - this is the default alignment where the position represents the horizontal and vertical center of the string.
  • leftJustify - makes the position of the sprite represent the leftmost position. All of the string will appear to the right of the position. This type of alignment is most useful if you want to align the sprite on the left side of the screen. Calling leftJustify does not affect the vertical alignment.
  • rightJustify - makes the position of the sprite represent the rightmost position. All of the string will appear to the left of the position. This type of alignment is opposite of leftJustify. Use rightJustify when you want to place strings on the right side of the screen. Calling rightJustify does not affect the vertical alignment.
  • topJustify - makes the position of the sprite represent the topmost position. All of the string will appear below the position. This type of alignment is most useful if you want to align the sprite on the top of the screen. Calling topJustify does not affect the horizontal alignment.
  • bottomJustify - makes the position of the sprite represent the bottommost position. All of the string will appear above the position. This type of alignment is opposite of topJustify. Use bottomJustify when you want to place strings at the bottom of the screen. Calling bottomJustify does not affect the horizontal alignment.
  • setLineHeight - this sets the height of an individual line of text. Call this method if you want several different StringSprites to appear as the same font size.
  • setHeight - this sets the overall height of the text. If the text is composed of a single line, calling this method has the same effect as calling setLineHeight. This method is useful to call when you want text to fit into an exact height.
  • setWidth - this sets the width of the widest part of the text.
• ButtonSprite
  Use ButtonSprite when you want to add a button to the screen. When you make a button, you need to specify the text of the button in the same way you do with StringSprite. Unlike StringSprite, the ButtonSprite has two ovals around it and can respond to mouse clicks. Enabling the interaction is beyond the scope of this assignment, but you'll learn about it later.
• ImageSprite
  Use ImageSprite when you want to display a picture. The FANG Engine supports gif, jpg, and png. Do not use bmp as these are uncompressed and take a long time to load. The ways of manipulating an ImageSprite are quite extensive and beyond the scope of this assignment. The basic way to create an ImageSprite is to supply the name of the image file when you create the ImageSprite. On JavaWIDE enabled sites, you simply name the image after uploading it. On other development environments, you typically create a resources folder and put all of you media in there and reference the image like "resources/ImageName.jpg" for example.

Requirements

You original art must have the following (for a total of 100 possible points):

• OvalSprite - two, one a circle and one oblong (10 pts)
• RectangleSprite - two, one a square and one with a longer side (10 pts)
• PolygonSprite - four, two regular polygons and two custom shapes (20 pts)
• LineSprite - two lines, one thicker and one thinner (10 pts)
• PieSprite - two, each with a different shape or angle (10 pts)
• ArcSprite - two, each with a different shape or angle (10 pts)
• StringSprite - two, a title top justified, artist name bottom justified (10 pts)
• ImageSprite - two, each using a different image (10 pts)
• Color - use the palette to make your sprites at least 2 different colors (10 pts)