Using Inbuilt Buttons to Move an Object

An alternative to the DIY buttons on the preceding page is to use the inbuilt TW3Buttons. The performance might not be as slick but they are visually more appealing and the code is appreciably shorter.

We copied the arrow characters for the button captions from this useful page. In our section on sprites we set up TW3Buttons more concisely with a procedure and use them to move and rotate an image.

The code of the canvas application follows the demonstration.

If you do not see the demonstration, your school security system might have blocked it. Click here to try it on a separate page.

Smart Pascal Code

This code compiles to the above demonstration using Version 2.2 of Smart Mobile Studio. If you add SmartCL.Types.Graphics to the uses clause it will compile using Version 3.0, but in that case the buttons do not work. See the previous page for code that compiles effectively with Version 3.0. It uses DIY buttons rather than inbuilt TW3Buttons (which are designed for use on forms).

unit Unit1;

interface

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

type
  TCanvasProject = class(TW3CustomGameApplication)
  private
    const SCENE_WIDTH = 300;
    const SCENE_HEIGHT = 250;
    const MOB_WIDTH = 10;
    const MOB_HEIGHT = 10;
    const X_SPEED = 2;
    const Y_SPEED = 2;
    MousePressedLeft: Boolean := False;
    MousePressedRight: Boolean := False;
    MousePressedUp: Boolean := False;
    MousePressedDown: Boolean := False;
    MobRect, Scene: TRect;
    btnLeft, btnRight, btnUp, btnDown: TW3Button;
  protected
    procedure ApplicationStarting; override;
    procedure ApplicationClosing; override;
    procedure PaintView(Canvas: TW3Canvas); override;
  end;

implementation

procedure TCanvasProject.ApplicationStarting;
begin
  inherited;
  GameView.Delay := 5;
  Scene := TRect.CreateSized(0, 0, SCENE_WIDTH, SCENE_HEIGHT);
  MobRect := TRect.CreateSized(50, 50, 10, 10);

  btnLeft := TW3Button.Create(document);
  btnLeft.Caption := '←';
  btnLeft.Width := 40;
  btnLeft.Left := 5;
  btnLeft.Top := SCENE_HEIGHT + 5;
  btnLeft.OnMouseDown := lambda  MousePressedLeft := true; end;
  btnLeft.OnMouseUp := lambda MousePressedLeft := false; end;
  btnLeft.OnTouchBegin := lambda MousePressedLeft := true; end;
  btnLeft.OnTouchEnd := lambda MousePressedLeft := false; end;

  btnRight := TW3Button.Create(document);
  btnRight.Caption := '→';
  btnRight.Width := 40;
  btnRight.Left := 55;
  btnRight.Top := SCENE_HEIGHT + 5;
  btnRight.OnMouseDown := lambda  MousePressedRight := true; end;
  btnRight.OnMouseUp := lambda MousePressedRight := false; end;
  btnRight.OnTouchBegin := lambda MousePressedRight := true; end;
  btnRight.OnTouchEnd := lambda MousePressedRight := false; end;

  btnUp := TW3Button.Create(document);
  btnUp.Caption := '↑';
  btnUp.Width := 40;
  btnUp.Left := 105;
  btnUp.Top := SCENE_HEIGHT + 5;
  btnUp.OnMouseDown := lambda  MousePressedUp := true; end;
  btnUp.OnMouseUp := lambda MousePressedUp := false; end;
  btnUp.OnTouchBegin := lambda MousePressedUp := true; end;
  btnUp.OnTouchEnd := lambda MousePressedUp := false; end;

  btnDown := TW3Button.Create(document);
  btnDown.Caption := '↓';
  btnDown.Width := 40;
  btnDown.Left := 155;
  btnDown.Top := SCENE_HEIGHT + 5;
  btnDown.OnMouseDown := lambda  MousePressedDown := true; end;
  btnDown.OnMouseUp := lambda MousePressedDown := false; end;
  btnDown.OnTouchBegin := lambda MousePressedDown := true; end;
  btnDown.OnTouchEnd := lambda MousePressedDown := false; end;

  GameView.StartSession(False);
end;

procedure TCanvasProject.ApplicationClosing;
begin
  GameView.EndSession;
  inherited;
end;

procedure TCanvasProject.PaintView(Canvas: TW3Canvas);
begin
  // Clear background
  Canvas.FillStyle := 'rgb(0, 0, 99)';
  Canvas.FillRectF(Scene);
  // Move mob if button pressed and if a move would not take it outside the scene
  Canvas.FillStyle := 'rgb(99, 0, 0)';
  if MousePressedLeft and (MobRect.Left > X_SPEED) then
    MobRect.MoveBy(-X_SPEED, 0)
  else if MousePressedRight and (MobRect.Right + X_SPEED < SCENE_WIDTH) then
    MobRect.MoveBy(X_SPEED, 0)
  else if MousePressedUp and (MobRect.Top > Y_SPEED) then
    MobRect.MoveBy(0, -Y_SPEED)
  else if MousePressedDown and (MobRect.Bottom + Y_SPEED < SCENE_HEIGHT)  then
    MobRect.MoveBy(0, Y_SPEED);
  // Draw white mob
  Canvas.FillStyle := 'white';
  Canvas.FillRectF(MobRect);
end;

end.