Переглянути джерело

Added sprite samplers example

Björn Ritzl 6 місяців тому
батько
коміт
e12906523e

+ 1 - 0
.gitignore

@@ -18,3 +18,4 @@ node_modules/
 .DS_Store
 /.editor_settings
 factory/bullets/.editor_settings
+sprite/samplers/.editor_settings

+ 18 - 0
sprite/samplers/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
+  }
+}

+ 24 - 0
sprite/samplers/example.md

@@ -0,0 +1,24 @@
+---
+tags: sprite
+title: Multiple Sprite Samplers
+brief: This example shows how to sample from more than one image when drawing a sprite
+scripts: multi_sprite.script, multi_sprite.fp
+---
+
+The example uses a sprite with a material with two samplers:
+
+![](example/multi_sprite_material.png)
+
+The samplers are assigned to two atlases, `one.atlas` and `two.atlas`:
+
+![](example/multi_sample_collection.png)
+
+Each atlas contains a Defold logo:
+
+![](example/one_atlas.png)
+
+![](example/two_atlas.png)
+
+Note the rename pattern in `two.atlas`. The rename pattern is required so that it is possible to sample from the same location in both atlases. 
+
+The color data from the two samplers is mixed/interpolated in the fragment program to produce a final color. The amount of interpolation is controlled in the `mix_amount` fragment constant. The `mix_amount` is animated between 0.0 and 1.0 in the `multi_sprite.script`

+ 29 - 0
sprite/samplers/example/multi_sample.collection

@@ -0,0 +1,29 @@
+name: "multi_sample"
+scale_along_z: 0
+embedded_instances {
+  id: "logo"
+  data: "components {\n"
+  "  id: \"multi_sample\"\n"
+  "  component: \"/example/multi_sample.script\"\n"
+  "}\n"
+  "embedded_components {\n"
+  "  id: \"sprite\"\n"
+  "  type: \"sprite\"\n"
+  "  data: \"default_animation: \\\"logo_256\\\"\\n"
+  "material: \\\"/example/multi_sprite.material\\\"\\n"
+  "textures {\\n"
+  "  sampler: \\\"texture1_sampler\\\"\\n"
+  "  texture: \\\"/example/one.atlas\\\"\\n"
+  "}\\n"
+  "textures {\\n"
+  "  sampler: \\\"texture2_sampler\\\"\\n"
+  "  texture: \\\"/example/two.atlas\\\"\\n"
+  "}\\n"
+  "\"\n"
+  "}\n"
+  ""
+  position {
+    x: 360.0
+    y: 360.0
+  }
+}

+ 3 - 0
sprite/samplers/example/multi_sample.script

@@ -0,0 +1,3 @@
+function init(self)
+	go.animate("logo#sprite", "mix_amount.x", go.PLAYBACK_LOOP_PINGPONG, 1.0, go.EASING_INOUTQUAD, 2)
+end

BIN
sprite/samplers/example/multi_sample_collection.png


+ 19 - 0
sprite/samplers/example/multi_sprite.fp

@@ -0,0 +1,19 @@
+varying mediump vec2 var_texcoord0;
+
+uniform lowp sampler2D texture1_sampler;
+uniform lowp sampler2D texture2_sampler;
+uniform lowp vec4 tint;
+uniform lowp vec4 mix_amount;
+
+void main()
+{
+    // Pre-multiply alpha since all runtime textures already are
+    lowp vec4 tint_pm = vec4(tint.xyz * tint.w, tint.w);
+    // sample from both textures
+    lowp vec4 color1 = texture2D(texture1_sampler, var_texcoord0.xy);
+    lowp vec4 color2 = texture2D(texture2_sampler, var_texcoord0.xy);
+    // mix (interpolate) the colors by the mix_amount
+    lowp vec4 colormix = mix(color1, color2, mix_amount.x);
+    // apply tint
+    gl_FragColor = colormix * tint_pm;
+}

+ 38 - 0
sprite/samplers/example/multi_sprite.material

@@ -0,0 +1,38 @@
+name: "sprite"
+tags: "tile"
+vertex_program: "/builtins/materials/sprite.vp"
+fragment_program: "/example/multi_sprite.fp"
+vertex_constants {
+  name: "view_proj"
+  type: CONSTANT_TYPE_VIEWPROJ
+}
+fragment_constants {
+  name: "tint"
+  type: CONSTANT_TYPE_USER
+  value {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+}
+fragment_constants {
+  name: "mix_amount"
+  type: CONSTANT_TYPE_USER
+  value {
+  }
+}
+samplers {
+  name: "texture1_sampler"
+  wrap_u: WRAP_MODE_CLAMP_TO_EDGE
+  wrap_v: WRAP_MODE_CLAMP_TO_EDGE
+  filter_min: FILTER_MODE_MIN_DEFAULT
+  filter_mag: FILTER_MODE_MAG_DEFAULT
+}
+samplers {
+  name: "texture2_sampler"
+  wrap_u: WRAP_MODE_CLAMP_TO_EDGE
+  wrap_v: WRAP_MODE_CLAMP_TO_EDGE
+  filter_min: FILTER_MODE_MIN_DEFAULT
+  filter_mag: FILTER_MODE_MAG_DEFAULT
+}

BIN
sprite/samplers/example/multi_sprite_material.png


+ 4 - 0
sprite/samplers/example/one.atlas

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

BIN
sprite/samplers/example/one_atlas.png


+ 5 - 0
sprite/samplers/example/two.atlas

@@ -0,0 +1,5 @@
+images {
+  image: "/builtins/assets/images/logo/logo_blue_256.png"
+}
+extrude_borders: 2
+rename_patterns: "_blue="

BIN
sprite/samplers/example/two_atlas.png


+ 65 - 0
sprite/samplers/game.project

@@ -0,0 +1,65 @@
+[project]
+title = Defold-examples
+version = 0.1
+
+[bootstrap]
+main_collection = /example/multi_sample.collectionc
+
+[input]
+game_binding = /input/game.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 = 1.0
+clear_color_green = 1.0
+clear_color_red = 1.0
+

+ 44 - 0
sprite/samplers/input/game.input_binding

@@ -0,0 +1,44 @@
+key_trigger {
+  input: KEY_UP
+  action: "up"
+}
+key_trigger {
+  input: KEY_DOWN
+  action: "down"
+}
+key_trigger {
+  input: KEY_LEFT
+  action: "left"
+}
+key_trigger {
+  input: KEY_RIGHT
+  action: "right"
+}
+key_trigger {
+  input: KEY_BACKSPACE
+  action: "backspace"
+}
+key_trigger {
+  input: KEY_SPACE
+  action: "action"
+}
+mouse_trigger {
+  input: MOUSE_BUTTON_LEFT
+  action: "touch"
+}
+mouse_trigger {
+  input: MOUSE_WHEEL_UP
+  action: "wheel_up"
+}
+mouse_trigger {
+  input: MOUSE_WHEEL_DOWN
+  action: "wheel_down"
+}
+touch_trigger {
+  input: TOUCH_MULTI
+  action: "multitouch"
+}
+text_trigger {
+  input: TEXT
+  action: "type"
+}