From ee46e22899a4bdf50950cf1eaa04c9813fa7b127 Mon Sep 17 00:00:00 2001 From: Ronja Date: Mon, 21 Sep 2020 21:18:07 +0200 Subject: [PATCH] compassing --- Assets/wipButtons.aseprite | 3 + Luxe/assets/wip/AdventureButtons.image.lx | 3 + Luxe/assets/wip/AdventureButtons.png | 3 + Luxe/assets/wip/Needle.image.lx | 3 + Luxe/assets/wip/Needle.png | 3 + Luxe/blocks/debug.wren | 14 ++++ Luxe/blocks/ui/adventure.wren | 87 +++++++++++++++++++++-- Luxe/blocks/ui/compass.wren | 69 ++++++++++++++++++ Luxe/blocks/ui/image_button.wren | 7 +- Luxe/blocks/ui/info.wren | 2 +- Luxe/blocks/ui/ui.wren | 2 +- Luxe/math/math.wren | 8 +++ Luxe/math/rect.wren | 13 ++++ 13 files changed, 203 insertions(+), 14 deletions(-) create mode 100644 Assets/wipButtons.aseprite create mode 100644 Luxe/assets/wip/AdventureButtons.image.lx create mode 100644 Luxe/assets/wip/AdventureButtons.png create mode 100644 Luxe/assets/wip/Needle.image.lx create mode 100644 Luxe/assets/wip/Needle.png create mode 100644 Luxe/blocks/ui/compass.wren diff --git a/Assets/wipButtons.aseprite b/Assets/wipButtons.aseprite new file mode 100644 index 0000000..ba00521 --- /dev/null +++ b/Assets/wipButtons.aseprite @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:f5ca04530fd559f09b52a52f353caaa72cc5bd31fca5a9cb0bcbc891fb731a32 +size 1480 diff --git a/Luxe/assets/wip/AdventureButtons.image.lx b/Luxe/assets/wip/AdventureButtons.image.lx new file mode 100644 index 0000000..cfc5824 --- /dev/null +++ b/Luxe/assets/wip/AdventureButtons.image.lx @@ -0,0 +1,3 @@ +image = { + source = "assets/wip/AdventureButtons.png" +} \ No newline at end of file diff --git a/Luxe/assets/wip/AdventureButtons.png b/Luxe/assets/wip/AdventureButtons.png new file mode 100644 index 0000000..5aed6d4 --- /dev/null +++ b/Luxe/assets/wip/AdventureButtons.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:ec169e2d3d527551a2a6968bcb801061e04ea1202a354ece0789d69f0099eebc +size 664 diff --git a/Luxe/assets/wip/Needle.image.lx b/Luxe/assets/wip/Needle.image.lx new file mode 100644 index 0000000..d2854ed --- /dev/null +++ b/Luxe/assets/wip/Needle.image.lx @@ -0,0 +1,3 @@ +image = { + source = "assets/wip/Needle.png" +} \ No newline at end of file diff --git a/Luxe/assets/wip/Needle.png b/Luxe/assets/wip/Needle.png new file mode 100644 index 0000000..a30d99c --- /dev/null +++ b/Luxe/assets/wip/Needle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:1333295c0b5bb56f6a2f74fd1c282dd2e75dbd11dfd2b0f8a3ac0e8172fb3709 +size 450 diff --git a/Luxe/blocks/debug.wren b/Luxe/blocks/debug.wren index 55de206..c37c7b6 100644 --- a/Luxe/blocks/debug.wren +++ b/Luxe/blocks/debug.wren @@ -34,6 +34,20 @@ class DrawDebug{ style.color = col Draw.rect(__context, x, y, 0, w, h, 0, style) } + + static line(v0, v1){ + line(v0.x, v0.y, v1.x, v1.y) + } + + static line(x0, y0, x1, y1){ + line(x0, y0, x1, y1, [1, 0, 0, 1]) + } + + static line(x0, y0, x1, y1, col){ + var style = PathStyle.new() + style.color = col + Draw.line(__context, x0, y0, x1, y1, 0, style) + } } diff --git a/Luxe/blocks/ui/adventure.wren b/Luxe/blocks/ui/adventure.wren index 25db1a1..66e15ab 100644 --- a/Luxe/blocks/ui/adventure.wren +++ b/Luxe/blocks/ui/adventure.wren @@ -1,5 +1,5 @@ import "luxe: draw" for Draw, PathStyle -import "luxe: world" for Entity, Transform, UI, UIRenderMode +import "luxe: world" for Entity, Transform, UI, UIRenderMode, UIEvent import "luxe: world" for UILayout, UILayoutBehave, UILayoutContain import "luxe: ui/control" for Control import "luxe: ui/panel" for UIPanel @@ -15,14 +15,23 @@ import "blocks/ui/image_button" for ImageButton import "math/observable" for Observable import "blocks/ui/simple_text" for UISimpleText import "blocks/ui/ui" for Ui +import "blocks/ui/compass" for UiCompass class UiAdventure{ root{_root} + static direction{"direction"} + static people{"people"} + static resources{"resources"} + static depart{"depart"} + construct new(ent, ui){ _ent = ent _ui = ui + _game = Globals["Game"] + _page = Observable.new(UiAdventure.direction) + setup() } @@ -31,8 +40,17 @@ class UiAdventure{ var game = Globals["Game"] _root = Control.create(_ent) + Control.set_allow_input(_root, true) Control.set_size(_root, ui_rect.width, ui_rect.height) + toolbar() + direction() + people() + resources() + depart() + } + + toolbar(){ //list var list = Control.create(_ent) Control.child_add(_root, list) @@ -43,10 +61,67 @@ class UiAdventure{ //toolbar icons _ui.list_button(list, [1, 0], "Info") {_ui.ui_mode = Ui.Info} - _ui.list_button(list, [0, 0], "Abort") {_ui.ui_mode = Ui.Info} - _ui.list_button(list, [2, 0], "People") {} - _ui.list_button(list, [4, 0], "Stuff") {} - _ui.list_button(list, [3, 0], "Direction") {} - _ui.list_button(list, [5, 0], "Depart") {} + _ui.list_button(list, [0, 0], "Abort") { + _ui.ui_mode = Ui.Info + _game.adventures.discard() + _page = UiAdventure.direction + } + _ui.list_button(list, [3, 0], "Direction") {_page = UiAdventure.direction} + _ui.list_button(list, [2, 0], "People") {_page = UiAdventure.people} + _ui.list_button(list, [4, 0], "Stuff") {_page = UiAdventure.resources} + _ui.list_button(list, [5, 0], "Depart") {_page = UiAdventure.depart} + } + + direction(){ + var page = Control.create(_ent) + Control.child_add(_root, page) + UILayout.set_behave(_ent, page, UILayoutBehave.fill) + UILayout.set_margin(_ent, page, 0, 0, 0, 16) + + _page.on_change(true){|val| + Control.set_visible(page, val == UiAdventure.direction) + } + + var compass = UiCompass.create(_ent) + Control.child_add(page, compass) + Control.set_size(compass, 32, 32) + Control.set_events(compass){|event| + if(event.type == UIEvent.change){ + System.print(event) + } + } + } + + people(){ + var page = Control.create(_ent) + Control.child_add(_root, page) + UILayout.set_behave(_ent, page, UILayoutBehave.fill) + UILayout.set_margin(_ent, page, 0, 0, 0, 16) + + _page.on_change(true){|val| + Control.set_visible(page, val == UiAdventure.people) + } + } + + resources(){ + var page = Control.create(_ent) + Control.child_add(_root, page) + UILayout.set_behave(_ent, page, UILayoutBehave.fill) + UILayout.set_margin(_ent, page, 0, 0, 0, 16) + + _page.on_change(true){|val| + Control.set_visible(page, val == UiAdventure.resources) + } + } + + depart(){ + var page = Control.create(_ent) + Control.child_add(_root, page) + UILayout.set_behave(_ent, page, UILayoutBehave.fill) + UILayout.set_margin(_ent, page, 0, 0, 0, 16) + + _page.on_change(true){|val| + Control.set_visible(page, val == UiAdventure.depart) + } } } \ No newline at end of file diff --git a/Luxe/blocks/ui/compass.wren b/Luxe/blocks/ui/compass.wren new file mode 100644 index 0000000..f98f066 --- /dev/null +++ b/Luxe/blocks/ui/compass.wren @@ -0,0 +1,69 @@ +import "luxe: ui/control" for Control +import "luxe: world" for UI, World, UIEvent +import "luxe: draw" for PathStyle +import "luxe: assets" for Assets +import "luxe: render" for Image +import "luxe: math" for Math + +import "globals" for Globals +import "math/rect" for AABB +import "math/math" for M +import "blocks/debug" for DrawDebug + +class UiCompass{ + static font{"assets/fonts/BabyBlocks"} + static size{8} + + static create(ent){ + var compass = Control.create(ent) + var style = PathStyle.new() + style.color = [1,1,1,1] + style.thickness = 2 + Control.set_allow_input(compass, true) + Control.set_state_data(compass, {"angle": 0, "style": style, "pressed": false}) //angle is in radians between 0 and tau + Control.set_render(compass) {|control, state, x, y, w, h| + var depth = UI.draw_depth_of(control, 0) + var center = [x + w/2, y + h/2] + var image = Assets.image("assets/wip/Needle") + var ratio = Image.get_width(image) / Image.get_height(image) + var needleSize = [(Math.min(w, h) - 8) * ratio, (Math.min(w, h) - 8)] + UI.draw_ring(control, center.x, center.y, depth, w/2, h/2, 0, 360, 8, state["style"]) + UI.draw_image(control, center.x - needleSize.x/2, center.y-needleSize.y/2, depth, needleSize.x, needleSize.y, + state["angle"], [1,1,1,1], [0, 0, 1, 1], image, true) + } + Control.set_process(compass){|control, state, event, x,y,w,h| + if(event.control != control) return + + if(event.type == UIEvent.press){ + var relative_pos = AABB.grow(AABB.new(x, y, w, h),[2, 2]).relative_pos([event.x, event.y]) + var inside = M.length(relative_pos.map{|comp| comp - 0.5}) < 0.5 + if(inside) { + state["pressed"] = true + UI.capture(control) + } + } else if(event.type == UIEvent.release){ + state["pressed"] = false + UI.uncapture(control) + } else if(event.type == UIEvent.move && state["pressed"]){ + var center = [x + w/2, y + h/2] + var diff = [center.x - event.x, center.y - event.y] + var angle = Math.atan2(diff.x, diff.y) + System.print("change %(Math.degrees(angle).round)") + UI.events_emit(control, UIEvent.change, Math.degrees(angle)) + } + } + return compass + } + + static set_angle(con, angle){ + var data = Control.get_state_data(con) + + data["angle"] = angle % 360 + } + + static set_color(control, color){ + var data = Control.get_state_data(control) + data["style"].color = color + } + +} \ No newline at end of file diff --git a/Luxe/blocks/ui/image_button.wren b/Luxe/blocks/ui/image_button.wren index 1233dbd..481b78f 100644 --- a/Luxe/blocks/ui/image_button.wren +++ b/Luxe/blocks/ui/image_button.wren @@ -17,28 +17,23 @@ class ImageButton{ Control.set_events(button) {|event| var data = null - var string_type = "" if(event.type == UIEvent.enter){ - string_type = "enter" data = Control.get_state_data(button) data["hover"] = true } else if(event.type == UIEvent.exit) { - string_type = "exit" data = Control.get_state_data(button) data["hover"] = false data["press"] = false } else if(event.type == UIEvent.press) { - string_type = "press" data = Control.get_state_data(button) data["press"] = true } else if(event.type == UIEvent.release) { - string_type = "release" data = Control.get_state_data(button) data["press"] = false } if(data){ - //System.print(string_type + " " + data["tooltip"]) + //System.print(UIEvent.name(string_type) + " " + data["tooltip"]) var func = data["state_change"] if(func){ func.call(data, button) diff --git a/Luxe/blocks/ui/info.wren b/Luxe/blocks/ui/info.wren index a9a29a1..a27174c 100644 --- a/Luxe/blocks/ui/info.wren +++ b/Luxe/blocks/ui/info.wren @@ -75,7 +75,7 @@ class UiInfo{ var button //toolbar buttons - _ui.list_button(list, [1, 0], "Adventure!") { + _ui.list_button(list, [6, 0], "Adventure!") { Globals["Game"].adventures.new_or_current() _ui.ui_mode = Ui.Planning } diff --git a/Luxe/blocks/ui/ui.wren b/Luxe/blocks/ui/ui.wren index a91f9ff..158c33d 100644 --- a/Luxe/blocks/ui/ui.wren +++ b/Luxe/blocks/ui/ui.wren @@ -62,7 +62,7 @@ class Ui{ var button = ImageButton.create(_ent) Control.set_size(button, 16, 16) Control.child_add(parent, button) - var adventureButtons = Assets.image("assets/AdventureButtons") + var adventureButtons = Assets.image("assets/wip/AdventureButtons") UIImage.set_image(button, adventureButtons) return button } diff --git a/Luxe/math/math.wren b/Luxe/math/math.wren index 5a1999c..e2723e9 100644 --- a/Luxe/math/math.wren +++ b/Luxe/math/math.wren @@ -75,4 +75,12 @@ class M{ System.print("can't clamp %(value.type) between %(min.type) and %(max.type)") return null } + + static sqr_length(vector){ + return vector.reduce(0){|sum, val| sum + val * val } + } + + static length(vector){ + return sqr_length(vector).sqrt + } } \ No newline at end of file diff --git a/Luxe/math/rect.wren b/Luxe/math/rect.wren index c4f75a7..6cf9b17 100644 --- a/Luxe/math/rect.wren +++ b/Luxe/math/rect.wren @@ -1,4 +1,5 @@ import "math/vector" for Vector +import "math/math" for M class AABB{ x{_x} @@ -45,6 +46,10 @@ class AABB{ _width = width _height = height } + + relative_pos(vector){ + return M.inv_lerp(min, max, vector) + } static ONE(){ return new(0, 0, 1, 1) @@ -76,4 +81,12 @@ class AABB{ var half_amount = [amount.x/2, amount.y/2] return AABB.new(rect.pos + half_amount, rect.size - amount) } + + static grow(rect, amount){ + if(amount is Num){ + amount = [amount, amount] + } + var half_amount = [amount.x/2, amount.y/2] + return AABB.new(rect.pos - half_amount, rect.size + amount) + } } \ No newline at end of file