First Scene

Open a window and add a node.

▶ Run in browser

Tags: beginner tutorial

First Scene

Your first SimVX scene in under thirty lines. By the end you will have opened a window, drawn a pulsing circle, and seen the three lifecycle hooks every node has access to.

Step 1: Subclass Node2D

Every visible thing in SimVX is a node. Node2D is the 2D-aware variant: it knows about position, rotation, and lets you override on_draw() to issue immediate-mode draw commands.

from simvx.core import Node2D

class FirstScene(Node2D):
    pass

Step 2: Hook into the frame loop

Three hooks fire automatically once the node is in the scene tree:

  • on_ready(): called once after the node enters the tree. Initialise state here.

  • on_process(dt): called every frame with the seconds since the last frame.

  • on_draw(renderer): called every frame after on_process. Issue draw commands here.

def on_ready(self):
    self.t = 0.0

def on_process(self, dt: float):
    self.t += dt

def on_draw(self, renderer):
    renderer.draw_circle((400, 300), 80, colour=(0.4, 0.8, 1.0, 1.0))

Step 3: Launch it

App creates a Vulkan-backed window and runs your scene tree.

from simvx.graphics import App

App(title="First Scene", width=800, height=600).run(FirstScene())

What’s next

  • Add input handling: see the Pong example for input actions and signals.

  • Add a textured quad: see the Sprite example.

  • Try a 3D scene: see the Rotating Cube example.

Source

 1"""First Scene: Open a window and add a node.
 2
 3A two-minute tour: subclass `Node2D`, override `on_draw()` to paint a circle,
 4launch with `App`. The companion README explains the lifecycle hooks called
 5along the way.
 6
 7# /// simvx
 8# tags = ["beginner", "tutorial"]
 9# ///
10"""
11
12from simvx.core import Node2D
13from simvx.graphics import App
14
15WIDTH, HEIGHT = 800, 600
16
17
18class FirstScene(Node2D):
19    def on_ready(self):
20        self.t = 0.0
21
22    def on_process(self, dt: float):
23        self.t += dt
24
25    def on_draw(self, renderer):
26        cx, cy = WIDTH / 2, HEIGHT / 2
27        radius = 80 + 20 * (1 + (self.t * 2) % 2 - 1)
28        renderer.draw_circle((cx, cy), radius, colour=(0.4, 0.8, 1.0, 1.0))
29        renderer.draw_text("Welcome to SimVX", (cx - 110, cy + 140), scale=2, colour=(1.0, 1.0, 1.0))
30
31
32if __name__ == "__main__":
33    App(title="First Scene", width=WIDTH, height=HEIGHT).run(FirstScene())