Updated touch and mouse example

input/mouse_and_touch/assets/fonts/text28.font

@@ -0,0 +1,5 @@
+font: "/assets/fonts/SourceSansPro-Semibold.ttf"
+material: "/builtins/fonts/font-df.material"
+size: 28
+output_format: TYPE_DISTANCE_FIELD
+characters: " !\"#$%&\'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~"

input/mouse_and_touch/example.md

@@ -1,7 +1,40 @@
 ---
 tags: input
-title: Mouse and touch events
-brief: Shows how to read mouse/touch movement and mouse/touch button state.
+title: Mouse and Touch Events
+brief: Shows how to read mouse and/or touch movement and mouse button/touch state.
 author: Defold Foundation
 scripts: mouse_and_touch.script
+thumbnail: thumbnail.webp
 ---
+
+This example shows how to receive mouse and touch input in a script and display the current pointer position and button state.
+
+Move the mouse or touch the window to update the label.
+Press and release the left mouse button or touch the screen to see the state change.
+
+## What You'll Learn
+
+* How to acquire and release input focus
+* How to read pointer coordinates from `action.x` and `action.y`
+* How to handle the built-in `touch` action for mouse and touch input
+* How to use `action.pressed` and `action.released`
+
+## Setup
+
+The collection contains one game object with `mouse_and_touch.script` and one label component. The script receives input and updates the label text with the current pointer position and state.
+
+![setup](setup.png)
+
+The project uses the built-in `/builtins/input/all.input_bindingc` input binding.
+In that binding, the left mouse button and touch input are already mapped to the `touch` and `touch_multi` actions.
+You can create and setup your own input bindings, and remember to adjust the action ids in the scripts accordingly.
+
+![bindings](input_bindings.png)
+
+## How It Works
+
+The script asks for input focus in `init()`. After that, Defold calls `on_input()` when mouse or touch input is received.
+
+Each input action contains the current pointer position in `action.x` and `action.y`. When the action id is `hash("touch")` or `hash("touch_multi")`, the script checks `action.pressed` and `action.released` to update a small state string.
+
+The label text is written again with the pointer coordinates and the state to the local label component with `label.set_text()`.

input/mouse_and_touch/example/mouse_and_touch.collection

@@ -5,87 +5,40 @@ embedded_instances {
   data: "components {\n"
   "  id: \"mouse_and_touch\"\n"
   "  component: \"/example/mouse_and_touch.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"
   "}\n"
   "embedded_components {\n"
   "  id: \"label\"\n"
   "  type: \"label\"\n"
   "  data: \"size {\\n"
-  "  x: 128.0\\n"
+  "  x: 512.0\\n"
   "  y: 32.0\\n"
-  "  z: 0.0\\n"
-  "  w: 0.0\\n"
-  "}\\n"
-  "scale {\\n"
-  "  x: 1.0\\n"
-  "  y: 1.0\\n"
-  "  z: 1.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_SW\\n"
-  "blend_mode: BLEND_MODE_ALPHA\\n"
-  "line_break: false\\n"
   "text: \\\"Label\\\"\\n"
-  "font: \\\"/assets/text24.font\\\"\\n"
-  "material: \\\"/builtins/fonts/label.material\\\"\\n"
+  "font: \\\"/assets/fonts/text28.font\\\"\\n"
+  "material: \\\"/builtins/fonts/label-df.material\\\"\\n"
   "\"\n"
   "  position {\n"
-  "    x: 6.0\n"
-  "    y: 6.0\n"
-  "    z: 0.0\n"
+  "    x: 20.0\n"
+  "    y: 620.0\n"
   "  }\n"
-  "  rotation {\n"
-  "    x: 0.0\n"
-  "    y: 0.0\n"
-  "    z: 0.0\n"
-  "    w: 1.0\n"
+  "}\n"
+  "embedded_components {\n"
+  "  id: \"info\"\n"
+  "  type: \"label\"\n"
+  "  data: \"size {\\n"
+  "  x: 512.0\\n"
+  "  y: 32.0\\n"
+  "}\\n"
+  "pivot: PIVOT_SW\\n"
+  "text: \\\"Move mouse around and click or touch\\\"\\n"
+  "font: \\\"/assets/fonts/text28.font\\\"\\n"
+  "material: \\\"/builtins/fonts/label-df.material\\\"\\n"
+  "\"\n"
+  "  position {\n"
+  "    x: 20.0\n"
+  "    y: 670.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
-  }
 }

input/mouse_and_touch/example/mouse_and_touch.script

@@ -1,25 +1,34 @@
 function init(self)
 	msg.post(".", "acquire_input_focus") -- <1>
-	self.state = "-"
+	self.state = "released"
 end
 
+local TOUCH_ACTION_ID = hash("touch")
+local TOUCH_MULTI_ACTION_ID =hash("touch_multi")
+
 function on_input(self, action_id, action)
 	local pos = vmath.vector3(action.x, action.y, 0) -- <2>
-	if action_id == hash("touch") then  -- <3>
+	if action_id == TOUCH_ACTION_ID or action_id == TOUCH_MULTI_ACTION_ID then  -- <3>
 		if action.pressed then -- <4>
 			self.state = "pressed"
 		elseif action.released then -- <5>
-			self.state = "-"
+			self.state = "released"
 		end
 	end
-	local text = ("x: %d y: %d state: %s"):format(pos.x, pos.y, self.state)
+	local text = ("x: %d y: %d state: %s"):format(pos.x, pos.y, self.state) -- <6>
 	label.set_text("#label", text)
 end
 
+function final(self)
+	msg.post(".", "release_input_focus") -- <7>
+end
+
 --[[
 1. Tell the engine that this object ("." is shorthand for the current game object) wants to receive input. The function `on_input()` will be called whenever input is received.
-2. Read the position of the mouse pointer or touch event
-3. The left mouse button in the input bindings will also be used for touch events on a phone/tablet
-4. The 'pressed' state will be true on the frame when the mouse button/finger is pressed
-5. The 'released' state will be true on the frame when the mouse button/finger is released
+2. Read the position of the mouse pointer or touch event.
+3. The left mouse button in the input bindings will also be used for touch events on a phone/tablet.
+4. The 'pressed' state will be true starting on the frame when the mouse button/finger is pressed.
+5. The 'released' state will be true starting on the frame when the mouse button/finger is released.
+6. Rebuild the text to include the position and state and then set this text to the label.
+7. In `final` release the input focus.
 --]]

input/mouse_and_touch/game.project

@@ -59,7 +59,7 @@ max_instances = 32765
 max_emitter_count = 1024
 
 [render]
-clear_color_blue = 1.0
-clear_color_green = 1.0
-clear_color_red = 1.0
+clear_color_blue = 0.183594
+clear_color_green = 0.164063
+clear_color_red = 0.160156