Initial commit.

.gitignore

@@ -0,0 +1,13 @@
+
+.externalToolBuilders
+.DS_Store
+.lock-wscript
+build
+*.pyc
+.project
+.cproject
+builtins
+.internal
+.deps
+node_modules/
+js-web/

README.md

@@ -0,0 +1,29 @@
+# Defold examples
+
+This repository includes the Defold examples application and the tools used to explode the app to the examples section on //www.defold.com/examples
+
+## Dependencies
+
+Node.js and Gulp:
+
+```sh
+$ brew install node
+$ npm install gulp-cli -g
+$ npm install
+```
+
+## Edit and preview
+
+```sh
+$ gulp watch
+```
+
+Builds all documentation for preview and opens a browser pointing to the build root. Edits to any .md manual or image is detected, rebuilt and reloaded in browser.
+
+## Build and publish
+
+```sh
+$ ./publish_sh
+```
+
+Builds the HTML5 application with "bob". Publishing documentation to GCS is done with the `gsutil` which is part of the Google Cloud SDK. It's automatically installed if needed.

assets/cat.atlas

@@ -0,0 +1,66 @@
+images {
+  image: "/assets/cat_images/back_arm01.png"
+}
+images {
+  image: "/assets/cat_images/back_arm02.png"
+}
+images {
+  image: "/assets/cat_images/back_foot.png"
+}
+images {
+  image: "/assets/cat_images/back_leg01.png"
+}
+images {
+  image: "/assets/cat_images/back_leg02.png"
+}
+images {
+  image: "/assets/cat_images/back_paw.png"
+}
+images {
+  image: "/assets/cat_images/body.png"
+}
+images {
+  image: "/assets/cat_images/eyelids.png"
+}
+images {
+  image: "/assets/cat_images/front_arm01.png"
+}
+images {
+  image: "/assets/cat_images/front_arm02.png"
+}
+images {
+  image: "/assets/cat_images/front_foot.png"
+}
+images {
+  image: "/assets/cat_images/front_leg01.png"
+}
+images {
+  image: "/assets/cat_images/front_leg02.png"
+}
+images {
+  image: "/assets/cat_images/front_paw.png"
+}
+images {
+  image: "/assets/cat_images/hat.png"
+}
+images {
+  image: "/assets/cat_images/head.png"
+}
+images {
+  image: "/assets/cat_images/left_ear.png"
+}
+images {
+  image: "/assets/cat_images/lower_body.png"
+}
+images {
+  image: "/assets/cat_images/mouth_open.png"
+}
+images {
+  image: "/assets/cat_images/right_ear.png"
+}
+images {
+  image: "/assets/cat_images/tail.png"
+}
+margin: 0
+extrude_borders: 2
+inner_padding: 0

assets/cat.spinescene

@@ -0,0 +1,3 @@
+spine_json: "/assets/cat.json"
+atlas: "/assets/cat.atlas"
+sample_rate: 30.0

assets/sprites.atlas

@@ -0,0 +1,152 @@
+images {
+  image: "/assets/images/logo.png"
+}
+images {
+  image: "/assets/images/grid.png"
+}
+images {
+  image: "/assets/images/spinner.png"
+}
+images {
+  image: "/assets/images/elementStone019.png"
+}
+images {
+  image: "/assets/images/elementStone023.png"
+}
+images {
+  image: "/assets/images/close.png"
+}
+images {
+  image: "/assets/images/header.png"
+}
+images {
+  image: "/assets/images/bunny1_ready.png"
+}
+images {
+  image: "/assets/images/bunny2_ready.png"
+}
+images {
+  image: "/assets/images/carrot.png"
+}
+images {
+  image: "/assets/images/red_button12.png"
+}
+animations {
+  id: "bee"
+  images {
+    image: "/assets/images/Bee01.png"
+  }
+  images {
+    image: "/assets/images/Bee02.png"
+  }
+  images {
+    image: "/assets/images/Bee03.png"
+  }
+  images {
+    image: "/assets/images/Bee04.png"
+  }
+  images {
+    image: "/assets/images/Bee05.png"
+  }
+  images {
+    image: "/assets/images/Bee06.png"
+  }
+  images {
+    image: "/assets/images/Bee07.png"
+  }
+  images {
+    image: "/assets/images/Bee08.png"
+  }
+  images {
+    image: "/assets/images/Bee09.png"
+  }
+  images {
+    image: "/assets/images/Bee10.png"
+  }
+  images {
+    image: "/assets/images/Bee11.png"
+  }
+  images {
+    image: "/assets/images/Bee12.png"
+  }
+  images {
+    image: "/assets/images/Bee13.png"
+  }
+  images {
+    image: "/assets/images/Bee14.png"
+  }
+  images {
+    image: "/assets/images/Bee15.png"
+  }
+  images {
+    image: "/assets/images/Bee16.png"
+  }
+  images {
+    image: "/assets/images/Bee17.png"
+  }
+  images {
+    image: "/assets/images/Bee18.png"
+  }
+  images {
+    image: "/assets/images/Bee19.png"
+  }
+  images {
+    image: "/assets/images/Bee20.png"
+  }
+  images {
+    image: "/assets/images/Bee21.png"
+  }
+  images {
+    image: "/assets/images/Bee22.png"
+  }
+  images {
+    image: "/assets/images/Bee23.png"
+  }
+  images {
+    image: "/assets/images/Bee24.png"
+  }
+  playback: PLAYBACK_LOOP_FORWARD
+  fps: 30
+  flip_horizontal: 0
+  flip_vertical: 0
+}
+animations {
+  id: "bee_shot"
+  images {
+    image: "/assets/images/Bee_shot01.png"
+  }
+  images {
+    image: "/assets/images/Bee_shot02.png"
+  }
+  images {
+    image: "/assets/images/Bee_shot03.png"
+  }
+  images {
+    image: "/assets/images/Bee_shot04.png"
+  }
+  images {
+    image: "/assets/images/Bee_shot05.png"
+  }
+  images {
+    image: "/assets/images/Bee_shot06.png"
+  }
+  images {
+    image: "/assets/images/Bee_shot07.png"
+  }
+  images {
+    image: "/assets/images/Bee_shot08.png"
+  }
+  images {
+    image: "/assets/images/Bee_shot09.png"
+  }
+  images {
+    image: "/assets/images/Bee_shot10.png"
+  }
+  playback: PLAYBACK_ONCE_FORWARD
+  fps: 30
+  flip_horizontal: 0
+  flip_vertical: 0
+}
+margin: 0
+extrude_borders: 2
+inner_padding: 0

assets/text48.font

@@ -0,0 +1,5 @@
+font: "/assets/SourceSansPro-Semibold.ttf"
+material: "/builtins/fonts/font.material"
+size: 48
+outline_alpha: 0.0
+outline_width: 0.0

assets/text64.font

@@ -0,0 +1,3 @@
+font: "/assets/SourceSansPro-Semibold.ttf"
+material: "/builtins/fonts/font.material"
+size: 64

examples/_main/loader.go

@@ -0,0 +1,354 @@
+components {
+  id: "gui"
+  component: "/examples/_main/ui.gui"
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+}
+components {
+  id: "script"
+  component: "/examples/_main/loader.script"
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+}
+embedded_components {
+  id: "basics/simple move"
+  type: "collectionproxy"
+  data: "collection: \"/examples/basics/simple move/simple move.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
+  }
+}
+embedded_components {
+  id: "animation/spinner"
+  type: "collectionproxy"
+  data: "collection: \"/examples/animation/spinner/spinner.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
+  }
+}
+embedded_components {
+  id: "basics/message passing"
+  type: "collectionproxy"
+  data: "collection: \"/examples/basics/message passing/message passing.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
+  }
+}
+embedded_components {
+  id: "basics/follow"
+  type: "collectionproxy"
+  data: "collection: \"/examples/basics/follow/follow.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
+  }
+}
+embedded_components {
+  id: "basics/parent child"
+  type: "collectionproxy"
+  data: "collection: \"/examples/basics/parent child/parent child.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
+  }
+}
+embedded_components {
+  id: "animation/flipbook"
+  type: "collectionproxy"
+  data: "collection: \"/examples/animation/flipbook/flipbook.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
+  }
+}
+embedded_components {
+  id: "physics/dynamic"
+  type: "collectionproxy"
+  data: "collection: \"/examples/physics/dynamic/dynamic.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
+  }
+}
+embedded_components {
+  id: "physics/kinematic"
+  type: "collectionproxy"
+  data: "collection: \"/examples/physics/kinematic/kinematic.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
+  }
+}
+embedded_components {
+  id: "physics/trigger"
+  type: "collectionproxy"
+  data: "collection: \"/examples/physics/trigger/trigger.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
+  }
+}
+embedded_components {
+  id: "animation/tween"
+  type: "collectionproxy"
+  data: "collection: \"/examples/animation/tween/tween.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
+  }
+}
+embedded_components {
+  id: "basics/spawn"
+  type: "collectionproxy"
+  data: "collection: \"/examples/basics/spawn/spawn.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
+  }
+}
+embedded_components {
+  id: "gui/button"
+  type: "collectionproxy"
+  data: "collection: \"/examples/gui/button/button.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
+  }
+}
+embedded_components {
+  id: "gui/stencil"
+  type: "collectionproxy"
+  data: "collection: \"/examples/gui/stencil/stencil.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
+  }
+}
+embedded_components {
+  id: "input/move"
+  type: "collectionproxy"
+  data: "collection: \"/examples/input/move/move.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
+  }
+}
+embedded_components {
+  id: "input/text"
+  type: "collectionproxy"
+  data: "collection: \"/examples/input/text/text.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
+  }
+}
+embedded_components {
+  id: "animation/spine"
+  type: "collectionproxy"
+  data: "collection: \"/examples/animation/spine/spine.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
+  }
+}
+embedded_components {
+  id: "debug/physics"
+  type: "collectionproxy"
+  data: "collection: \"/examples/debug/physics/physics.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
+  }
+}
+embedded_components {
+  id: "debug/profile"
+  type: "collectionproxy"
+  data: "collection: \"/examples/debug/profile/profile.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/loader.script

@@ -0,0 +1,45 @@
+function init(self)
+	self.current_proxy = nil
+
+	-- Need input focus so it can be trickled down the proxies
+	msg.post(".", "acquire_input_focus")
+
+	-- Start from specific example config or menu
+	local example = sys.get_config("examples.start", nil)
+	if example then
+		msg.post("#", "load_example", { example = hash(example), nomenu = true })
+	else
+		msg.post("menu#gui", "show")
+	end
+end
+
+function on_message(self, message_id, message, sender)
+	if message_id == hash("load_example") then
+		self.current_proxy = msg.url(nil, "loader", message.example)
+		msg.post(self.current_proxy, "load")
+		self.nomenu = message.nomenu
+	elseif message_id == hash("unload_example") then
+		msg.post(self.current_proxy, "disable")
+		msg.post(self.current_proxy, "final")
+		msg.post(self.current_proxy, "unload")
+	elseif message_id == hash("proxy_loaded") then
+		msg.post(self.current_proxy, "init")
+		msg.post(self.current_proxy, "enable")
+		
+		if not self.nomenu then
+			msg.post("#gui", "show")
+			msg.post("menu#gui", "hide")
+		end
+	elseif message_id == hash("proxy_unloaded") then
+		msg.post("#gui", "hide")
+		msg.post("menu#gui", "show")
+		
+	elseif message_id == hash("set_time_step") then
+		msg.post(self.current_proxy, "set_time_step", message)
+	end
+end
+
+function on_reload(self)
+--	msg.post("loader", "load_example", { example = hash("basics/simple move")})
+	msg.post("loader", "unload_example")
+end

examples/_main/menu.gui

@@ -0,0 +1,300 @@
+script: "/examples/_main/menu.gui_script"
+fonts {
+  name: "text48"
+  font: "/assets/text48.font"
+}
+fonts {
+  name: "text64"
+  font: "/assets/text64.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: 720.0
+    y: 720.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 0.9764706
+    y: 0.9764706
+    z: 0.9764706
+    w: 1.0
+  }
+  type: TYPE_BOX
+  blend_mode: BLEND_MODE_ALPHA
+  texture: ""
+  id: "background"
+  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_MANUAL
+}
+nodes {
+  position {
+    x: 0.0
+    y: 720.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: 1920.0
+    y: 186.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/header"
+  id: "box"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_NW
+  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: 56.971
+    y: 679.482
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 0.3
+    y: 0.3
+    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: "DEFOLD EXAMPLES"
+  font: "text64"
+  id: "headline"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_W
+  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
+  layer: ""
+  inherit_alpha: true
+  alpha: 1.0
+  outline_alpha: 0.0
+  shadow_alpha: 1.0
+  template_node_child: false
+  text_leading: 1.0
+  text_tracking: 0.05
+}
+nodes {
+  position {
+    x: 35.986
+    y: 679.562
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 0.2
+    y: 0.2
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 128.0
+    y: 128.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/logo"
+  id: "logo"
+  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: 50.0
+    y: 600.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 0.3
+    y: 0.3
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 80.0
+    y: 80.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/close"
+  id: "close"
+  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
+}
+material: "/builtins/materials/gui.material"
+adjust_reference: ADJUST_REFERENCE_LEGACY
+max_nodes: 512

examples/_main/menu.gui_script

@@ -0,0 +1,165 @@
+local function create_layout(items, bl, tr, max_dy)
+	local xi = math.ceil(math.sqrt(items) / 1.5)
+	local yi = math.ceil(items / xi)
+
+	local dx = (tr.x - bl.x) / xi
+	local dy = (tr.y - bl.y) / yi
+	
+	if dy > max_dy then
+		dy = max_dy
+	end
+	
+	local layout = {}
+	local c = items
+	for y = 1,yi do
+		for x = 1,xi do
+			local xp = bl.x + dx / 2 + dx * (x - 1)
+			local yp = tr.y - dy / 2 - dy * (y - 1)
+			table.insert(layout, vmath.vector3(xp, yp, 0))
+		end
+	end
+	return layout
+end
+
+local function create_cat_nodes(self, layout)
+	-- create category nodes
+	self.categories = {}
+	local c = 1
+	for t, cat in ipairs(self.index) do
+		local p = layout[c]
+		local n = gui.new_text_node(p, cat)
+		gui.set_color(n, vmath.vector4(0.2, 0.2, 0.2, 1.0))
+		gui.set_font(n, "text64")
+		gui.set_scale(n, vmath.vector3(0.5, 0.5, 1.0))
+		local m = gui.get_text_metrics_from_node(n)
+		local size = vmath.vector3(m.width, m.height, 1)
+		gui.set_size(n, size)
+		table.insert(self.categories, { node = n, category = cat, pos = p, size = size * 0.5 })
+		c = c + 1
+	end
+end
+
+local function create_example_nodes(self, category, layout)
+	-- create example nodes
+	self.examples = {}
+	local c = 1
+	for t, ex in ipairs(self.index[category]) do
+		local p = layout[c]
+		local n = gui.new_text_node(p, ex)
+		gui.set_color(n, vmath.vector4(0.2, 0.2, 0.2, 1.0))
+		gui.set_font(n, "text48")
+		gui.set_scale(n, vmath.vector3(0.5, 0.5, 1.0))
+		local m = gui.get_text_metrics_from_node(n)
+		local size = vmath.vector3(m.width, m.height, 1)
+		gui.set_size(n, size)
+		local example = hash(category .. "/" .. ex)
+		table.insert(self.examples, { node = n, example = example })
+		c = c + 1
+	end
+end
+
+local function show_categories(self)
+	self.state = "categories"
+	local closenode = gui.get_node("close")	
+	gui.set_enabled(closenode, false)
+	-- delete example nodes
+	for i, ex in ipairs(self.examples) do
+		gui.delete_node(ex.node)
+	end
+	self.examples = {}
+	
+	for i, cat in ipairs(self.categories) do
+		gui.set_enabled(cat.node, true)
+		gui.set_position(cat.node, cat.pos)		
+	end
+end
+
+local function cat_expand(self)
+	local closenode = gui.get_node("close")
+	gui.set_enabled(closenode, true)
+	
+	local ex = self.index[self.current_category]
+	local layout = create_layout(#ex, self.bl, self.tr, 100)
+	create_example_nodes(self, self.current_category, layout)
+end
+
+local function show_category(self, category)
+	self.state = "category"
+	self.current_category = category
+	for i, cat in ipairs(self.categories) do
+		if cat.category == category then
+			local pos = vmath.vector3(50, 600, 0)
+			local m = gui.get_text_metrics_from_node(cat.node)
+			pos.x = pos.x + cat.size.x / 2 + 20
+			gui.animate(cat.node, "position", pos, gui.EASING_INOUTQUAD, 0.3, 0, cat_expand)
+		else
+			gui.set_enabled(cat.node, false)			
+		end
+	end	
+end
+
+function init(self)
+	self.index = { "basics", "physics", "animation", "gui", "input", "audio", "render", "camera", "debug" }
+	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["input"] = { "move", "text" }
+	self.index["audio"] = { "lorem ipsum" }
+	self.index["render"] = { "lorem ipsum" }
+	self.index["camera"] = { "lorem ipsum" }
+	self.index["debug"] = { "physics", "profile" }
+
+	self.examples = {}
+	self.categories = {}
+
+	self.bl = vmath.vector3(50, 50, 0)
+	self.tr = vmath.vector3(670, 560, 0)
+	
+	local cat_layout = create_layout(#self.index, self.bl, self.tr, 100)
+	create_cat_nodes(self, cat_layout)
+	
+	show_categories(self)
+	
+	msg.post(".", "disable")
+	msg.post("#", "release_input_focus")
+end
+
+function on_message(self, message_id, message, sender)
+	if message_id == hash("show") then
+		msg.post(".", "enable")
+		msg.post("#", "acquire_input_focus")
+	elseif message_id == hash("hide") then
+		msg.post(".", "disable")
+		msg.post("#", "release_input_focus")
+	end
+end
+
+function on_input(self, action_id, action)
+	if action_id == hash("click") and action.pressed then
+		if self.state == "categories" then
+			for i, cat in ipairs(self.categories) do
+				if gui.pick_node(cat.node, action.x, action.y) then
+					show_category(self, cat.category)
+				end
+			end		
+		end
+	
+		if self.state == "category" then
+			local n = gui.get_node("close")	
+			if gui.pick_node(n, action.x, action.y) then
+				show_categories(self)
+			end
+			
+			for i, ex in ipairs(self.examples) do
+				if gui.pick_node(ex.node, action.x, action.y) then
+					msg.post("/loader#script", "load_example", { example = ex.example })
+				end
+			end			
+		end
+	end
+end
+
+function on_reload(self)
+	msg.post(".", "disable")
+end

examples/_main/ui.gui

@@ -0,0 +1,76 @@
+script: "/examples/_main/ui.gui_script"
+fonts {
+  name: "text32"
+  font: "/assets/text48.font"
+}
+fonts {
+  name: "text64"
+  font: "/assets/text64.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: 690.0
+    y: 690.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 0.3
+    y: 0.3
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 80.0
+    y: 80.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/close"
+  id: "close"
+  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
+}
+material: "/builtins/materials/gui.material"
+adjust_reference: ADJUST_REFERENCE_LEGACY
+max_nodes: 512

examples/_main/ui.gui_script

@@ -0,0 +1,28 @@
+function init(self)
+	self.closenode = gui.get_node("close")
+	msg.post("#", "hide")
+	msg.post("#", "acquire_input_focus")
+end
+
+function on_message(self, message_id, message, sender)
+	if message_id == hash("show") then
+		self.active = true
+		gui.set_enabled(self.closenode, self.active)
+	elseif message_id == hash("hide") then
+		self.active = false
+		gui.set_enabled(self.closenode, self.active)
+	end
+end
+
+function on_input(self, action_id, action)
+	if action_id == hash("click") and action.pressed and self.active then
+		if gui.pick_node(self.closenode, action.x, action.y) then
+			msg.post("/loader#script", "unload_example")
+		end
+	end	
+end
+
+function on_reload(self)
+	-- Add input-handling code here
+	-- Remove this function if not needed
+end

examples/animation/flipbook/flipbook.collection

@@ -0,0 +1,42 @@
+name: "default"
+scale_along_z: 0
+embedded_instances {
+  id: "bee"
+  data: "embedded_components {\n"
+  "  id: \"sprite\"\n"
+  "  type: \"sprite\"\n"
+  "  data: \"tile_set: \\\"/assets/sprites.atlas\\\"\\n"
+  "default_animation: \\\"bee\\\"\\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: 360.0
+    y: 360.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/animation/flipbook/flipbook.md

@@ -0,0 +1,10 @@
+---
+title: Flipbook animation
+brief: This example shows how to use a flipbook animation in a sprite
+---
+
+![flipbook](flipbook.png)
+
+The sprite component in the game object uses a flipbook animation that is set up in an atlas:
+
+![atlas](atlas.png)