Update visualization example

examples/wasm-visualizations/Main.gd

@@ -1,18 +1,20 @@
 extends Node
 
-const sizes: PoolVector2Array = PoolVector2Array([Vector2(50, 50), Vector2(100, 100), Vector2(200, 200), Vector2(400, 400), Vector2(800, 800), Vector2(1600, 1600)])
-const modules: PoolStringArray = PoolStringArray(["interference", "mandelbrot", "life", "wave", "sort"])
+const sizes: PackedVector2Array = [Vector2(50, 50), Vector2(100, 100), Vector2(200, 200), Vector2(400, 400), Vector2(800, 800), Vector2(1600, 1600)]
+const modules: PackedStringArray = ["interference", "mandelbrot", "life", "wave", "sort"]
 
 var texture: ImageTexture = ImageTexture.new()
 var image: Image = Image.new()
 var module: String = modules[0]
 var size: Vector2 = sizes[2]
 var ticks: int = 0
-onready var wasm: Wasm = Wasm.new()
+@onready var tween: Tween
+@onready var wasm: Wasm = Wasm.new()
 
 func _ready():
+	Engine.max_fps = 60
 	$TextureRect.texture = texture
-	seed(OS.get_system_time_msecs())
+	seed(int(Time.get_unix_time_from_system()))
 	_change_module()
 	_change_size()
 	_show_info()
@@ -28,19 +30,18 @@ func _gui_input(event):
 	if !(event is InputEventMouseButton) or !event.pressed: return
 	if get_node_or_null("Intro"): $Intro.queue_free()
 	if !("interact" in wasm.inspect().export_functions): return
-	var p = _localize_aspect_fit(event.position, $TextureRect.rect_size, size)
+	var p = _localize_aspect_fit(event.position, $TextureRect.size, size)
 	if p.x < 0.0 or p.x > 1.0 or p.y < 0.0 or p.y > 1.0: return
-	wasm.function("interact", [p.x, p.y, 1.0 if event.button_index == BUTTON_LEFT else 0.0 ])
+	wasm.function("interact", [p.x, p.y, 1.0 if event.button_index == MOUSE_BUTTON_LEFT else 0.0 ])
 
 func _process(_delta):
 	$"%LabelFPS".text = "%d FPS" % Performance.get_monitor(Performance.TIME_FPS)
-	wasm.function("update", [ticks, OS.get_ticks_msec() / 1000.0])
+	wasm.function("update", [ticks, Time.get_ticks_msec() / 1000.0])
 	ticks += 1
 
 func _load_wasm(path: String):
-	var file = File.new()
-	file.open(path, File.READ)
-	var buffer = file.get_buffer(file.get_len())
+	var file = FileAccess.open(path, FileAccess.READ)
+	var buffer = file.get_buffer(file.get_length())
 	var imports = { "functions": {
 		"env.abort": [self, "_abort"],
 		"env.draw_image": [self, "_draw_image"],
@@ -68,21 +69,22 @@ func _change_size(increment: int = 0):
 	if index < 0 or index >= len(sizes): return
 	size = sizes[index]
 	wasm.function("resize", [int(size.x), int(size.y)])
-	image.create(int(size.x), int(size.y), false, Image.FORMAT_RGBA8)
+	image = Image.create(int(size.x), int(size.y), false, Image.FORMAT_RGBA8)
+	texture.set_image(image)
 	ticks = 0
 
 func _change_fps_cap(_increment: int = 0):
-	Engine.target_fps = 0 if Engine.target_fps else 60
+	Engine.max_fps = 0 if Engine.max_fps else 60
 
 func _show_info():
 	$"%LabelModule".text = module
 	$"%LabelSize".text = "%d X %d" % [size.x, size.y]
-	$Tween.remove_all()
-	$Tween.interpolate_property($Info, "modulate:a", $Info.modulate.a, 1.0, 0.2, Tween.TRANS_CUBIC, Tween.EASE_IN_OUT, 0.0)
-	$Tween.interpolate_property($Info, "rect_position:y", $Info.rect_position.y, 12, 0.2, Tween.TRANS_CUBIC, Tween.EASE_IN_OUT, 0.0)
-	$Tween.interpolate_property($Info, "modulate:a", 1.0, 0.0, 0.6, Tween.TRANS_CUBIC, Tween.EASE_IN_OUT, 6.0)
-	$Tween.interpolate_property($Info, "rect_position:y", 12, -98, 0.6, Tween.TRANS_CUBIC, Tween.EASE_IN_OUT, 6.0)
-	$Tween.start()
+	if tween: tween.kill()
+	tween = create_tween().set_trans(Tween.TRANS_CUBIC)
+	tween.tween_property($Info, "modulate:a", 1.0, 0.2)
+	tween.parallel().tween_property($Info, "position:y", 12, 0.2)
+	tween.tween_property($Info, "modulate:a", 0.0, 0.6).set_delay(6.0)
+	tween.parallel().tween_property($Info, "position:y", -131, 0.6).set_delay(6.0)
 
 func _localize_aspect_fit(p: Vector2, outer: Vector2, inner: Vector2):
 	var scale = outer.y / inner.y if outer.aspect() > inner.aspect() else outer.x / inner.x
@@ -96,16 +98,12 @@ func _abort(a: int, b: int, c: int, d: int) -> void: # Throw error from Wasm mod
 	push_error("Abort from Wasm module: %d %d %d %d" % [a, b, c, d])
 
 func _draw_image(p: int, s: int) -> void: # Draw the entire image from Wasm memory
-	image.lock()
-	image.data.data = wasm.stream.seek(p).get_data(s)[1]
-	image.unlock()
-	texture.create_from_image(image, 0)
+	image.set_data(int(size.x), int(size.y), false, Image.FORMAT_RGBA8, wasm.stream.seek(p).get_data(s)[1])
+	texture.update(image)
 
 func _draw_pixel(x: int, y: int, r: int, g: int, b: int, a: int) -> void: # Draw a single pixel with color component values
-	image.lock()
 	image.set_pixel(x, y, Color8(r, g, b, a))
-	image.unlock()
-	texture.create_from_image(image, 0)
+	texture.update(image)
 
 func _seed() -> float: # Provide a random seed to the Wasm module
 	return randf()

examples/wasm-visualizations/Main.tscn

@@ -1,118 +1,130 @@
-[gd_scene load_steps=5 format=2]
+[gd_scene load_steps=5 format=3 uid="uid://c8vnojxvb4dr2"]
 
-[ext_resource path="res://Main.gd" type="Script" id=1]
-[ext_resource path="res://Thaleah.ttf" type="DynamicFontData" id=2]
+[ext_resource type="Script" path="res://Main.gd" id="1"]
+[ext_resource type="FontFile" uid="uid://ewmegf8jirw7" path="res://Thaleah.ttf" id="2"]
 
-[sub_resource type="StyleBoxFlat" id=4]
+[sub_resource type="StyleBoxFlat" id="4"]
 content_margin_top = 12.0
 content_margin_bottom = 12.0
-bg_color = Color( 0, 0, 0, 1 )
+bg_color = Color(0, 0, 0, 1)
 corner_radius_top_left = 12
 corner_radius_top_right = 12
 corner_radius_bottom_right = 12
 corner_radius_bottom_left = 12
 corner_detail = 5
 
-[sub_resource type="DynamicFont" id=5]
-size = 32
-extra_spacing_top = -4
-extra_spacing_bottom = -4
-font_data = ExtResource( 2 )
+[sub_resource type="FontFile" id="5"]
+fallbacks = Array[Font]([ExtResource("2")])
+face_index = null
+embolden = null
+transform = null
+cache/0/16/0/ascent = 0.0
+cache/0/16/0/descent = 0.0
+cache/0/16/0/underline_position = 0.0
+cache/0/16/0/underline_thickness = 0.0
+cache/0/16/0/scale = 1.0
+cache/0/16/0/kerning_overrides/16/0 = Vector2(0, 0)
+cache/0/16/0/kerning_overrides/32/0 = Vector2(0, 0)
+cache/0/32/0/ascent = 0.0
+cache/0/32/0/descent = 0.0
+cache/0/32/0/underline_position = 0.0
+cache/0/32/0/underline_thickness = 0.0
+cache/0/32/0/scale = 1.0
+cache/0/32/0/kerning_overrides/16/0 = Vector2(0, 0)
+cache/0/32/0/kerning_overrides/32/0 = Vector2(0, 0)
 
 [node name="Main" type="Control"]
+layout_mode = 3
+anchors_preset = 15
 anchor_right = 1.0
 anchor_bottom = 1.0
-script = ExtResource( 1 )
-
-[node name="Tween" type="Tween" parent="."]
+script = ExtResource("1")
 
 [node name="TextureRect" type="TextureRect" parent="."]
+texture_filter = 1
+layout_mode = 0
 anchor_right = 1.0
 anchor_bottom = 1.0
-expand = true
-stretch_mode = 6
+expand_mode = 1
+stretch_mode = 5
 
 [node name="Info" type="PanelContainer" parent="."]
-modulate = Color( 1, 1, 1, 0 )
+modulate = Color(1, 1, 1, 0)
+layout_mode = 1
+anchors_preset = 5
 anchor_left = 0.5
 anchor_right = 0.5
-margin_left = -128.0
-margin_top = -98.0
-margin_right = 128.0
-custom_styles/panel = SubResource( 4 )
-__meta__ = {
-"_edit_group_": true
-}
+offset_left = -128.0
+offset_top = -131.0
+offset_right = 128.0
+grow_horizontal = 2
+theme_override_styles/panel = SubResource("4")
+metadata/_edit_group_ = true
 
 [node name="VBoxContainer" type="VBoxContainer" parent="Info"]
-margin_top = 12.0
-margin_right = 256.0
-margin_bottom = 86.0
+layout_mode = 2
 
 [node name="LabelModule" type="Label" parent="Info/VBoxContainer"]
 unique_name_in_owner = true
-margin_right = 256.0
-margin_bottom = 22.0
-custom_fonts/font = SubResource( 5 )
+layout_mode = 2
+theme_override_fonts/font = SubResource("5")
+theme_override_font_sizes/font_size = 32
 text = "Module"
-align = 1
+horizontal_alignment = 1
 
 [node name="LabelSize" type="Label" parent="Info/VBoxContainer"]
 unique_name_in_owner = true
-margin_top = 26.0
-margin_right = 256.0
-margin_bottom = 48.0
-custom_fonts/font = SubResource( 5 )
+layout_mode = 2
+theme_override_fonts/font = SubResource("5")
+theme_override_font_sizes/font_size = 32
 text = "0 X 0"
-align = 1
+horizontal_alignment = 1
 
 [node name="LabelFPS" type="Label" parent="Info/VBoxContainer"]
 unique_name_in_owner = true
-margin_top = 52.0
-margin_right = 256.0
-margin_bottom = 74.0
-custom_fonts/font = SubResource( 5 )
+layout_mode = 2
+theme_override_fonts/font = SubResource("5")
+theme_override_font_sizes/font_size = 32
 text = "FPS"
-align = 1
+horizontal_alignment = 1
 
 [node name="Intro" type="PanelContainer" parent="."]
+layout_mode = 1
+anchors_preset = 7
 anchor_left = 0.5
 anchor_top = 1.0
 anchor_right = 0.5
 anchor_bottom = 1.0
-margin_left = -148.0
-margin_top = -110.0
-margin_right = 148.0
-margin_bottom = -12.0
-custom_styles/panel = SubResource( 4 )
-__meta__ = {
-"_edit_group_": true
-}
+offset_left = -148.0
+offset_top = -143.0
+offset_right = 148.0
+offset_bottom = -12.0
+grow_horizontal = 2
+grow_vertical = 0
+theme_override_styles/panel = SubResource("4")
+metadata/_edit_group_ = true
 
 [node name="VBoxContainer" type="VBoxContainer" parent="Intro"]
-margin_top = 12.0
-margin_right = 296.0
-margin_bottom = 86.0
+layout_mode = 2
+alignment = 1
 
 [node name="Label1" type="Label" parent="Intro/VBoxContainer"]
-margin_right = 296.0
-margin_bottom = 22.0
-custom_fonts/font = SubResource( 5 )
+layout_mode = 2
+theme_override_fonts/font = SubResource("5")
+theme_override_font_sizes/font_size = 32
 text = "Left/right module"
-align = 1
+horizontal_alignment = 1
 
 [node name="Label2" type="Label" parent="Intro/VBoxContainer"]
-margin_top = 26.0
-margin_right = 296.0
-margin_bottom = 48.0
-custom_fonts/font = SubResource( 5 )
+layout_mode = 2
+theme_override_fonts/font = SubResource("5")
+theme_override_font_sizes/font_size = 32
 text = "Up/down resolution"
-align = 1
+horizontal_alignment = 1
 
 [node name="Label3" type="Label" parent="Intro/VBoxContainer"]
-margin_top = 52.0
-margin_right = 296.0
-margin_bottom = 74.0
-custom_fonts/font = SubResource( 5 )
+layout_mode = 2
+theme_override_fonts/font = SubResource("5")
+theme_override_font_sizes/font_size = 32
 text = "C Toggle FPS limit"
-align = 1
+horizontal_alignment = 1

examples/wasm-visualizations/project.godot

@@ -6,32 +6,24 @@
 ;   [section] ; section goes between []
 ;   param=value ; assign values to parameters
 
-config_version=4
-
-_global_script_classes=[ {
-"base": "",
-"class": "Wasm",
-"language": "NativeScript",
-"path": "res://addons/godot-wasm/Wasm.gdns"
-} ]
-_global_script_class_icons={
-"Wasm": ""
-}
+config_version=5
 
 [application]
 
 config/name="Wasm Visualizations"
 run/main_scene="res://Main.tscn"
+config/features=PackedStringArray("4.0")
 
 [debug]
 
 settings/fps/force_fps=60
 
 [display]
 
-window/size/width=400
-window/size/height=400
-window/vsync/use_vsync=false
+window/size/viewport_width=800
+window/size/viewport_height=800
+window/stretch/scale=2.0
+window/vsync/vsync_mode=false
 
 [gui]
 
@@ -41,8 +33,8 @@ common/drop_mouse_on_gui_input_disabled=true
 
 toggle_fps_cap={
 "deadzone": 0.5,
-"events": [ Object(InputEventKey,"resource_local_to_scene":false,"resource_name":"","device":0,"alt":false,"shift":false,"control":false,"meta":false,"command":false,"pressed":false,"scancode":67,"physical_scancode":0,"unicode":0,"echo":false,"script":null)
- ]
+"events": [null, null, Object(InputEventKey,"resource_local_to_scene":false,"resource_name":"","device":-1,"window_id":0,"alt_pressed":false,"shift_pressed":false,"ctrl_pressed":false,"meta_pressed":false,"pressed":false,"keycode":0,"physical_keycode":67,"key_label":0,"unicode":99,"echo":false,"script":null)
+]
 }
 
 [physics]
@@ -51,4 +43,4 @@ common/enable_pause_aware_picking=true
 
 [rendering]
 
-environment/default_clear_color=Color( 1, 1, 1, 1 )
+environment/defaults/default_clear_color=Color(1, 1, 1, 1)