Merge pull request #19 from FlexYourBrain/master

Slice9 Example

assets/sprites.atlas

@@ -54,6 +54,10 @@ images {
   image: "/assets/images/elementMetal001.png"
   sprite_trim_mode: SPRITE_TRIM_MODE_OFF
 }
+images {
+  image: "/assets/images/plank_slice.png"
+  sprite_trim_mode: SPRITE_TRIM_MODE_OFF
+}
 animations {
   id: "bee"
   images {

examples/_main/loader.go

@@ -802,3 +802,22 @@ embedded_components {
     w: 1.0
   }
 }
+embedded_components {
+  id: "gui/slice9"
+  type: "collectionproxy"
+  data: "collection: \"/examples/gui/slice9/slice9.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

@@ -104,7 +104,7 @@ function init(self)
 	self.index["basics"] = { "simple_move", "message_passing", "follow", "parent_child", "spawn", "z_order", "movement_speed" }
 	self.index["physics"] = { "dynamic", "kinematic", "raycast", "trigger", "hinge_joint", "pendulum"}
 	self.index["animation"] = { "spinner", "flipbook", "chained_tween", "basic_tween", "spine", "cursor" }
-	self.index["gui"] = { "button", "stencil", "load_texture", "pointer_over", "color"}
+	self.index["gui"] = { "button", "stencil", "load_texture", "pointer_over", "color", "slice9" }
 	self.index["input"] = { "move", "text", "down_duration", "mouse_and_touch" }
 	self.index["particles"] = { "particlefx", "modifiers" }
 	self.index["sound"] = { "music", "fade_in_out", "panning" }

examples/gui/slice9/slice9.collection

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

@@ -0,0 +1,71 @@
+script: "/examples/gui/slice9/slice9.gui_script"
+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: 90.0
+    y: 91.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/plank_slice"
+  id: "slice_box"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_FIT
+  layer: "slice"
+  inherit_alpha: false
+  slice9 {
+    x: 38.0
+    y: 38.0
+    z: 38.0
+    w: 39.0
+  }
+  clipping_mode: CLIPPING_MODE_NONE
+  clipping_visible: true
+  clipping_inverted: false
+  alpha: 1.0
+  template_node_child: false
+  size_mode: SIZE_MODE_MANUAL
+}
+layers {
+  name: "slice"
+}
+material: "/builtins/materials/gui.material"
+adjust_reference: ADJUST_REFERENCE_PARENT
+max_nodes: 512

examples/gui/slice9/slice9.gui_script

@@ -0,0 +1,44 @@
+local shape1 = vmath.vector3(660,576,0)  --  < 1 >
+local shape2 = vmath.vector3(150,500,0)
+local shape3 = vmath.vector3(350,250,0)
+
+local function getshape(self)  --  < 2 >
+	local node = gui.get_node("slice_box")
+	local function animate_size(node, shape)  --  < 3 >
+		gui.animate(node, "size", shape, gui.EASING_INOUTCUBIC, 1.75, 2.5, getshape, gui.PLAYBACK_ONCE_FORWARD)
+	end
+	if self.shape_number == 1 then
+		animate_size(node, shape1)
+		self.shape_number = 2
+	elseif self.shape_number == 2 then
+		animate_size(node, shape2)
+		self.shape_number = 3
+	else
+		animate_size(node, shape3)
+		self.shape_number = 1
+	end
+end
+
+function init(self)  --  < 4 >
+	self.shape_number = 1
+	getshape(self)
+end
+
+--[[
+
+1.-Here we create 3 local vector3's representing 3 different sizes for use when animating
+	the gui node size property.
+
+2.-getshape() function gets our slice-9 gui node then an if statement is used to check
+	the shape_number variable and animate_size is set accordingly and shape_number is
+	changed for the next shape.
+
+3.-The function animate_size() takes in the node and shape vector3 and uses them
+	with gui.animate. Here we animate the "size" of the node and after the animation is
+	complete getshape function is called again and a different shape "size" will be animated
+	once again.
+
+4.-In the initialize function we set self.shape_number to 1 and call getshape function to
+	start the looping chained animation.
+
+--]]

examples/gui/slice9/slice9.md

@@ -0,0 +1,23 @@
+---
+title: Slice-9
+brief: This example demonstrates slice-9 scaling gui box node.
+scripts: slice9.gui_script
+---
+
+Overview : Using a small stylized image (90x91 pixels) we apply it to a gui node and set the slice-9 properties, we can then 
+adjust the size and retain the styling without streching and distortion. [:More on Slice-9 with Defold:](https://defold.com/manuals/gui-box/#slice-9-texturing)
+
+![slice9](slice9.png)
+
+The setup consists of a gui collection, gui script, a box node and a texture atlas
+
+Box Node
+: contains:
+  - A texture set to stylized wood plank image.
+  - Size Mode set to Manual
+  - Slice 9 adjusted settings
+  
+Gui script
+: Use:
+  - For animating the node to different sizes, showing slice-9 at its potential.  
+