upgrade spx2

scripts/nginx.conf

@@ -45,6 +45,8 @@ server {
         add_header 'Access-Control-Allow-Methods' 'GET' always;
         add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range' always;
         add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;
+        add_header 'Cross-Origin-Embedder-Policy' 'credentialless' always;
+        add_header 'Cross-Origin-Opener-Policy' 'same-origin' always;
 
         root /usr/share/nginx/html;
         try_files $uri $uri/ /index.html;

spx-gui/public/runner/20241119_1605/game.js → spx-gui/public/runner/20241121_2139/game.js

@@ -534,8 +534,8 @@ class GameApp {
 
 function GetEngineHashes() { 
 	return {
-"gdspx.wasm":"ac33eabd1ddb53470bd9f87ae2a1a4670af50ee3aa35e450323d13eb5719013c",
-"godot.editor.wasm":"d803bf1d34d53216cc3cc20c7ba11979080028388225c094e78cb6ddacc6d4b0",
+"gdspx.wasm":"d995c80195e064c64b48a0ab402aaa99104d9901cd86b4a9b763fff243444322",
+"godot.editor.wasm":"0be7238826d50dc63fdcce6936d94eb286f511b5f6ee7a6f9c2d74b91d0d0660",
 
 	}
 }

spx-gui/public/runner/20241119_1605/godot.editor.js → spx-gui/public/runner/20241121_2139/godot.editor.js

@@ -65,7 +65,7 @@ Module["ready"] = new Promise((resolve, reject) => {
  readyPromiseReject = reject;
 });
 
-[ "_main", "__emscripten_thread_init", "__emscripten_thread_exit", "__emscripten_thread_crashed", "__emscripten_thread_mailbox_await", "__emscripten_tls_init", "_pthread_self", "checkMailbox", "establishStackSpace", "invokeEntryPoint", "PThread", "__Z14godot_web_mainiPPc", "_gdspx_audio_stop_all", "_gdspx_audio_play_sfx", "_gdspx_audio_play_music", "_gdspx_audio_pause_music", "_gdspx_audio_resume_music", "_gdspx_audio_get_music_timer", "_gdspx_audio_set_music_timer", "_gdspx_audio_is_music_playing", "_gdspx_audio_set_sfx_volume", "_gdspx_audio_get_sfx_volume", "_gdspx_audio_set_music_volume", "_gdspx_audio_get_music_volume", "_gdspx_audio_set_master_volume", "_gdspx_audio_get_master_volume", "_gdspx_camera_get_camera_position", "_gdspx_camera_set_camera_position", "_gdspx_camera_get_camera_zoom", "_gdspx_camera_set_camera_zoom", "_gdspx_camera_get_viewport_rect", "_gdspx_input_get_mouse_pos", "_gdspx_input_get_key", "_gdspx_input_get_mouse_state", "_gdspx_input_get_key_state", "_gdspx_input_get_axis", "_gdspx_input_is_action_pressed", "_gdspx_input_is_action_just_pressed", "_gdspx_input_is_action_just_released", "_gdspx_physic_raycast", "_gdspx_physic_check_collision", "_gdspx_physic_check_touched_camera_boundary", "_gdspx_platform_set_window_position", "_gdspx_platform_get_window_position", "_gdspx_platform_set_window_size", "_gdspx_platform_get_window_size", "_gdspx_platform_set_window_title", "_gdspx_platform_get_window_title", "_gdspx_platform_set_window_fullscreen", "_gdspx_platform_is_window_fullscreen", "_gdspx_platform_set_debug_mode", "_gdspx_platform_is_debug_mode", "_gdspx_res_get_image_size", "_gdspx_res_read_all_text", "_gdspx_res_has_file", "_gdspx_scene_change_scene_to_file", "_gdspx_scene_reload_current_scene", "_gdspx_scene_unload_current_scene", "_gdspx_sprite_set_dont_destroy_on_load", "_gdspx_sprite_set_process", "_gdspx_sprite_set_physic_process", "_gdspx_sprite_set_child_position", "_gdspx_sprite_get_child_position", "_gdspx_sprite_set_child_rotation", "_gdspx_sprite_get_child_rotation", "_gdspx_sprite_set_child_scale", "_gdspx_sprite_get_child_scale", "_gdspx_sprite_check_collision", "_gdspx_sprite_check_collision_with_point", "_gdspx_sprite_create_sprite", "_gdspx_sprite_clone_sprite", "_gdspx_sprite_destroy_sprite", "_gdspx_sprite_is_sprite_alive", "_gdspx_sprite_set_position", "_gdspx_sprite_get_position", "_gdspx_sprite_set_rotation", "_gdspx_sprite_get_rotation", "_gdspx_sprite_set_scale", "_gdspx_sprite_get_scale", "_gdspx_sprite_set_render_scale", "_gdspx_sprite_get_render_scale", "_gdspx_sprite_set_color", "_gdspx_sprite_get_color", "_gdspx_sprite_set_texture_altas", "_gdspx_sprite_set_texture", "_gdspx_sprite_get_texture", "_gdspx_sprite_set_visible", "_gdspx_sprite_get_visible", "_gdspx_sprite_get_z_index", "_gdspx_sprite_set_z_index", "_gdspx_sprite_play_anim", "_gdspx_sprite_play_backwards_anim", "_gdspx_sprite_pause_anim", "_gdspx_sprite_stop_anim", "_gdspx_sprite_is_playing_anim", "_gdspx_sprite_set_anim", "_gdspx_sprite_get_anim", "_gdspx_sprite_set_anim_frame", "_gdspx_sprite_get_anim_frame", "_gdspx_sprite_set_anim_speed_scale", "_gdspx_sprite_get_anim_speed_scale", "_gdspx_sprite_get_anim_playing_speed", "_gdspx_sprite_set_anim_centered", "_gdspx_sprite_is_anim_centered", "_gdspx_sprite_set_anim_offset", "_gdspx_sprite_get_anim_offset", "_gdspx_sprite_set_anim_flip_h", "_gdspx_sprite_is_anim_flipped_h", "_gdspx_sprite_set_anim_flip_v", "_gdspx_sprite_is_anim_flipped_v", "_gdspx_sprite_set_velocity", "_gdspx_sprite_get_velocity", "_gdspx_sprite_is_on_floor", "_gdspx_sprite_is_on_floor_only", "_gdspx_sprite_is_on_wall", "_gdspx_sprite_is_on_wall_only", "_gdspx_sprite_is_on_ceiling", "_gdspx_sprite_is_on_ceiling_only", "_gdspx_sprite_get_last_motion", "_gdspx_sprite_get_position_delta", "_gdspx_sprite_get_floor_normal", "_gdspx_sprite_get_wall_normal", "_gdspx_sprite_get_real_velocity", "_gdspx_sprite_move_and_slide", "_gdspx_sprite_set_gravity", "_gdspx_sprite_get_gravity", "_gdspx_sprite_set_mass", "_gdspx_sprite_get_mass", "_gdspx_sprite_add_force", "_gdspx_sprite_add_impulse", "_gdspx_sprite_set_collision_layer", "_gdspx_sprite_get_collision_layer", "_gdspx_sprite_set_collision_mask", "_gdspx_sprite_get_collision_mask", "_gdspx_sprite_set_trigger_layer", "_gdspx_sprite_get_trigger_layer", "_gdspx_sprite_set_trigger_mask", "_gdspx_sprite_get_trigger_mask", "_gdspx_sprite_set_collider_rect", "_gdspx_sprite_set_collider_circle", "_gdspx_sprite_set_collider_capsule", "_gdspx_sprite_set_collision_enabled", "_gdspx_sprite_is_collision_enabled", "_gdspx_sprite_set_trigger_rect", "_gdspx_sprite_set_trigger_circle", "_gdspx_sprite_set_trigger_capsule", "_gdspx_sprite_set_trigger_enabled", "_gdspx_sprite_is_trigger_enabled", "_gdspx_ui_bind_node", "_gdspx_ui_create_node", "_gdspx_ui_create_button", "_gdspx_ui_create_label", "_gdspx_ui_create_image", "_gdspx_ui_create_toggle", "_gdspx_ui_create_slider", "_gdspx_ui_create_input", "_gdspx_ui_destroy_node", "_gdspx_ui_get_type", "_gdspx_ui_set_text", "_gdspx_ui_get_text", "_gdspx_ui_set_texture", "_gdspx_ui_get_texture", "_gdspx_ui_set_color", "_gdspx_ui_get_color", "_gdspx_ui_set_font_size", "_gdspx_ui_get_font_size", "_gdspx_ui_set_visible", "_gdspx_ui_get_visible", "_gdspx_ui_set_interactable", "_gdspx_ui_get_interactable", "_gdspx_ui_set_rect", "_gdspx_ui_get_rect", "_gdspx_ui_get_layout_direction", "_gdspx_ui_set_layout_direction", "_gdspx_ui_get_layout_mode", "_gdspx_ui_set_layout_mode", "_gdspx_ui_get_anchors_preset", "_gdspx_ui_set_anchors_preset", "_gdspx_ui_get_scale", "_gdspx_ui_set_scale", "_gdspx_ui_get_position", "_gdspx_ui_set_position", "_gdspx_ui_get_size", "_gdspx_ui_set_size", "_gdspx_ui_get_global_position", "_gdspx_ui_set_global_position", "_gdspx_ui_get_rotation", "_gdspx_ui_set_rotation", "_gdspx_ui_get_flip", "_gdspx_ui_set_flip", "_gdspx_get_value", "_gdspx_alloc_bool", "_gdspx_new_bool", "_gdspx_free_bool", "_gdspx_alloc_float", "_gdspx_new_float", "_gdspx_free_float", "_gdspx_alloc_int", "_gdspx_new_int", "_gdspx_free_int", "_gdspx_alloc_obj", "_gdspx_new_obj", "_gdspx_free_obj", "_gdspx_alloc_vec2", "_gdspx_new_vec2", "_gdspx_free_vec2", "_gdspx_alloc_vec3", "_gdspx_new_vec3", "_gdspx_free_vec3", "_gdspx_alloc_vec4", "_gdspx_new_vec4", "_gdspx_free_vec4", "_gdspx_alloc_color", "_gdspx_new_color", "_gdspx_free_color", "_gdspx_alloc_rect2", "_gdspx_new_rect2", "_gdspx_free_rect2", "_gdspx_alloc_string", "_gdspx_new_string", "_gdspx_get_string", "_gdspx_free_cstr", "_gdspx_get_string_len", "_gdspx_free_string", "_fflush", "__emwebxr_on_input_event", "__emwebxr_on_simple_event", "__emscripten_check_mailbox", "onRuntimeInitialized" ].forEach(prop => {
+[ "_main", "__emscripten_thread_init", "__emscripten_thread_exit", "__emscripten_thread_crashed", "__emscripten_thread_mailbox_await", "__emscripten_tls_init", "_pthread_self", "checkMailbox", "establishStackSpace", "invokeEntryPoint", "PThread", "__Z14godot_web_mainiPPc", "_gdspx_audio_stop_all", "_gdspx_audio_play_sfx", "_gdspx_audio_play_music", "_gdspx_audio_pause_music", "_gdspx_audio_resume_music", "_gdspx_audio_get_music_timer", "_gdspx_audio_set_music_timer", "_gdspx_audio_is_music_playing", "_gdspx_audio_set_sfx_volume", "_gdspx_audio_get_sfx_volume", "_gdspx_audio_set_music_volume", "_gdspx_audio_get_music_volume", "_gdspx_audio_set_master_volume", "_gdspx_audio_get_master_volume", "_gdspx_camera_get_camera_position", "_gdspx_camera_set_camera_position", "_gdspx_camera_get_camera_zoom", "_gdspx_camera_set_camera_zoom", "_gdspx_camera_get_viewport_rect", "_gdspx_input_get_mouse_pos", "_gdspx_input_get_key", "_gdspx_input_get_mouse_state", "_gdspx_input_get_key_state", "_gdspx_input_get_axis", "_gdspx_input_is_action_pressed", "_gdspx_input_is_action_just_pressed", "_gdspx_input_is_action_just_released", "_gdspx_physic_raycast", "_gdspx_physic_check_collision", "_gdspx_physic_check_touched_camera_boundary", "_gdspx_platform_set_window_position", "_gdspx_platform_get_window_position", "_gdspx_platform_set_window_size", "_gdspx_platform_get_window_size", "_gdspx_platform_set_window_title", "_gdspx_platform_get_window_title", "_gdspx_platform_set_window_fullscreen", "_gdspx_platform_is_window_fullscreen", "_gdspx_platform_set_debug_mode", "_gdspx_platform_is_debug_mode", "_gdspx_res_get_bound_from_alpha", "_gdspx_res_get_image_size", "_gdspx_res_read_all_text", "_gdspx_res_has_file", "_gdspx_scene_change_scene_to_file", "_gdspx_scene_reload_current_scene", "_gdspx_scene_unload_current_scene", "_gdspx_sprite_set_dont_destroy_on_load", "_gdspx_sprite_set_process", "_gdspx_sprite_set_physic_process", "_gdspx_sprite_set_child_position", "_gdspx_sprite_get_child_position", "_gdspx_sprite_set_child_rotation", "_gdspx_sprite_get_child_rotation", "_gdspx_sprite_set_child_scale", "_gdspx_sprite_get_child_scale", "_gdspx_sprite_check_collision", "_gdspx_sprite_check_collision_with_point", "_gdspx_sprite_create_sprite", "_gdspx_sprite_clone_sprite", "_gdspx_sprite_destroy_sprite", "_gdspx_sprite_is_sprite_alive", "_gdspx_sprite_set_position", "_gdspx_sprite_get_position", "_gdspx_sprite_set_rotation", "_gdspx_sprite_get_rotation", "_gdspx_sprite_set_scale", "_gdspx_sprite_get_scale", "_gdspx_sprite_set_render_scale", "_gdspx_sprite_get_render_scale", "_gdspx_sprite_set_color", "_gdspx_sprite_get_color", "_gdspx_sprite_set_texture_altas", "_gdspx_sprite_set_texture", "_gdspx_sprite_get_texture", "_gdspx_sprite_set_visible", "_gdspx_sprite_get_visible", "_gdspx_sprite_get_z_index", "_gdspx_sprite_set_z_index", "_gdspx_sprite_play_anim", "_gdspx_sprite_play_backwards_anim", "_gdspx_sprite_pause_anim", "_gdspx_sprite_stop_anim", "_gdspx_sprite_is_playing_anim", "_gdspx_sprite_set_anim", "_gdspx_sprite_get_anim", "_gdspx_sprite_set_anim_frame", "_gdspx_sprite_get_anim_frame", "_gdspx_sprite_set_anim_speed_scale", "_gdspx_sprite_get_anim_speed_scale", "_gdspx_sprite_get_anim_playing_speed", "_gdspx_sprite_set_anim_centered", "_gdspx_sprite_is_anim_centered", "_gdspx_sprite_set_anim_offset", "_gdspx_sprite_get_anim_offset", "_gdspx_sprite_set_anim_flip_h", "_gdspx_sprite_is_anim_flipped_h", "_gdspx_sprite_set_anim_flip_v", "_gdspx_sprite_is_anim_flipped_v", "_gdspx_sprite_set_velocity", "_gdspx_sprite_get_velocity", "_gdspx_sprite_is_on_floor", "_gdspx_sprite_is_on_floor_only", "_gdspx_sprite_is_on_wall", "_gdspx_sprite_is_on_wall_only", "_gdspx_sprite_is_on_ceiling", "_gdspx_sprite_is_on_ceiling_only", "_gdspx_sprite_get_last_motion", "_gdspx_sprite_get_position_delta", "_gdspx_sprite_get_floor_normal", "_gdspx_sprite_get_wall_normal", "_gdspx_sprite_get_real_velocity", "_gdspx_sprite_move_and_slide", "_gdspx_sprite_set_gravity", "_gdspx_sprite_get_gravity", "_gdspx_sprite_set_mass", "_gdspx_sprite_get_mass", "_gdspx_sprite_add_force", "_gdspx_sprite_add_impulse", "_gdspx_sprite_set_collision_layer", "_gdspx_sprite_get_collision_layer", "_gdspx_sprite_set_collision_mask", "_gdspx_sprite_get_collision_mask", "_gdspx_sprite_set_trigger_layer", "_gdspx_sprite_get_trigger_layer", "_gdspx_sprite_set_trigger_mask", "_gdspx_sprite_get_trigger_mask", "_gdspx_sprite_set_collider_rect", "_gdspx_sprite_set_collider_circle", "_gdspx_sprite_set_collider_capsule", "_gdspx_sprite_set_collision_enabled", "_gdspx_sprite_is_collision_enabled", "_gdspx_sprite_set_trigger_rect", "_gdspx_sprite_set_trigger_circle", "_gdspx_sprite_set_trigger_capsule", "_gdspx_sprite_set_trigger_enabled", "_gdspx_sprite_is_trigger_enabled", "_gdspx_ui_bind_node", "_gdspx_ui_create_node", "_gdspx_ui_create_button", "_gdspx_ui_create_label", "_gdspx_ui_create_image", "_gdspx_ui_create_toggle", "_gdspx_ui_create_slider", "_gdspx_ui_create_input", "_gdspx_ui_destroy_node", "_gdspx_ui_get_type", "_gdspx_ui_set_text", "_gdspx_ui_get_text", "_gdspx_ui_set_texture", "_gdspx_ui_get_texture", "_gdspx_ui_set_color", "_gdspx_ui_get_color", "_gdspx_ui_set_font_size", "_gdspx_ui_get_font_size", "_gdspx_ui_set_visible", "_gdspx_ui_get_visible", "_gdspx_ui_set_interactable", "_gdspx_ui_get_interactable", "_gdspx_ui_set_rect", "_gdspx_ui_get_rect", "_gdspx_ui_get_layout_direction", "_gdspx_ui_set_layout_direction", "_gdspx_ui_get_layout_mode", "_gdspx_ui_set_layout_mode", "_gdspx_ui_get_anchors_preset", "_gdspx_ui_set_anchors_preset", "_gdspx_ui_get_scale", "_gdspx_ui_set_scale", "_gdspx_ui_get_position", "_gdspx_ui_set_position", "_gdspx_ui_get_size", "_gdspx_ui_set_size", "_gdspx_ui_get_global_position", "_gdspx_ui_set_global_position", "_gdspx_ui_get_rotation", "_gdspx_ui_set_rotation", "_gdspx_ui_get_flip", "_gdspx_ui_set_flip", "_gdspx_get_value", "_gdspx_alloc_bool", "_gdspx_new_bool", "_gdspx_free_bool", "_gdspx_alloc_float", "_gdspx_new_float", "_gdspx_free_float", "_gdspx_alloc_int", "_gdspx_new_int", "_gdspx_free_int", "_gdspx_alloc_obj", "_gdspx_new_obj", "_gdspx_free_obj", "_gdspx_alloc_vec2", "_gdspx_new_vec2", "_gdspx_free_vec2", "_gdspx_alloc_vec3", "_gdspx_new_vec3", "_gdspx_free_vec3", "_gdspx_alloc_vec4", "_gdspx_new_vec4", "_gdspx_free_vec4", "_gdspx_alloc_color", "_gdspx_new_color", "_gdspx_free_color", "_gdspx_alloc_rect2", "_gdspx_new_rect2", "_gdspx_free_rect2", "_gdspx_alloc_string", "_gdspx_new_string", "_gdspx_get_string", "_gdspx_free_cstr", "_gdspx_get_string_len", "_gdspx_free_string", "_fflush", "__emwebxr_on_input_event", "__emwebxr_on_simple_event", "__emscripten_check_mailbox", "onRuntimeInitialized" ].forEach(prop => {
  if (!Object.getOwnPropertyDescriptor(Module["ready"], prop)) {
   Object.defineProperty(Module["ready"], prop, {
    get: () => abort("You are getting " + prop + " on the Promise object, instead of the instance. Use .then() to get called back with the instance, see the MODULARIZE docs in src/settings.js"),
@@ -13503,6 +13503,8 @@ var _gdspx_platform_set_debug_mode = Module["_gdspx_platform_set_debug_mode"] =
 
 var _gdspx_platform_is_debug_mode = Module["_gdspx_platform_is_debug_mode"] = createExportWrapper("gdspx_platform_is_debug_mode");
 
+var _gdspx_res_get_bound_from_alpha = Module["_gdspx_res_get_bound_from_alpha"] = createExportWrapper("gdspx_res_get_bound_from_alpha");
+
 var _gdspx_res_get_image_size = Module["_gdspx_res_get_image_size"] = createExportWrapper("gdspx_res_get_image_size");
 
 var _gdspx_res_read_all_text = Module["_gdspx_res_read_all_text"] = createExportWrapper("gdspx_res_read_all_text");
@@ -16336,6 +16338,16 @@ function gdspx_platform_is_debug_mode() {
 	FreeGdBool(_retValue); 
 	return _finalRetValue
 }
+function gdspx_res_get_bound_from_alpha(path) {
+	_gdFuncPtr =  GodotEngine.rtenv['_gdspx_res_get_bound_from_alpha']; 
+	_retValue = AllocGdRect2();
+	_arg0 = ToGdString(path);
+	_gdFuncPtr(_arg0, _retValue);
+	FreeGdString(_arg0); 
+	_finalRetValue = ToJsRect2(_retValue);
+	FreeGdRect2(_retValue); 
+	return _finalRetValue
+}
 function gdspx_res_get_image_size(path) {
 	_gdFuncPtr =  GodotEngine.rtenv['_gdspx_res_get_image_size']; 
 	_retValue = AllocGdVec2();

spx-gui/public/runner/20241119_1605/runner.html → spx-gui/public/runner/20241121_2139/runner.html

@@ -16,14 +16,13 @@
             justify-content: center;
             align-items: center;
             background-color: #333;
-			overflow: hidden;
+            overflow: hidden;
         }
 
-		#canvas,
-		#gameCanvas {
+		canvas {
 			display: block;
 			margin: 0;
-			color: white;
+			outline: none;
 		}
 	</style>
 </head>

spx-gui/src/components/project/runner/v2/ProjectRunnerV2.vue

@@ -10,7 +10,7 @@ import { hashFile } from '@/models/common/hash'
 import type { Project } from '@/models/project'
 import { UIImg, UILoading } from '@/components/ui'
 
-const runnerVersion = '20241119_1605'
+const runnerVersion = '20241121_2139'
 const runnerBaseUrl = `/runner/${runnerVersion}/`
 const runnerUrl = `${runnerBaseUrl}runner.html`
 
@@ -69,6 +69,9 @@ watch(iframeRef, (iframe) => {
 const lastFiles = shallowRef<Files>({})
 
 async function getProjectData() {
+  // NOTE: Now runner (spx2) relies on the zip file hash to determine if the game content has changed.
+  // While jszip can't guarantee the zip result to be byte-to-byte equal, even if we use the same input & pass in same `date` for each file.
+  // TODO: Figure out why and fix it, or update the runner not to rely on the zip file hash.
   const zip = new JSZip()
   const [, files] = await props.project.export()
   Object.entries(files).forEach(([path, file]) => {
@@ -198,8 +201,8 @@ defineExpose({
       // await withLog('updateProject', iframeWindow.updateProject(zipData, ...updateInfo))
       withLog('updateProject', iframeWindow.updateProject(zipData, ...updateInfo))
     }
-    loading.value = false
     await withLog('runGame', iframeWindow.runGame())
+    loading.value = false
   },
   async stop() {
     const iframeWindow = iframeWindowRef.value

spx-gui/src/models/animation.ts

@@ -135,7 +135,7 @@ export class Animation extends Disposable {
     if (frameFrom == null || frameTo == null) throw new Error(`from and to expected for Animation ${name}`)
     const fromIndex = getCostumeIndex(costumes, frameFrom)
     const toIndex = getCostumeIndex(costumes, frameTo)
-    const animationCostumes = costumes.slice(fromIndex, toIndex + 1).map((c) => c.clone())
+    const animationCostumes = costumes.slice(fromIndex, toIndex + 1).map((c) => c.clone(true))
     const duration = animationCostumes.length / (frameFps ?? defaultFps)
     // drop spx `duration`, which is different from ours
     if (spxDuration != null) console.warn(`unsupported field: duration for animation ${name}`)

spx-gui/src/models/backdrop.ts

@@ -41,12 +41,12 @@ export class Backdrop extends Costume {
     })
   }
 
-  static load({ name, path, ...inits }: RawBackdropConfig, files: Files) {
+  static load({ name, path, builder_id: id, ...inits }: RawBackdropConfig, files: Files) {
     if (name == null) throw new Error(`name expected for backdrop`)
     if (path == null) throw new Error(`path expected for backdrop ${name}`)
     const file = files[resolve(backdropAssetPath, path)]
     if (file == null) throw new Error(`file ${path} for backdrop ${name} not found`)
-    return new Backdrop(name, file, inits)
+    return new Backdrop(name, file, { ...inits, id })
   }
 
   export({ includeId = true }: { includeId?: boolean } = {}): [RawBackdropConfig, Files] {

spx-gui/src/models/costume.ts

@@ -103,8 +103,9 @@ export class Costume {
     return reactive(this) as this
   }
 
-  clone() {
+  clone(preserveId = false) {
     return new Costume(this.name, this.img, {
+      id: preserveId ? this.id : undefined,
       x: this.x,
       y: this.y,
       faceRight: this.faceRight,