Platformer: Getting Started

Today we will build a basic platformer game. We will start with a player and a platform, and we will have the player "fall" until it hits the "ground" (or platform).

import greenfoot.*;  // (World, Actor, GreenfootImage, Greenfoot and MouseInfo)

/**
 * Write a description of class Player here.
 * 
 * @author (your name) 
 * @version (a version number or a date)
 */
public class Player extends Actor
{
    private int vSpeed = 0;
    private int acceleration = 1;

    /**
     * Act - do whatever the Player wants to do. This method is called whenever
     * the 'Act' or 'Run' button gets pressed in the environment.
     */
    public void act() 
    {
        checkFall();
    }   
    
    public void fall()
    {
        setLocation(getX(), getY() + vSpeed);
        if(vSpeed <=9)
        {
            vSpeed = vSpeed + acceleration;
        }  
    }

    public boolean onGround()
    {
        int spriteHeight = getImage().getHeight();
        int lookForGround = (int)(spriteHeight/2) + 5;
        Actor ground = getOneObjectAtOffset(0, lookForGround, Platform.class);
        if(ground == null)
        {
            return false;
        }
        else
        {
            moveToGround(ground);
            return true;
        }
    }

    public void moveToGround(Actor ground)
    {
        int groundHeight = ground.getImage().getHeight();
        int newY = ground.getY() - (groundHeight + getImage().getHeight())/2;
        setLocation(getX(), newY);
    }
    
    public void checkFall()
    {
        if(onGround())
        {
            vSpeed = 0;
        }
        else
        {
            fall();
        }
    }
}

Reverse-Engineer a Game

So this week we have been working on remaking an existing game.  The idea is that you can learn a lot of programming -- and a lot about what you don't know yet.

Today [Friday] I am at the doctor, so please work on your assignments.

Finally, please email me your deviantART address so I can grade your Photoshop projects!  (Which I should have done before grades were due yesterday)  :D

Photoshop: Java Game Cover Graphic

Today and tomorrow we will be creating a Title Page / Splash Page graphic and a "Game Over" page for one of your video games.

COVER PAGES:

• To begin, find the size of your "World" in your program.  I typically use a 640x480 or 800x600 world, but (as in the Breakout example below) I do sometimes vary.
• Open Photoshop and do FILE > NEW...
• Enter the size of your document (in pixels NOT inches) with a resolution of 72
• I usually start with a background color by choosing a color and filling the background with the "fill bucket".
• Then I find a font that I like that fits with my game style.
• Only then do I begin looking for royalty free graphics that I can use on my cover.

Sometimes I do game Title Pages and Game Over pages in sets:

Finally, here are two different examples of a Game Over screen.  The red one is a standard text screen and the green one has a "Winners Circle" platform where I move the winning tank at the end of the race.

Get a deviantART Page

One way of showcasing your work and getting feedback from others around the world is to create a deviantART page.  While your Blogger portfolio is a chronological, streamlined way for me to grade all of your projects, a deviantART page gets you attention, feedback, etc.  It also provides a backup of your photography and allows you to connect with others who have similar interests or styles.

After you have created your page, update your profile.  You can use a picture of yourself or one of your projects as a profile picture if you would like.

Next, go to askgriff.deviantart.com and follow me.  That will let me follow you back and I can send you a Llama badge for making it that far!  :)

Next, upload your projects.  Give good descriptions and choose the best category for each.

Finally, send me an email (griff@kvusd.org) with your deviantART page address.

Photoshop: Facebook Cover Photo

Today we will be creating a cover photo for a Facebook page:

• Width: 851 Pixels (NOT Inches)
• Height: 315 (NOT Inches)
• Resolution: 100 PPI (Pixels Per Inch)

Here is the cover photo I created for my Facebook:

 Notice, however, that you have to keep your profile picture in mind when designing your picture:

Photoshop: Collage Wallpaper

Today and tomorrow we are going to build a collage that we can use as a computer wallpaper. The collage must have a theme, include several images, have some sort of text (i.e. a title), and fit the dimensions of a typical computer screen.

You will have the next two days to build your collage.

1. Create a new Photoshop document using your choice of the following dimensions:  (Dimensions from W3Schools 9/19)
1. 1366x768 (18.7% of computer screens use this resolution) 
2. 1024x768  (13% use this resolution)
3. 1280x1024  (11.5%)
4. 1280x800 (10.7%)
5. 1440x900 (8.1%)
2. Sometimes it's better to fill your canvas with a certain color (i.e. black, blue, or green) to serve as a base for your pasted images, although you can create some interesting collages by using a textured background or even an image (i.e. the example showing Asian writing).
3. Begin finding images [within your theme as well as being classroom appropriate] and save them to a folder on your Thawspace or USB drive.  Make sure the images are large enough that you don't have to stretch them on your canvas.
4. Begin "pasting in" images and dragging them to the best fit on your canvas.
5. You may want to use a soft, feathered brush as an eraser and soften the edges of your images.
6. You may also want to try adjusting the opacity on some of your images [layers] to help the layers "melt together" better.
7. You may even try a color gradient overlay with low opacity for some interesting effects.
8. Choose a font that fits your theme, and place a title on your page.
9. Choose a small font and put your name on your new artwork.
10. Try some layer styles (drop shadows, bevel & emboss, stroke, etc.) to improve your text layer.

Finally, make sure you save your file as a PSD (Photoshop Document) as well as a JPEG, then upload the JPEG to your Blogger portfolio.

---

Here are some examples of Photoshop collages:

Photoshop: Adjusting Levels

ADJUSTING LEVELS

Next we are going to work with the LEVELS command in Photoshop:  

1. Click on the image below, then right-click it and select COPY.  
2. Open PhotoShop 
3. Select FILE > NEW
4. PASTE
5. Go to IMAGE > ADJUSTMENTS > LEVELS   **
6. Drag the "white triangle" and the "black triangle" to the ends of the "mountain".
7. Check/Uncheck Preview to see the difference.

** The biggest problem with making changes to your image in this fashion is that it "destroys" the original.  One way that photographers get around this is to make a copy of the "layer" and then work with a copy.  An easier way is to use an "Adjustment Layer".  If you click the black/white circle at the bottom of the "Layers" tab, you can add an "Adjustment Layer" to the current image.  This will allow you to change many different settings (color balance, exposure, hue/saturation, etc.) while leaving the original image intact.  Try using this with the Levels adjustment to do the same thing.

In the following examples, we will use the Adjustment Layer with Levels, but we will also explore things like Hue and Saturation.  (Click the image for a full-size copy to use)

As you can see, simply playing with the levels, tone, and color balance of an image can give you a better photograph.