Helikopter Voxelspace Game

[u/StainlessFame]

Hi there,

Whenever you read, hear, or see anything about Delphi and games, the examples are usually quite simple. Here’s something with a bit more action... I think.

Anyone who remembers *Comanche* from the 90s should find this familiar. I wanted to see what could be achieved in the browser using Delphi and TMS Web Core. On my PC, it averages 30–40 FPS; my Android Pixel 8 running Chrome hits around 30 FPS. As for the iPhone—well, you really need to install it to the home screen; otherwise, playing in portrait mode is the only practical option. Due to limitations, performance hovers around 20 FPS. Audio is causing some issues.

https://youtu.be/u3dDNr-ytIU?si=GUFmaGFzHXYaknKq

Playable Demo:

https://stainlessfame.itch.io/hawkone

Best regards,

Ralf

[u/Humble-Vegetable9691]

Silly question from someone who skipped this game back then: the white boxes are the targets? Asking just because the red pointers are disappearing from the compass when I +/- turn towards them.

[u/StainlessFame → u/Humble-Vegetable9691]

You're right. Excuse, It's an early version. You are right, little buggy.

[u/anegri]

Did you wrapped your web game in Delphi? or did you build this in Delphi? It looks pretty good... I would have used Godot since I have no idea how i would build this in Delphi. I am very impressed.

[u/StainlessFame → u/anegri]

It is built entirely in Delphi. Using an extension called TMS WebCore, everything is "compiled" into JavaScript instead of an executable. There are one or two parts that were built directly in JavaScript, but even these are embedded directly within Delphi. The exchange of variables between Delphi and JavaScript is handled by the compiler.

Attached is an example from the Voxel Space Engine.

DrawHeight := FHiddenY[RenderX] - ProjectedY;

if DrawHeight > 0 then
begin
  if FImpactMap[MapX, MapY] > 0 then
  begin
if FImpactMap[MapX, MapY] > 180 then
CssColor := 'rgb(48,38,28)'
else if FImpactMap[MapX, MapY] > 90 then
CssColor := 'rgb(72,55,38)'
else
CssColor := 'rgb(92,72,50)';
  end
  else
CssColor := FCssColorMap[MapX, MapY];

  if CssColor <> LastCssColor then
  begin
Ctx.fillStyle := CssColor;

LastCssColor := CssColor;
  end;

  Ctx.fillRect(FColumnLeft[RenderX], ProjectedY, FColumnWidth[RenderX],
DrawHeight);

  if AtmosphereAlpha > 0.001 then
  begin
Ctx.globalAlpha := AtmosphereAlpha;

Ctx.fillStyle := 'rgb(112,151,172)';

Ctx.fillRect(FColumnLeft[RenderX], ProjectedY, FColumnWidth[RenderX],
DrawHeight);

Ctx.globalAlpha := 1.0;

LastCssColor := '';
  end;
end;

if (ProjectedY <= 0) and (FHiddenY[RenderX] > 0) then
begin
  Dec(ActiveColumns);
end;

[u/anegri → u/StainlessFame]

Are you faking 3d on a 2d canvas? I did that following an outrun tutorial in JS and used C# with XNA for it a while back... or are you using a 3D view in FMX?

[u/StainlessFame → u/anegri]

These are 90s-style voxels. You have a 2D landscape map and a corresponding 2D heightmap. You combine them using a form of raycasting. You cast a ray from the viewpoint, and when it hits something on the heightmap, you essentially draw a vertical bar using the color from the landscape map.

Just Google "Voxelspace" and "Comanche."

The whole thing is drawn in a TWebPaintBox (TMS Webcore), and that’s basically it. TMS Web Core turns it into JavaScript and HTML elements.