Input from the Keyboard

The first demonstration enables the user to move the ellipse by pressing the arrow keys and to exit with the Esc key. Procedure KeyDownEvent changes the variables MobX and MobY that position the ellipse. An anonymous JavaScript function that runs this procedure is assigned to window.onkeydown using pure JavaScript in an asm block based on code in a forum post. The line KeyDownEvent(0); ensures that the optimizer does not remove the function.

The second demonstration shows you how to load and move an image (James Hall's koala from KoalasInSpace).

Note that JavaScript codes must be used to represent the keys.

unit Unit1;

interface

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

type
  TCanvasProject = class(TW3CustomGameApplication)
  public
    procedure ApplicationStarting; override;
    procedure KeyDownEvent(mCode : integer);
    procedure ApplicationClosing; override;
    procedure PaintView(Canvas: TW3Canvas); override;
  end;

const
  MOB_WIDTH = 20;
  MOB_HEIGHT = 15;
var
  MobX, MobY: integer;

implementation

procedure TCanvasProject.ApplicationStarting;
begin
  inherited;
  MobX := 5;
  MobY := 5;
  asm
    window.onkeydown=function(e)
    {
      TCanvasProject.KeyDownEvent(Self,e.keyCode);
    }
  end;
  KeyDownEvent(0);
  GameView.Delay := 1;           // 1 millisecond
  GameView.StartSession(False);
end;

procedure TCanvasProject.KeyDownEvent(mCode : integer);
begin
  case mCode of
    27 : Application.Terminate;
    37 : dec(MobX); // Left arrow key moves ellipse left
    38 : dec(MobY); // Up arrow key moves ellipse up
    39 : inc(MobX); // Right arrow key moves ellipse right
    40 : inc(MobY); // Down arrow key moves ellipse down
  end;
end;

procedure TCanvasProject.PaintView(Canvas: TW3Canvas);  // Repeated every millisecond
begin
  // Clear background with colour teal.
  Canvas.FillStyle := 'teal';
  Canvas.FillRect(0, 0, GameView.Width, GameView.Height);
  // Draw red ellipse.
  Canvas.FillStyle := 'red';
  Canvas.BeginPath;
  Canvas.Ellipse(MobX, MobY, MobX + MOB_WIDTH, MobY + MOB_HEIGHT); // leftX, topY, rightX, bottomY
  Canvas.ClosePath;
  Canvas.Fill;
end;

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

end.
    

Keyboard Input Demo 2 - Moving an Image

We added this image koala named koala.png to Resources so that we could load it with the LoadFromUrl procedure of a TW3Image object. We moved the variables MobX and MobY so that they are now private fields of TCanvasProject. (For simple applications like this, you can choose to make them fields or variables declared in the interface or implementation sections).

unit Unit1;

interface

uses
  SmartCL.System, SmartCL.Components, SmartCL.Application, SmartCL.Game,
  SmartCL.GameApp, SmartCL.Graphics, SmartCL.Controls.Image;

type
  TCanvasProject = class(TW3CustomGameApplication)
  private
    FImage: TW3Image;
    MobX, MobY: integer;
  public
    procedure ApplicationStarting; override;
    procedure KeyDownEvent(mCode : integer);
    procedure ApplicationClosing; override;
    procedure PaintView(Canvas: TW3Canvas); override;
  end;

implementation

procedure TCanvasProject.ApplicationStarting;
begin
  inherited;
  FImage := TW3Image.Create(nil);
  FImage.LoadFromURL('res/koala.png');
  MobX := 5;
  MobY := 5;
  asm
    window.onkeydown=function(e)
    {
      TCanvasProject.KeyDownEvent(Self,e.keyCode);
    }
  end;
  KeyDownEvent(0);
  GameView.Delay := 1;           // 1 millisecond
  GameView.StartSession(True);
end;

procedure TCanvasProject.KeyDownEvent(mCode : integer);
begin
  case mCode of
    27 : Application.Terminate;
    37 : dec(MobX); // Left arrow key moves koala left
    38 : dec(MobY); // Up arrow key moves koala up
    39 : inc(MobX); // Right arrow key moves koala right
    40 : inc(MobY); // Down arrow key moves koala down
  end;
end;

procedure TCanvasProject.PaintView(Canvas: TW3Canvas);
begin
  // Clear background with colour white.
  Canvas.FillStyle := 'white';
  Canvas.FillRect(0, 0, GameView.Width, GameView.Height);

  Canvas.DrawImageF(FImage.Handle, MobX, MobY); // Draws koala
end;

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

end.    

Programming - a skill for life!

Input from the keyboard, mouse and touch using Smart Mobile Studio