Section 4

Add A Counter and Window Colors

It's time to add some really slick looking features. I want to jazz-up the colors of the interface and add an LED panel that shows how long the laser beam path is while you are playing. A little bit of "eye candy" is always a good thing when creating a game.

Close any LaserGame morphs you have open before beginning the next section. We're going to change the layout and colors of a few essential components and you could get confusing results if a "live" morph was trying to repaint while we change this code.

The first thing I want to do is add a small margin all the way around our game. Make the rectangle that holds the control panel and game board slightly larger with a margin, or border, all the way around. We will begin by adding code to the LaserGame class. Here's the first new method. Add this instance method to the LaserGame class.

gameMargin
    ^4

Modify the #calculatedExtent method to account for this new margin around our morphs.

calculatedExtent
    | pt |
    pt := self boardForm extent.
    pt := pt + (self panelWidth@0).
    pt := pt + (2 * self gameMargin).
    ^pt

Since we're about to add some new control features, we should perform some light refactoring. Add this new instance method to LaserGame class.

addButtonsToPanel: panel
    | buttonHeight vertOffsetTop vertOffsetBtm |
    buttonHeight := 26.
    vertOffsetTop := 10 + buttonHeight + 10 + buttonHeight.
    vertOffsetBtm := 10 + buttonHeight + 10.
    panel
        addMorph: self makeFireLaserButton
        fullFrame: (LayoutFrame
                fractions: (0 @ 1 corner: 1 @ 1)
                offsets: (
                    (20 @ (vertOffsetTop negated))
                        corner: (-20 @ (vertOffsetBtm negated)))).
    vertOffsetTop := 10 + buttonHeight.
    vertOffsetBtm := 10.
    panel
        addMorph: self makeQuitGameButton
        fullFrame: (LayoutFrame
                fractions: (0 @ 1 corner: 1 @ 1)
                offsets: (
                    (20 @ (vertOffsetTop negated))
                         corner: (-20 @ (vertOffsetBtm negated)))).
    ^panel

We are pulling the code to add the buttons into a separate method. Now we modify the #makeControlPanelMorph method.

makeControlPanelMorph
    | panel |
    panel := RectangleMorph new borderWidth: 0;
                 color: Color white;
                 layoutPolicy: ProportionalLayout new.
    self addButtonsToPanel: panel.
    ^panel

Next we change #setupMorphs. I want to move the control panel to be on the left side and the game board on the right. We also need to account for the "gameMargin" here.

setupMorphs
    self layoutPolicy: ProportionalLayout new.
    self
        addMorph: self makeControlPanelMorph
        fullFrame: (LayoutFrame
                fractions: (0 @ 0 corner: 0 @ 1)
                offsets: (self gameMargin @ self gameMargin
                    corner: (self gameMargin + self panelWidth) @ self gameMargin negated)).
    self
        addMorph: self makeGameBoardMorph
        fullFrame: (LayoutFrame
                fractions: (0 @ 0 corner: 1 @ 1)
                offsets: ((self gameMargin + self panelWidth) @ self gameMargin
                    corner: self gameMargin negated @ self gameMargin negated)).

Index Page Next Page

Copyright © 2007, 2008, 2009, 2010 Stephan B Wessels    stevewessels@me.com