Providing Options

Introduction

We show you how easy it is to provide DIY buttons that the user can click on to select options. In this demo the enemy is simply a yellow stationary square and there is no means of attacking it! If you see no display at school, the security system might have blocked it. You can try instead this direct link to the program running on its own page.

The following two pages show you other ways of providing options using a linked form-based project, a do-it-yourself modal form, or inbuilt widgets such as sliders and combo boxes within your canvas project.

Options.html

Code of Unit1

unit Unit1;

interface

uses 
  System.Types, SmartCL.System, SmartCL.Components, SmartCL.Application,
  SmartCL.Game, SmartCL.GameApp, SmartCL.Graphics;

type
  TCanvasProject = class(TW3CustomGameApplication)
  private
    btnRed, btnBig, btnStart, Enemy: TRect;
    StartScreen: Boolean := true;
    ScreenColour: String := 'blue';
  protected
    procedure ApplicationStarting; override;
    procedure ApplicationClosing; override;
    procedure PaintView(Canvas: TW3Canvas); override;
    procedure MouseDownHandler(sender : TObject; b : TMouseButton; t : TShiftState; x, y : integer);
  end;

implementation

procedure TCanvasProject.MouseDownHandler(sender : TObject; b : TMouseButton; t : TShiftState; x, y : integer);
begin
  if StartScreen = True then
    begin
      if btnRed.ContainsPos(x, y) then
        ScreenColour := 'Red';
      if btnBig.ContainsPos(x, y) then
        begin
          ShowMessage('The enemy will be big.');
          Enemy := TRect.CreateSized(GameView.Width div 2, GameView.Height div 2, 50, 50);
        end;
      if btnStart.ContainsPos(x, y) then
        StartScreen := False;
    end;
end;

procedure TCanvasProject.ApplicationStarting;
begin
  inherited;
    GameView.OnMouseDown := MouseDownHandler;
    btnRed := TRect.CreateSized(20, 20, 40, 20);
    btnBig := TRect.CreateSized(80, 20, 40, 20);
    btnStart := TRect.CreateSized(140, 20, 40, 20);
    Enemy := TRect.CreateSized(GameView.Width div 2, GameView.Height div 2, 25, 25);
    GameView.Delay := 20;
    GameView.StartSession(False);
end;

procedure TCanvasProject.ApplicationClosing;
begin
  GameView.EndSession;
  inherited;
end;
 
procedure TCanvasProject.PaintView(Canvas: TW3Canvas);
begin
  // Clear background
  Canvas.FillStyle := ScreenColour;
  Canvas.FillRectF(0, 0, GameView.Width, GameView.Height);
  if StartScreen = True then
    begin
      // Draw buttons and captions
      Canvas.FillStyle := 'rgb(120, 120, 120)';
      Canvas.FillRect(btnRed);
      Canvas.FillRect(btnBig);
      Canvas.FillRect(btnStart);
      Canvas.FillStyle := 'white';
      Canvas.FillText('Red', btnRed.Left + 10, btnRed.Bottom - 5);
      Canvas.FillText('Big', btnBig.Left + 10, btnBig.Bottom -5);
      Canvas.FillText('Start', btnStart.Left + 10, btnStart.Bottom - 5);
    end
  else
    begin
      Canvas.FillStyle := 'yellow';
      Canvas.FillRect(Enemy);
    end;
end;

end.

Programming - a skill for life!

Useful for games, with drawing routines (including transforms and text fonts), images, sprites and WebGL 3D graphics. Now includes Box2D physics and rendering by Pixi.js.