Geometry2D component

Contents:

1. Supported nodes

Note that 2D objects are just a special case of 3D objects. You can use all the 3D nodes to render 2D graphics as well. The nodes described here just place everything at a Z = zero plane (but you can still rotate and translate them in 3D, to construct larger models in 3D).

• Rectangle2D (Pascal API: TRectangle2DNode)

  Rectangle.

• Circle2D (Pascal API: TCircle2DNode)

  Circle (empty).

• Disk2D (Pascal API: TDisk2DNode)

  Disk (filled circle).

• Polyline2D (Pascal API: TPolyline2DNode)

  Line segments.

• Polypoint2D (Pascal API: TPolypoint2DNode)

  Points.

• TriangleSet2D (Pascal API: TTriangleSet2DNode)

  Triangles.

2. Example in Pascal

This is an example how to construct in Pascal a scene with TRectangle2DNode, TLineSetNode, and rotate it:

{ Build 2D scene with a textured Rectangle2D and outline using LineSet,
  and rotate it. }
 
uses CastleWindow, CastleViewport, CastleScene, X3DNodes, CastleFilesUtils,
  CastleColors, CastleVectors, CastleTimeUtils, CastleSceneCore,
  CastleUiControls;
 
var
  LifeTime: TFloatTime;
  Scene: TCastleScene;
  Transform: TTransformNode;
 
function BuildScene: TX3DRootNode;
var
  RectShape: TShapeNode;
  RectGeometry: TRectangle2DNode;
  RectTexture: TImageTextureNode;
 
  OutlineShape: TShapeNode;
  OutlineCoords: TCoordinateNode;
  OutlineGeometry: TLineSetNode;
  Appearance: TAppearanceNode;
  Material: TMaterialNode;
begin
  Transform := TTransformNode.Create;
 
  RectGeometry := TRectangle2DNode.CreateWithShape(RectShape);
  RectGeometry.Size := Vector2(200, 200);
 
  RectTexture := TImageTextureNode.Create;
  RectTexture.SetUrl(['castle-data:/face.png']);
 
  RectShape.Appearance := TAppearanceNode.Create;
  RectShape.Appearance.Texture := RectTexture;
 
  Transform.AddChildren(RectShape);
 
  OutlineCoords := TCoordinateNode.Create;
  OutlineCoords.SetPoint([
    // Z = 1 to be on top of RectShape that has Z = 0
    Vector3(-100, -100, 1),
    Vector3( 100, -100, 1),
    Vector3( 100,  100, 1),
    Vector3(-100,  100, 1),
    Vector3(-100, -100, 1)
  ]);
 
  OutlineGeometry := TLineSetNode.CreateWithShape(OutlineShape);
  OutlineGeometry.Coord := OutlineCoords;
  OutlineGeometry.SetVertexCount([OutlineCoords.FdPoint.Count]);
 
  Material := TMaterialNode.Create;
  Material.EmissiveColor := YellowRGB;
 
  Appearance := TAppearanceNode.Create;
  Appearance.Material := Material;
  OutlineShape.Appearance := Appearance;
 
  Transform.AddChildren(OutlineShape);
 
  Result := TX3DRootNode.Create;
  Result.AddChildren(Transform);
end;
 
type
  { View to contain whole UI and to handle events, like updates. }
  TMyView = class(TCastleView)
    procedure Update(const SecondsPassed: Single; var HandleInput: boolean); override;
  end;
 
procedure TMyView.Update(const SecondsPassed: Single;
  var HandleInput: boolean);
begin
  inherited;
 
  LifeTime := LifeTime + Container.Fps.SecondsPassed;
 
  // update rotation every frame
  Transform.Rotation := Vector4(0, 0, 1, LifeTime * 2);
 
  // Note: in this case, since you just rotate whole Scene,
  // you could also rotate it like this:
  //Scene.Rotation := Vector4(0, 0, 1, LifeTime * 2);
  // There's no need for TTransformNode in this case.
end;
 
var
  Window: TCastleWindow;
  Viewport: TCastleViewport;
  MyView: TMyView;
begin
  Window := TCastleWindow.Create(Application);
  Window.Open;
 
  MyView := TMyView.Create(Application);
  Window.Container.View := MyView;
 
  Viewport := TCastleViewport.Create(Application);
  Viewport.Setup2D;
  Viewport.FullSize := true;
  Viewport.Camera.Orthographic.Height := 1000;
  Viewport.Camera.Orthographic.Origin := Vector2(0.5, 0.5);
  MyView.InsertFront(Viewport);
 
  Scene := TCastleScene.Create(Application);
  Scene.Load(BuildScene, true);
 
  Viewport.Items.Add(Scene);
 
  Application.Run;
end.

// This is a complete source code that you can compile. Download it!

You can use any image file to test it. The above code loads castle-data:/face.png which means we expect to find a file face.png in the data subdirectory within your project. You can really use any image file, for examples this: