load texture image example

examples/_main/loader.go

@@ -370,3 +370,21 @@ embedded_components {
     w: 1.0
   }
 }
+embedded_components {
+  id: "gui/load texture"
+  type: "collectionproxy"
+  data: "collection: \"/examples/gui/load_texture/load_texture.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

@@ -103,7 +103,7 @@ function init(self)
 	self.index["basics"] = { "simple move", "message passing", "follow", "parent child", "spawn" }
 	self.index["physics"] = { "dynamic", "kinematic", "trigger" }
 	self.index["animation"] = { "spinner", "flipbook", "tween", "spine" }
-	self.index["gui"] = { "button", "stencil" }
+	self.index["gui"] = { "button", "stencil", "load texture"}
 	self.index["input"] = { "move", "text", "down duration" }
 	self.index["audio"] = { "lorem ipsum" }
 	self.index["render"] = { "lorem ipsum" }

examples/basics/spawn/spawn.collection

@@ -95,6 +95,7 @@ embedded_instances {
   "  id: \"carrotfactory\"\n"
   "  type: \"factory\"\n"
   "  data: \"prototype: \\\"/examples/basics/spawn/carrot.go\\\"\\n"
+  "load_dynamically: false\\n"
   "\"\n"
   "  position {\n"
   "    x: 0.0\n"

examples/gui/load_texture/load_texture.collection

@@ -0,0 +1,37 @@
+name: "default"
+scale_along_z: 0
+embedded_instances {
+  id: "gui"
+  data: "components {\n"
+  "  id: \"gui\"\n"
+  "  component: \"/examples/gui/load_texture/load_texture.gui\"\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: 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
+  }
+}

examples/gui/load_texture/load_texture.gui

@@ -0,0 +1,189 @@
+script: "/examples/gui/load_texture/load_texture.gui_script"
+fonts {
+  name: "text48"
+  font: "/assets/text48.font"
+}
+textures {
+  name: "sprites"
+  texture: "/assets/sprites.atlas"
+}
+background_color {
+  x: 0.0
+  y: 0.0
+  z: 0.0
+  w: 0.0
+}
+nodes {
+  position {
+    x: 360.0
+    y: 360.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 200.0
+    y: 100.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  type: TYPE_BOX
+  blend_mode: BLEND_MODE_ALPHA
+  texture: ""
+  id: "img"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_FIT
+  layer: ""
+  inherit_alpha: true
+  slice9 {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 0.0
+  }
+  clipping_mode: CLIPPING_MODE_NONE
+  clipping_visible: true
+  clipping_inverted: false
+  alpha: 1.0
+  template_node_child: false
+  size_mode: SIZE_MODE_AUTO
+}
+nodes {
+  position {
+    x: 360.0
+    y: 44.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 190.0
+    y: 45.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  type: TYPE_BOX
+  blend_mode: BLEND_MODE_ALPHA
+  texture: "sprites/red_button12"
+  id: "button"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_FIT
+  layer: ""
+  inherit_alpha: true
+  slice9 {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 0.0
+  }
+  clipping_mode: CLIPPING_MODE_NONE
+  clipping_visible: true
+  clipping_inverted: false
+  alpha: 1.0
+  template_node_child: false
+  size_mode: SIZE_MODE_AUTO
+}
+nodes {
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 0.5
+    y: 0.5
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 200.0
+    y: 100.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  type: TYPE_TEXT
+  blend_mode: BLEND_MODE_ALPHA
+  text: "LOAD RANDOM"
+  font: "text48"
+  id: "text"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  outline {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  shadow {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  adjust_mode: ADJUST_MODE_FIT
+  line_break: false
+  parent: "button"
+  layer: ""
+  inherit_alpha: true
+  alpha: 1.0
+  outline_alpha: 1.0
+  shadow_alpha: 1.0
+  template_node_child: false
+  text_leading: 1.0
+  text_tracking: 0.0
+}
+material: "/builtins/materials/gui.material"
+adjust_reference: ADJUST_REFERENCE_LEGACY
+max_nodes: 512

examples/gui/load_texture/load_texture.gui_script

@@ -0,0 +1,65 @@
+local function on_finish_loading(self, msg)
+	print(msg)
+	gui.set_text(self.text, "LOAD RANDOM") -- <11>
+end
+
+local function on_load_finish(self, id, res)
+	if res.status ~= 200 and res.status ~= 304 then -- <7>
+		on_finish_loading(self, "Unable to get image\n".. res.response)
+		return
+	end
+		
+	local img = image.load(res.response) -- <8>
+	if not img then 
+		on_finish_loading(self, "Unable to load image")
+		return
+	end
+	
+	if gui.new_texture(self.texture_url, img.width, img.height, img.type, img.buffer) then -- <9>
+		gui.set_texture(self.img, self.texture_url) -- <10>
+		on_finish_loading(self, "LOADED: "..self.texture_url)
+	else
+		on_finish_loading(self, "Unable to create texture")
+	end
+end
+
+local function start_load_random(self)
+	if self.texture_url then -- <4>
+		gui.delete_texture(self.texture_url) 
+	end
+	self.texture_url = "https://picsum.photos/"..math.random(100, 600)..".png"
+	http.request(self.texture_url, "GET", on_load_finish) -- <5>
+	gui.set_text(self.text, "Loading...") -- <6>
+end
+
+function init(self)
+	msg.post(".", "acquire_input_focus") -- <1>
+	self.button = gui.get_node("button") -- <2>
+	self.img = gui.get_node("img")	
+	self.text = gui.get_node("text")
+	start_load_random(self)	-- <3>
+end
+
+function on_input(self, action_id, action)
+	if action_id == hash("click") and action.pressed then
+		if gui.pick_node(self.button, action.x, action.y) then -- <12>
+			start_load_random(self) -- <3>
+		end
+	end
+end
+
+--[[
+1. Tell the engine that this game object wants to receive input.
+2. Get nodes and save them in self table
+3. Start loading random image
+4. Remove prev. created texture
+5. Make an HTTP request, and set on_load_finish method for request
+6. Change the label text.
+7. Check server responce
+8. Check is request an image, then create an image resource
+9. Create a new texture using img resource
+10. Set new texture as node texture
+11. Change the label text.
+12. Check if the click position (`action.x` and `action.y`) is within the boundaries of 
+   the button node.
+--]]

examples/gui/load_texture/load_texture.md

@@ -0,0 +1,14 @@
+---
+title: Load texture
+brief: This example shows how to load and set a dynamic texture on a gui box node.
+scripts: load_texture.gui_script
+---
+
+![button](load_texture.png)
+
+The "gui" game object contains a GUI component stored in the file *load_texture.gui*. The GUI contains
+the setup with the "button" box node for the button image, the "text" text node for the button label text and the "img" box node for loaded images.
+
+*load_texture.gui* has a script attached to it, called *load_texture.gui_script*, which contains the button logic and logic for loading images.
+
+![button gui](load_texture_gui.png)

examples/input/down_duration/down_duration.md

@@ -1,6 +1,6 @@
 ---
 title: Down duration
-brief: Listens to text input trigger "click" and count mouse down duration in update method.
+brief: Listens to input trigger "click" and count mouse down duration in update method.
 scripts: down_duration.script
 ---