Browse Source

Added sprite cursor example

Björn Ritzl 1 month ago
parent
commit
fcde5dc0eb

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

BIN
sprite/cursor/assets/SourceSansPro-Semibold.ttf


+ 13 - 0
sprite/cursor/assets/controls.atlas

@@ -0,0 +1,13 @@
+images {
+  image: "/assets/images/arrowLeft.png"
+}
+images {
+  image: "/assets/images/arrowRight.png"
+}
+images {
+  image: "/assets/images/start.png"
+}
+images {
+  image: "/assets/images/stop.png"
+}
+extrude_borders: 2

BIN
sprite/cursor/assets/images/arrowLeft.png


BIN
sprite/cursor/assets/images/arrowRight.png


BIN
sprite/cursor/assets/images/character_robot_sheet.png


BIN
sprite/cursor/assets/images/start.png


BIN
sprite/cursor/assets/images/stop.png


+ 11 - 0
sprite/cursor/assets/robot.tilesource

@@ -0,0 +1,11 @@
+image: "/assets/images/character_robot_sheet.png"
+tile_width: 96
+tile_height: 128
+animations {
+  id: "walk"
+  start_tile: 37
+  end_tile: 44
+  playback: PLAYBACK_NONE
+  fps: 8
+}
+extrude_borders: 2

+ 5 - 0
sprite/cursor/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

BIN
sprite/cursor/collection.png


BIN
sprite/cursor/cursor_thumb.png


+ 16 - 0
sprite/cursor/example.md

@@ -0,0 +1,16 @@
+---
+tags: sprite
+title: Sprite cursor
+brief: This example shows how to use the sprite animation cursor and frame count to manually select a specific frame
+author: Defold Foundation
+scripts: cursor.script
+thumbnail: cursor_thumb.png
+---
+
+The example contains a sprite with a tilesource animation of a walking robot. The animation consists of 8 frames:
+
+![tilesource](tilesource.png)
+
+The example also contains a script and some visual controls that can be used to step through or automatically play the tilesource animation using the animation cursor:
+
+![collection](collection.png)

+ 95 - 0
sprite/cursor/example/cursor.collection

@@ -0,0 +1,95 @@
+name: "default"
+scale_along_z: 0
+embedded_instances {
+  id: "robot"
+  data: "components {\n"
+  "  id: \"cursor\"\n"
+  "  component: \"/example/cursor.script\"\n"
+  "}\n"
+  "embedded_components {\n"
+  "  id: \"sprite\"\n"
+  "  type: \"sprite\"\n"
+  "  data: \"default_animation: \\\"walk\\\"\\n"
+  "material: \\\"/builtins/materials/sprite.material\\\"\\n"
+  "textures {\\n"
+  "  sampler: \\\"texture_sampler\\\"\\n"
+  "  texture: \\\"/assets/robot.tilesource\\\"\\n"
+  "}\\n"
+  "\"\n"
+  "}\n"
+  "embedded_components {\n"
+  "  id: \"frame\"\n"
+  "  type: \"label\"\n"
+  "  data: \"size {\\n"
+  "  x: 128.0\\n"
+  "  y: 32.0\\n"
+  "}\\n"
+  "color {\\n"
+  "  x: 0.0\\n"
+  "  y: 0.0\\n"
+  "  z: 0.0\\n"
+  "}\\n"
+  "font: \\\"/assets/text48.font\\\"\\n"
+  "material: \\\"/builtins/fonts/label-df.material\\\"\\n"
+  "\"\n"
+  "  position {\n"
+  "    y: -90.0\n"
+  "  }\n"
+  "}\n"
+  ""
+  position {
+    x: 360.0
+    y: 217.0
+  }
+}
+embedded_instances {
+  id: "controls"
+  data: "embedded_components {\n"
+  "  id: \"leftsprite\"\n"
+  "  type: \"sprite\"\n"
+  "  data: \"default_animation: \\\"arrowLeft\\\"\\n"
+  "material: \\\"/builtins/materials/sprite.material\\\"\\n"
+  "textures {\\n"
+  "  sampler: \\\"texture_sampler\\\"\\n"
+  "  texture: \\\"/assets/controls.atlas\\\"\\n"
+  "}\\n"
+  "\"\n"
+  "  position {\n"
+  "    x: -301.0\n"
+  "  }\n"
+  "}\n"
+  "embedded_components {\n"
+  "  id: \"rightsprite\"\n"
+  "  type: \"sprite\"\n"
+  "  data: \"default_animation: \\\"arrowRight\\\"\\n"
+  "material: \\\"/builtins/materials/sprite.material\\\"\\n"
+  "size {\\n"
+  "  x: 50.0\\n"
+  "  y: 50.0\\n"
+  "}\\n"
+  "textures {\\n"
+  "  sampler: \\\"texture_sampler\\\"\\n"
+  "  texture: \\\"/assets/controls.atlas\\\"\\n"
+  "}\\n"
+  "\"\n"
+  "  position {\n"
+  "    x: 300.0\n"
+  "  }\n"
+  "}\n"
+  "embedded_components {\n"
+  "  id: \"playstop\"\n"
+  "  type: \"sprite\"\n"
+  "  data: \"default_animation: \\\"start\\\"\\n"
+  "material: \\\"/builtins/materials/sprite.material\\\"\\n"
+  "textures {\\n"
+  "  sampler: \\\"texture_sampler\\\"\\n"
+  "  texture: \\\"/assets/controls.atlas\\\"\\n"
+  "}\\n"
+  "\"\n"
+  "}\n"
+  ""
+  position {
+    x: 360.0
+    y: 50.0
+  }
+}

+ 89 - 0
sprite/cursor/example/cursor.script

@@ -0,0 +1,89 @@
+-- step animation forward or backwards 'amount' number of frames
+local function step(self, amount)
+	-- frame_count is the number of frames in the current animationm 
+	local frame_count = go.get("#sprite", "frame_count")
+	-- cursor is the normalized (0.0 to 1.0) animation cursor
+	local cursor = go.get("#sprite", "cursor")
+
+	-- normalized length of a frame in the current animation
+	local frame_length = 1 / frame_count
+
+	-- move the cursor amount number of frames
+	cursor = cursor + (frame_length * amount)
+
+	-- wrap animation if advancing beyond the first or last frame
+	if cursor < 0 then
+		cursor = cursor + 1
+	elseif cursor >= 1 then
+		cursor = cursor - 1
+	end
+
+	-- set new sprite cursor position
+	go.set("#sprite", "cursor", cursor)
+
+	-- calculate the current animation frame and show on a label
+	local current_frame = 1 + math.floor(cursor * frame_count)
+	label.set_text("#frame", ("%d / %d"):format(current_frame, frame_count))
+end
+
+-- stop automatic animation playback
+local function stop(self)
+	-- only try to stop if there is an active timer
+	if self.playback_timer then
+		-- visually update the start/stop sprite to show the 'start image
+		sprite.play_flipbook("controls#playstop", "start")
+		-- cancel the animation timer
+		timer.cancel(self.playback_timer)
+		self.playback_timer = nil
+	end
+end
+
+-- start automatic animation playback using a timer to advance the animation
+-- one frame at a time
+local function start(self)
+	-- visually update the start/stop sprite to show the 'stop' image
+	sprite.play_flipbook("controls#playstop", "stop")
+	-- start a timer to advance the animation roughly every 0.15 seconds
+	self.playback_timer = timer.delay(0.15, true, function()
+		step(self, 1)
+	end)
+end
+
+function init(self)
+	msg.post(".", "acquire_input_focus")
+	self.playback_timer = nil
+end
+
+function on_input(self, action_id, action)
+	if action.pressed then
+		-- key left or mouse click on left part of screen
+		-- step animation one frame backwards
+		if action_id == hash("key_left")
+		or action_id == hash("mouse_button_left") and action.x < 240
+		then
+			stop(self)
+			step(self, -1)
+			return
+		end
+		
+		-- key right or mouse click on right part of the screen
+		-- step animation one frame forward	
+		if action_id == hash("key_right")
+		or action_id == hash("mouse_button_left") and action.x > 480 then
+			stop(self)
+			step(self, 1)
+			return
+		end
+
+		-- key space or mouse click in central part of the screen
+		-- start or stop animation playback
+		if action_id == hash("key_space")
+		or action_id == hash("mouse_button_left") and action.x > 240 and action.x < 480 then
+			if self.playback_timer then
+				stop(self)
+			else
+				start(self)
+			end
+		end
+	end
+end

+ 65 - 0
sprite/cursor/game.project

@@ -0,0 +1,65 @@
+[project]
+title = Sprite Cursor
+version = 0.1
+
+[bootstrap]
+main_collection = /example/cursor.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 = 1.0
+clear_color_green = 1.0
+clear_color_red = 1.0
+

BIN
sprite/cursor/tilesource.png