Merge pull request #35 from defold/example-modify-atlas

Added modify atlas example

examples/_main/loader.go

@@ -1054,3 +1054,21 @@ embedded_components {
     w: 1.0
   }
 }
+embedded_components {
+  id: "resource/modify_atlas"
+  type: "collectionproxy"
+  data: "collection: \"/examples/resource/modify_atlas/modify_atlas.collection\"\n"
+  "exclude: false\n"
+  ""
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+}

examples/_main/menu.gui_script

@@ -116,6 +116,8 @@ function init(self)
 	self.index["file"] = { "sys_save_load" }
 	self.index["tilemap"] = { "collisions", "get_set_tile" }
 	self.index["timer"] = { "repeating_timer", "trigger_timer", "cancel_timer" }
+	self.index["resource"] = { "modify_atlas" }
+
 	local categories = {}
 	for k,_ in pairs(self.index) do
 		categories[#categories + 1] = k

examples/resource/modify_atlas/modify_atlas.atlas

@@ -0,0 +1,13 @@
+images {
+  image: "/assets/images/shipPink_manned.png"
+  sprite_trim_mode: SPRITE_TRIM_MODE_OFF
+}
+images {
+  image: "/assets/images/shipGreen_manned.png"
+  sprite_trim_mode: SPRITE_TRIM_MODE_OFF
+}
+margin: 0
+extrude_borders: 4
+inner_padding: 0
+max_page_width: 0
+max_page_height: 0

examples/resource/modify_atlas/modify_atlas.collection

@@ -0,0 +1,247 @@
+name: "atlas"
+scale_along_z: 0
+embedded_instances {
+  id: "green1"
+  data: "embedded_components {\n"
+  "  id: \"sprite\"\n"
+  "  type: \"sprite\"\n"
+  "  data: \"tile_set: \\\"/examples/resource/modify_atlas/modify_atlas.atlas\\\"\\n"
+  "default_animation: \\\"shipGreen_manned\\\"\\n"
+  "material: \\\"/builtins/materials/sprite.material\\\"\\n"
+  "blend_mode: BLEND_MODE_ALPHA\\n"
+  "\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "}\n"
+  ""
+  position {
+    x: 220.0
+    y: 500.0
+    z: 0.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale3 {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+  }
+}
+embedded_instances {
+  id: "pink1"
+  data: "embedded_components {\n"
+  "  id: \"sprite\"\n"
+  "  type: \"sprite\"\n"
+  "  data: \"tile_set: \\\"/examples/resource/modify_atlas/modify_atlas.atlas\\\"\\n"
+  "default_animation: \\\"shipPink_manned\\\"\\n"
+  "material: \\\"/builtins/materials/sprite.material\\\"\\n"
+  "blend_mode: BLEND_MODE_ALPHA\\n"
+  "\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "}\n"
+  ""
+  position {
+    x: 500.0
+    y: 500.0
+    z: 0.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale3 {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+  }
+}
+embedded_instances {
+  id: "example"
+  data: "components {\n"
+  "  id: \"modify_atlas\"\n"
+  "  component: \"/examples/resource/modify_atlas/modify_atlas.script\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "  property_decls {\n"
+  "  }\n"
+  "}\n"
+  "embedded_components {\n"
+  "  id: \"label\"\n"
+  "  type: \"label\"\n"
+  "  data: \"size {\\n"
+  "  x: 128.0\\n"
+  "  y: 32.0\\n"
+  "  z: 0.0\\n"
+  "  w: 0.0\\n"
+  "}\\n"
+  "color {\\n"
+  "  x: 0.0\\n"
+  "  y: 0.0\\n"
+  "  z: 0.0\\n"
+  "  w: 1.0\\n"
+  "}\\n"
+  "outline {\\n"
+  "  x: 0.0\\n"
+  "  y: 0.0\\n"
+  "  z: 0.0\\n"
+  "  w: 1.0\\n"
+  "}\\n"
+  "shadow {\\n"
+  "  x: 0.0\\n"
+  "  y: 0.0\\n"
+  "  z: 0.0\\n"
+  "  w: 1.0\\n"
+  "}\\n"
+  "leading: 1.0\\n"
+  "tracking: 0.0\\n"
+  "pivot: PIVOT_CENTER\\n"
+  "blend_mode: BLEND_MODE_ALPHA\\n"
+  "line_break: false\\n"
+  "text: \\\"CLICK TO REPLACE PINK WITH YELLOW\\\"\\n"
+  "font: \\\"/builtins/fonts/system_font.font\\\"\\n"
+  "material: \\\"/builtins/fonts/label.material\\\"\\n"
+  "\"\n"
+  "  position {\n"
+  "    x: 360.0\n"
+  "    y: 40.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "}\n"
+  ""
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale3 {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+  }
+}
+embedded_instances {
+  id: "green2"
+  data: "embedded_components {\n"
+  "  id: \"sprite\"\n"
+  "  type: \"sprite\"\n"
+  "  data: \"tile_set: \\\"/examples/resource/modify_atlas/modify_atlas.atlas\\\"\\n"
+  "default_animation: \\\"shipGreen_manned\\\"\\n"
+  "material: \\\"/builtins/materials/sprite.material\\\"\\n"
+  "blend_mode: BLEND_MODE_ALPHA\\n"
+  "\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "}\n"
+  ""
+  position {
+    x: 220.0
+    y: 220.0
+    z: 0.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale3 {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+  }
+}
+embedded_instances {
+  id: "pink2"
+  data: "embedded_components {\n"
+  "  id: \"sprite\"\n"
+  "  type: \"sprite\"\n"
+  "  data: \"tile_set: \\\"/examples/resource/modify_atlas/modify_atlas.atlas\\\"\\n"
+  "default_animation: \\\"shipPink_manned\\\"\\n"
+  "material: \\\"/builtins/materials/sprite.material\\\"\\n"
+  "blend_mode: BLEND_MODE_ALPHA\\n"
+  "\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "}\n"
+  ""
+  position {
+    x: 500.0
+    y: 220.0
+    z: 0.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale3 {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+  }
+}

examples/resource/modify_atlas/modify_atlas.md

@@ -0,0 +1,9 @@
+---
+title: Modify atlas
+brief: This example shows how to replace an image in an atlas
+scripts: modify_atlas.script
+---
+
+The example loads an image bundled as a custom resource (bundled in the game archive) and uses it to replace the first image of an atlas. See code comments for implementation details.
+
+![size](size.png)

examples/resource/modify_atlas/modify_atlas.script

@@ -0,0 +1,87 @@
+-- load image from custom resources
+-- read pixels and write them to a buffer
+local function create_buffer_from_image(filename)
+	local png = assert(sys.load_resource(filename))
+	local loaded_image = image.load(png)
+	local width = loaded_image.width
+	local height = loaded_image.height
+	local pixels = loaded_image.buffer
+
+	local buffer_declaration = {
+		{
+			name = hash("rgba"),
+			type = buffer.VALUE_TYPE_UINT8,
+			count = 4
+		}
+	}
+	local pixel_buffer = buffer.create(width * height, buffer_declaration)
+	local pixel_stream = buffer.get_stream(pixel_buffer, hash("rgba"))
+	for y = 1, height do
+		for x = 1, width do
+			-- flip image
+			local pixels_index = ((height - y) * width * 4) + ((x - 1) * 4) + 1
+			local r = pixels:byte(pixels_index + 0)
+			local g = pixels:byte(pixels_index + 1)
+			local b = pixels:byte(pixels_index + 2)
+			local a = pixels:byte(pixels_index + 3)
+
+			-- write to buffer stream
+			local stream_index = ((y - 1) * width * 4) + ((x - 1) * 4) + 1
+			pixel_stream[stream_index + 0] = r
+			pixel_stream[stream_index + 1] = g
+			pixel_stream[stream_index + 2] = b
+			pixel_stream[stream_index + 3] = a
+		end
+	end
+
+	return pixel_buffer, width, height
+end
+
+local function replace_atlas_image()
+	-- get table with information about an atlas
+	local atlas = resource.get_atlas("/examples/resource/modify_atlas/modify_atlas.a.texturesetc")
+	-- get table with information about the textured used by the atlas
+	local texture = resource.get_texture_info(atlas.texture)
+	pprint(atlas)
+	pprint(texture)
+
+	-- load an image as a Defold buffer
+	local pixel_buffer, width, height = create_buffer_from_image("/examples/resource/modify_atlas/resources/shipYellow_manned.png")
+
+	-- get the UV coordinates of the first image in the atlas
+	local first_uvs = atlas.geometries[1].uvs
+
+	-- this offset should not be necessary but it seems like there is an issue with the
+	-- UVs in Defold 1.5.0
+	local x = first_uvs[1] - 0
+	local y = first_uvs[2] - 6
+	print(x, y)
+	print(width, height)
+
+	-- create a table with texture update information
+	-- we want to update only a sub region of the atlas starting at a
+	-- certain position and with a certain size
+	local texture_info = {
+		type = resource.TEXTURE_TYPE_2D,
+		width = width,
+		height = height,
+		format = resource.TEXTURE_FORMAT_RGBA,
+		x = x,
+		y = y,
+		compression_type = resource.COMPRESSION_TYPE_DEFAULT,
+		num_mip_maps = texture.mipmaps,
+	}
+	-- update the atlas texture with the pixels from the provided buffer
+	resource.set_texture(atlas.texture, texture_info, pixel_buffer)
+end
+
+
+function init(self)
+	msg.post(".", "acquire_input_focus")
+end
+
+function on_input(self, action_id, action)
+	if action.pressed then
+		replace_atlas_image()
+	end
+end

game.project

@@ -1,7 +1,8 @@
 [project]
 title = Defold-examples
 version = 0.1
-dependencies#0 = https://github.com/defold/extension-spine/archive/refs/tags/2.10.6.zip
+custom_resources = examples/resource/modify_atlas/resources
+dependencies#0 = https://github.com/defold/extension-spine/archive/refs/tags/2.11.3.zip
 
 [bootstrap]
 main_collection = /examples/main.collectionc