From 33e3c7d35c0bc571ca05d465b7c571c3912acda0 Mon Sep 17 00:00:00 2001 From: Buhallin Date: Tue, 20 Dec 2022 00:26:29 -0800 Subject: [PATCH] SCED Intro Tour, Part 4 Final UI pass before the script is implemented - Adds UI assets for speech bubble and buttons - Fully implements flippable sides, including speech bubble flip and object repositioning - A few minor cleanups and enhancements relating to camera position --- modsettings/CustomUIAssets.json | 20 ++++++++++ src/core/tour/TourCard.ttslua | 64 ++++++++++++++++---------------- src/core/tour/TourManager.ttslua | 59 +++++++++++++++++++---------- src/core/tour/TourScript.ttslua | 2 +- 4 files changed, 93 insertions(+), 52 deletions(-) diff --git a/modsettings/CustomUIAssets.json b/modsettings/CustomUIAssets.json index 89293b1c..f309b5bf 100644 --- a/modsettings/CustomUIAssets.json +++ b/modsettings/CustomUIAssets.json @@ -83,5 +83,25 @@ "Name": "option_image2", "Type": 0, "URL": "http://cloud-3.steamusercontent.com/ugc/2027213118470839572/FB133C41A6D8915A44C138BCF947ECFE3D111813/" + }, + { + "Name": "SpeechBubble", + "Type": 0, + "URL": "https://i.imgur.com/6MReiEO.png" + }, + { + "Name": "Roland", + "Type": 0, + "URL": "https://i.imgur.com/lx6unDY.png" + }, + { + "Name": "NextArrow", + "Type": 0, + "URL": "https://i.imgur.com/gXRiKmu.png" + }, + { + "Name": "Exit", + "Type": 0, + "URL": "https://i.imgur.com/i0VMjPD.png" } ] diff --git a/src/core/tour/TourCard.ttslua b/src/core/tour/TourCard.ttslua index 0e49e690..c608992f 100644 --- a/src/core/tour/TourCard.ttslua +++ b/src/core/tour/TourCard.ttslua @@ -7,7 +7,7 @@ tourCardTemplate = { attributes = { id = "tourCard", height = 195, - width = 270, + width = 300, rotation = "0 0 0", position = "0 300 30", showAnimation = "FadeIn", @@ -22,7 +22,7 @@ tourCardTemplate = { height=75, width=50, rectAlignment="UpperLeft", - offsetXY = "-65 0", + offsetXY = "-50 0", -- Image will be set when the card is updated } }, @@ -34,57 +34,57 @@ tourCardTemplate = { height=75, width=50, rectAlignment="UpperRight", - offsetXY = "65 0" + offsetXY = "50 0" -- Image will be set when the card is updated } }, { - tag = "Panel", + tag = "Image", attributes = { + id = "tourSpeechBubble", color = "#F5F5DC", height = 195, - width = 270, - rectAlignment = "MiddleCenter" - }, - children = { - { - tag = "Text", - attributes = { - id = "tourText", - height = 150, - width = 230, - rectAlignment = "UpperCenter", - offsetXY = "0 -10", - resizeTextForBestFit = true, - resizeTextMinSize = 10, - resizeTextMaxSize = 16, - color = "#050505", - alignment = "UpperLeft", - horizontalOverflow = "wrap", - } - } + width = 300, + rectAlignment = "MiddleCenter", + image = "SpeechBubble", }, }, + { + tag = "Text", + attributes = { + id = "tourText", + height = 150, + width = 230, + rectAlignment = "UpperCenter", + offsetXY = "15 -15", + resizeTextForBestFit = true, + resizeTextMinSize = 10, + resizeTextMaxSize = 16, + color = "#050505", + alignment = "UpperLeft", + horizontalOverflow = "wrap", + } + }, { tag = "Button", attributes = { id = "tourNext", - height = 30, - width = 50, - color = "#FF0000", + height = 40, + width = 40, rectAlignment = "LowerRight", - offsetXY = "-5 5", + offsetXY = "-5 -45", + image = "NextArrow" }, }, { tag = "Button", attributes = { id = "tourStop", - height = 30, - width = 50, - color = "#FF0000", + height = 40, + width = 40, rectAlignment = "LowerLeft", - offsetXY = "5 5", + offsetXY = "35 -45", + image = "Exit" } }, } diff --git a/src/core/tour/TourManager.ttslua b/src/core/tour/TourManager.ttslua index 98caf793..f6480001 100644 --- a/src/core/tour/TourManager.ttslua +++ b/src/core/tour/TourManager.ttslua @@ -8,18 +8,27 @@ do local CARD_ID = "tourCard" local LEFT_NARRATOR_ID = "tourNarratorImageLeft" local RIGHT_NARRATOR_ID = "tourNarratorImageRight" + local BUBBLE_ID = "tourSpeechBubble" local TEXT_ID = "tourText" local NEXT_BUTTON_ID = "tourNext" local STOP_BUTTON_ID = "tourStop" -- Table centerpoint for the camera hook object. Camera handling is a bit erratic so it doesn't -- always land right where you think it's going to, but it's close - local CAMERA_HOME = { + local HOOK_CAMERA_HOME = { x = -30.2, y = 60, z = 0, } + -- Default (0) position for the camera, as defined in the mod. If we don't recreate this position + -- EXACTLY when exiting the tour then camera controls get weird + local DEFAULT_CAMERA_POS = { + position = { x = -22.265, y = -2.5, z = 5.2575}, + pitch=64.343, + yaw=90.333, + distance=104.7} + -- Global XML coordinates where we can present a card local SCREEN_POSITIONS = { center = "0 0 0", @@ -46,9 +55,16 @@ do } -- Camera gets really screwy when we finalize if we don't start settled in ThirdPerson at the -- default position before attaching to the hook. Unfortunately there are no callbacks for when - -- the movement is done, but the 2 sec seems to handle it + -- the movement is done, but the delay seems to handle it Player[playerColor].setCameraMode("ThirdPerson") - Player[playerColor].lookAt({position={-22.265,-2.5,5.2575},pitch=64.343,yaw=90.333,distance=104.7}) + Player[playerColor].lookAt(DEFAULT_CAMERA_POS) + -- Initial camera rotation is painfully slow. White and Orange players are likely oriented + -- correctly, but need a longer start delay for Green and Red + local delay = 0.5 + if playerColor ~= "White" and playerColor ~= "Orange" then + delay = 2 + broadcastToColor("Starting the tour, please wait...", playerColor) + end Wait.time(function() internal.createTourCard(playerColor) -- XML update to add the new card takes a few frames to load, wait for it to finish then @@ -61,7 +77,7 @@ do return not Global.UI.loading end ) - end, 2) + end, delay) end -- Shows the next card in the tour script. This method is exposed (rather than being part of @@ -95,7 +111,7 @@ do internal.showCurrentCard = function(playerColor) internal.updateCardDisplay(playerColor) local hook = getObjectFromGUID(tourState[playerColor].cameraHookGuid) - hook.setPositionSmooth(CAMERA_HOME, false, false) + hook.setPositionSmooth(HOOK_CAMERA_HOME, false, false) local delay = 0.5 local cardIndex = tourState[playerColor].currentCardIndex local lookPos @@ -136,13 +152,11 @@ do Player[playerColor].setCameraMode("ThirdPerson") tourState[playerColor] = nil Wait.frames(function() - -- This resets to the default camera position. If we don't place the camera exactly at the - -- default, camera controls get weird - Player[playerColor].lookAt({position={-22.265,-2.5,5.2575},pitch=64.343,yaw=90.333,distance=104.7}) + Player[playerColor].lookAt(DEFAULT_CAMERA_POS) end, 3) end - -- Updates the card UI to show the appropriate narrator and text. + -- Updates the card UI to show the appropriate card configuration. ---@param playerColor Player color to update card for internal.updateCardDisplay = function(playerColor) local index = tourState[playerColor].currentCardIndex @@ -156,11 +170,17 @@ do if TOUR_SCRIPT[index].speakerSide == "right" then Global.UI.setAttribute(internal.getUiId(LEFT_NARRATOR_ID, playerColor), "active", false) Global.UI.setAttribute(internal.getUiId(RIGHT_NARRATOR_ID, playerColor), "active", true) - Global.UI.setAttribute(internal.getUiId(TEXT_ID, playerColor), "rotation", "0 180 0") + Global.UI.setAttribute(internal.getUiId(BUBBLE_ID, playerColor), "rotation", "0 180 0") + Global.UI.setAttribute(internal.getUiId(TEXT_ID, playerColor), "offsetXY", "-15 -15") + Global.UI.setAttribute(internal.getUiId(NEXT_BUTTON_ID, playerColor), "offsetXY", "-35 -45") + Global.UI.setAttribute(internal.getUiId(STOP_BUTTON_ID, playerColor), "offsetXY", "5 -45") else Global.UI.setAttribute(internal.getUiId(LEFT_NARRATOR_ID, playerColor), "active", true) Global.UI.setAttribute(internal.getUiId(RIGHT_NARRATOR_ID, playerColor), "active", false) - Global.UI.setAttribute(internal.getUiId(TEXT_ID, playerColor), "rotation", "0 0 0") + Global.UI.setAttribute(internal.getUiId(BUBBLE_ID, playerColor), "rotation", "0 0 0") + Global.UI.setAttribute(internal.getUiId(TEXT_ID, playerColor), "offsetXY", "15 -15") + Global.UI.setAttribute(internal.getUiId(NEXT_BUTTON_ID, playerColor), "offsetXY", "-5 -45") + Global.UI.setAttribute(internal.getUiId(STOP_BUTTON_ID, playerColor), "offsetXY", "35 -45") end end @@ -173,9 +193,9 @@ do local hookData = { Name = "BlockSquare", Transform = { - posX = CAMERA_HOME.x, - posY = CAMERA_HOME.y, - posZ = CAMERA_HOME.z, + posX = HOOK_CAMERA_HOME.x, + posY = HOOK_CAMERA_HOME.y, + posZ = HOOK_CAMERA_HOME.z, rotX = 0, rotY = 270.0, rotZ = 0, @@ -220,11 +240,12 @@ do tourCardTemplate.attributes.id = internal.getUiId(CARD_ID, playerColor) tourCardTemplate.children[1].attributes.id = internal.getUiId(LEFT_NARRATOR_ID, playerColor) tourCardTemplate.children[2].attributes.id = internal.getUiId(RIGHT_NARRATOR_ID, playerColor) - tourCardTemplate.children[3].children[1].attributes.id = internal.getUiId(TEXT_ID, playerColor) - tourCardTemplate.children[4].attributes.id = internal.getUiId(NEXT_BUTTON_ID, playerColor) - tourCardTemplate.children[4].attributes.onClick = self.getGUID().."/nextCard" - tourCardTemplate.children[5].attributes.id = internal.getUiId(STOP_BUTTON_ID, playerColor) - tourCardTemplate.children[5].attributes.onClick = self.getGUID().."/stopTour" + tourCardTemplate.children[3].attributes.id = internal.getUiId(BUBBLE_ID, playerColor) + tourCardTemplate.children[4].attributes.id = internal.getUiId(TEXT_ID, playerColor) + tourCardTemplate.children[5].attributes.id = internal.getUiId(NEXT_BUTTON_ID, playerColor) + tourCardTemplate.children[5].attributes.onClick = self.getGUID().."/nextCard" + tourCardTemplate.children[6].attributes.id = internal.getUiId(STOP_BUTTON_ID, playerColor) + tourCardTemplate.children[6].attributes.onClick = self.getGUID().."/stopTour" internal.setDeepVisibility(tourCardTemplate, playerColor) local globalXml = Global.UI.getXmlTable() diff --git a/src/core/tour/TourScript.ttslua b/src/core/tour/TourScript.ttslua index 095d5c39..dcbb17dd 100644 --- a/src/core/tour/TourScript.ttslua +++ b/src/core/tour/TourScript.ttslua @@ -3,7 +3,7 @@ TOUR_SCRIPT = { { narrator = "Roland", - text = "Despite my best efforts, looks like you found us. You may live to regret that. As long as you're here though we might as well show you around.\n\nUse the arrow to move forrward, and if the horrors get to be too much you can quit whenever you like. Ready to get started?", + text = "Despite my best efforts, looks like you found us. You may live to regret that. As long as you're here though we might as well show you around.\n\nUse the arrow to move forward, and if the horrors get to be too much you can quit whenever you like. Ready to get started?", position = "center" }, {