Added animation delay example. (#170)

Author: paweljarosz

animation/animation_delay/all.texture_profiles

@@ -0,0 +1,18 @@
+path_settings {
+  path: "**"
+  profile: "Default"
+}
+profiles {
+  name: "Default"
+  platforms {
+    os: OS_ID_GENERIC
+    formats {
+      format: TEXTURE_FORMAT_RGBA
+      compression_level: BEST
+      compression_type: COMPRESSION_TYPE_DEFAULT
+    }
+    mipmaps: false
+    max_texture_size: 0
+    premultiply_alpha: true
+  }
+}

animation/animation_delay/assets/images/logo-color.png

@@ -0,0 +1,4 @@
+images {
+  image: "/assets/images/logo-color.png"
+}
+extrude_borders: 2

animation/animation_delay/assets/sprites.atlas

@@ -0,0 +1,24 @@
+---
+tags: animation, delay
+title: Animation Delay - Wave
+brief: This example shows how to use the delay parameter of `go.animate()` to create a wave effect.
+author: Defold Foundation
+scripts: animation_delay.script
+thumbnail: thumbnail.png
+---
+
+This example shows how to use the `delay` parameter of `go.animate()` (or `gui.animate()`) to create a wave effect.
+
+## Setup
+
+The collection contains four game objects aligned in a row next to each other. The additional `controller` game object has the script that starts one animation for each sprite.
+
+![setup](setup.png)
+
+## How It Works
+
+Four game objects start the same `position.y` ping-pong animation, but each one begins slightly later than the previous sprite. The result is a simple wave that makes the `delay` argument easy to see.
+
+The script stores the four target URLs in a table and loops over them with `ipairs()`. Each call to `go.animate()` uses the same target value, easing, duration, and playback mode.
+
+The only thing that changes per sprite is the argument: `delay`. Multiplying the sprite index by `0.15` seconds offsets each start time just enough to produce a clear staggered wave.

animation/animation_delay/example.md

@@ -0,0 +1,86 @@
+name: "default"
+scale_along_z: 0
+embedded_instances {
+  id: "ship_1"
+  data: "embedded_components {\n"
+  "  id: \"sprite\"\n"
+  "  type: \"sprite\"\n"
+  "  data: \"default_animation: \\\"logo-color\\\"\\n"
+  "material: \\\"/builtins/materials/sprite.material\\\"\\n"
+  "textures {\\n"
+  "  sampler: \\\"texture_sampler\\\"\\n"
+  "  texture: \\\"/assets/sprites.atlas\\\"\\n"
+  "}\\n"
+  "\"\n"
+  "}\n"
+  ""
+  position {
+    x: 120.0
+    y: 180.0
+  }
+}
+embedded_instances {
+  id: "ship_2"
+  data: "embedded_components {\n"
+  "  id: \"sprite\"\n"
+  "  type: \"sprite\"\n"
+  "  data: \"default_animation: \\\"logo-color\\\"\\n"
+  "material: \\\"/builtins/materials/sprite.material\\\"\\n"
+  "textures {\\n"
+  "  sampler: \\\"texture_sampler\\\"\\n"
+  "  texture: \\\"/assets/sprites.atlas\\\"\\n"
+  "}\\n"
+  "\"\n"
+  "}\n"
+  ""
+  position {
+    x: 280.0
+    y: 180.0
+  }
+}
+embedded_instances {
+  id: "ship_3"
+  data: "embedded_components {\n"
+  "  id: \"sprite\"\n"
+  "  type: \"sprite\"\n"
+  "  data: \"default_animation: \\\"logo-color\\\"\\n"
+  "material: \\\"/builtins/materials/sprite.material\\\"\\n"
+  "textures {\\n"
+  "  sampler: \\\"texture_sampler\\\"\\n"
+  "  texture: \\\"/assets/sprites.atlas\\\"\\n"
+  "}\\n"
+  "\"\n"
+  "}\n"
+  ""
+  position {
+    x: 440.0
+    y: 180.0
+  }
+}
+embedded_instances {
+  id: "ship_4"
+  data: "embedded_components {\n"
+  "  id: \"sprite\"\n"
+  "  type: \"sprite\"\n"
+  "  data: \"default_animation: \\\"logo-color\\\"\\n"
+  "material: \\\"/builtins/materials/sprite.material\\\"\\n"
+  "textures {\\n"
+  "  sampler: \\\"texture_sampler\\\"\\n"
+  "  texture: \\\"/assets/sprites.atlas\\\"\\n"
+  "}\\n"
+  "\"\n"
+  "}\n"
+  ""
+  position {
+    x: 600.0
+    y: 180.0
+  }
+}
+embedded_instances {
+  id: "controller"
+  data: "components {\n"
+  "  id: \"script\"\n"
+  "  component: \"/example/animation_delay.script\"\n"
+  "}\n"
+  ""
+}

animation/animation_delay/example/animation_delay.collection

@@ -0,0 +1,16 @@
+local TARGET_URLS = { "/ship_1", "/ship_2", "/ship_3", "/ship_4" } -- <1>
+local WAVE_HEIGHT = 420 -- <2>
+local STEP_DELAY = 0.15
+
+function init(self)
+	for i, url in ipairs(TARGET_URLS) do -- <3>
+		go.animate(url, "position.y", go.PLAYBACK_LOOP_PINGPONG, WAVE_HEIGHT, go.EASING_INOUTSINE, 1.2, i * STEP_DELAY) -- <4>
+	end
+end
+
+--[[
+1. The script animates the four game objects with sprites and in table we put the paths for the ships in the same collection.
+2. All ships move to the same target peak Y value, and the wave is created by timing.
+3. Loop over the four sprite game objects that should be animated.
+4. Start the same ping-pong animation on each game object, but set the seventh `go.animate()` argument (`delay`) to `i * 0.15`. That staggered start time creates the wave effect.
+]]

animation/animation_delay/example/animation_delay.script

@@ -0,0 +1,66 @@
+[project]
+title = Animation Delay
+version = 0.1
+developer = Defold Foundation
+
+[bootstrap]
+main_collection = /example/animation_delay.collectionc
+
+[input]
+game_binding = /builtins/input/all.input_bindingc
+repeat_interval = 0.05
+
+[display]
+width = 720
+height = 720
+high_dpi = 1
+
+[physics]
+scale = 0.02
+gravity_y = -500.0
+
+[script]
+shared_state = 1
+
+[collection_proxy]
+max_count = 256
+
+[label]
+subpixels = 1
+
+[sprite]
+subpixels = 1
+max_count = 32765
+
+[windows]
+iap_provider = 
+
+[android]
+package = com.defold.examples
+
+[ios]
+bundle_identifier = com.defold.examples
+
+[osx]
+bundle_identifier = com.defold.examples
+
+[html5]
+show_fullscreen_button = 0
+show_made_with_defold = 0
+scale_mode = no_scale
+heap_size = 64
+
+[graphics]
+texture_profiles = /all.texture_profiles
+
+[collection]
+max_instances = 32765
+
+[particle_fx]
+max_emitter_count = 1024
+
+[render]
+clear_color_blue = 0.183594
+clear_color_green = 0.164063
+clear_color_red = 0.160156
+