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.


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

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

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.
        addMorph: self makeFireLaserButton
        fullFrame: (LayoutFrame
                fractions: (0 @ 1 corner: 1 @ 1)
                offsets: (
                    (20 @ (vertOffsetTop negated))
                        corner: (-20 @ (vertOffsetBtm negated)))).
    vertOffsetTop := 10 + buttonHeight.
    vertOffsetBtm := 10.
        addMorph: self makeQuitGameButton
        fullFrame: (LayoutFrame
                fractions: (0 @ 1 corner: 1 @ 1)
                offsets: (
                    (20 @ (vertOffsetTop negated))
                         corner: (-20 @ (vertOffsetBtm negated)))).

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

    | panel |
    panel := RectangleMorph new borderWidth: 0;
                 color: Color white;
                 layoutPolicy: ProportionalLayout new.
    self addButtonsToPanel: 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.

    self layoutPolicy: ProportionalLayout new.
        addMorph: self makeControlPanelMorph
        fullFrame: (LayoutFrame
                fractions: (0 @ 0 corner: 0 @ 1)
                offsets: (self gameMargin @ self gameMargin
                    corner: (self gameMargin + self panelWidth) @ self gameMargin negated)).
        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