Dev Blog
Hi, this is the Stranded III development blog (see also Forum Thread, Comment Thread).
Entry 38 - Lua Progress, Palm Tree & Better Flower - April 10, 2016
Lua Progress
I worked on the Lua stuff that I didn't get done previous week. The following stuff actually worked before already but I want to show it to you nevertheless so you get an idea what the Lua code looks like.
So this is what the graphic settings menu looks like:
click to enlarge
And this is the Lua code to build it:
Line 2 defines the "areas to keep" - these are actually areas with components which will not get destroyed when switching the menu. In this case it's the menu bar on the left. It's created by the function call in line 5 (if it doesn't exist yet). Don't be scared: This is probably the dirtiest part of this snippet
The "main area" is created in line 7. It's the big square in which all the components are placed.
Lines 10 to 15 get a table of available resolutions and convert it to a readable format for a combo box.
Most of the other lines are about creating UI components which are automatically placed at the right positions.
Note the empty update function (ll. 51-52). This menu is currently fully static (no crazy animations or actions) so it doesn't need to do anything in the update function. The place where this function is called also checks if update is nil so I could also just remove the empty function as well.
Of course there are interactive components like buttons and sliders but these are updated automatically by the UI system so you don't have to take care of this yourself in each menu.
Also all the strings will later come from the localization system instead of being specified directly as English strings.
The insertion system which is used to place the UI components in the window defaults to a 2 column layout with a size ratio of 1 (for the first column) to 2 (for the second column).
Any other configuration can be chosen easily by simply changing this value before calling the add-functions.
e.g.:
Adding this to line 8...
...will transform the 2 column layout to a 4 column layout (the values are still for the size ratios as explained before). I have to admit that I increased the window size a bit for the following shot because everything was badly clinched and it still is but I hope you get the idea:
IMG: http://stuff.unrealsoftware.de/pics/s3dev/ui/videosettings2_pre.jpg
> click to enlarge
Note the fancy multi line + image tool-tip at the mouse pointer. It's defined in a super convenient way in line 35: A simple table of strings and/or images! The little tool-tip exclamation mark icon however is not well positioned in the second shot. This is due to the down-scaled label text. I need to fix that.
Oh and of course all this is not finished. Some of the settings will most likely change or get removed and some others will certainly be added.
Palm Tree
Stranded III will obviously have a tropical setting so it needs a lot of palm trees. That's why I created a new one!
Click to watch me drawing the palm frond texture on YouTube!
This is the model (also with a new palm bark texture):
click to enlarge
This palm tree is - as (nearly) always - work in progress and (probably) not final stuff.
By the way: I used the Hand-Painted Island Pack from the Unity asset store as reference (I didn't buy it, I just used the pictures from the asset store). I really love that style.
Flower Version 2
I really disliked the flower I presented in my previous dev blog so I worked a bit on it to improve it. The biggest problem was certainly that I used gray for shading which is almost always a horrible idea because it makes stuff look dirty. It's something you should avoid - especially when you're creating a flower! I just didn't think about it when I made it...
Whatever. Here's an improved version which looks much better in my opinion. I also tweaked the model a bit and made it a bit more detailed.
click to enlarge
I worked on the Lua stuff that I didn't get done previous week. The following stuff actually worked before already but I want to show it to you nevertheless so you get an idea what the Lua code looks like.
So this is what the graphic settings menu looks like:
click to enlargeAnd this is the Lua code to build it:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
menu.menu[menu.enum.settingsVideo] = {
areasToKeep = {menu.area.settings},
start = function(self)
menuSettingsButtons()
gui.area:createMain()
gui.label.add("Resolution")
local resTable = s3screen.getResolutions()
local resList = {}
for i = 1, #resTable do
resList[i] = resTable[i].width .. " x " .. resTable[i].height
--print(resList[i])
end
gui.combobox.add(resList)
gui.insert:nextCol()
gui.checkbox.add("Fullscreen")
gui.insert:nextCol()
gui.checkbox.add("Vertical Synchronization (VSync)")
gui.insert:yPad(true)
gui.label.add("Texture Quality")
gui.slider.add({"very low and very long string", "low", "medium", "good"})
gui.label.add("Anti Aliasing")
gui.slider.add({"off", "2x", "4x", "8x"})
gui.label.add("Shadows")
gui.slider.add({"off", "very low", "low", "medium", "good", "very good", "ultra"})
gui.label.add("Ambient Occlusion", {"Awesome ambient occlusion", "AKA SSAOAA", menu.gfx.icon_cancel})
gui.slider.add({"Off", "Low Quality", "Medium Quality", "High Quality"})
gui.label.add("Bloom")
gui.slider.add({"off", "very weak", "weak", "medium", "strong", "very strong"})
gui.label.add("Motion Blur")
gui.slider.add({"off", "very weak", "weak", "medium", "strong", "very strong"})
gui.label.add("Sun Shafts")
gui.slider.add({"Off", "Low Quality", "Medium Quality", "High Quality"})
gui.label.add("Depth of Field")
gui.slider.add({"off", "very weak", "weak", "medium", "strong", "very strong"})
end,
update = function(self)
end
}
areasToKeep = {menu.area.settings},
start = function(self)
menuSettingsButtons()
gui.area:createMain()
gui.label.add("Resolution")
local resTable = s3screen.getResolutions()
local resList = {}
for i = 1, #resTable do
resList[i] = resTable[i].width .. " x " .. resTable[i].height
--print(resList[i])
end
gui.combobox.add(resList)
gui.insert:nextCol()
gui.checkbox.add("Fullscreen")
gui.insert:nextCol()
gui.checkbox.add("Vertical Synchronization (VSync)")
gui.insert:yPad(true)
gui.label.add("Texture Quality")
gui.slider.add({"very low and very long string", "low", "medium", "good"})
gui.label.add("Anti Aliasing")
gui.slider.add({"off", "2x", "4x", "8x"})
gui.label.add("Shadows")
gui.slider.add({"off", "very low", "low", "medium", "good", "very good", "ultra"})
gui.label.add("Ambient Occlusion", {"Awesome ambient occlusion", "AKA SSAOAA", menu.gfx.icon_cancel})
gui.slider.add({"Off", "Low Quality", "Medium Quality", "High Quality"})
gui.label.add("Bloom")
gui.slider.add({"off", "very weak", "weak", "medium", "strong", "very strong"})
gui.label.add("Motion Blur")
gui.slider.add({"off", "very weak", "weak", "medium", "strong", "very strong"})
gui.label.add("Sun Shafts")
gui.slider.add({"Off", "Low Quality", "Medium Quality", "High Quality"})
gui.label.add("Depth of Field")
gui.slider.add({"off", "very weak", "weak", "medium", "strong", "very strong"})
end,
update = function(self)
end
}
Line 2 defines the "areas to keep" - these are actually areas with components which will not get destroyed when switching the menu. In this case it's the menu bar on the left. It's created by the function call in line 5 (if it doesn't exist yet). Don't be scared: This is probably the dirtiest part of this snippet
The "main area" is created in line 7. It's the big square in which all the components are placed.
Lines 10 to 15 get a table of available resolutions and convert it to a readable format for a combo box.
Most of the other lines are about creating UI components which are automatically placed at the right positions.
Note the empty update function (ll. 51-52). This menu is currently fully static (no crazy animations or actions) so it doesn't need to do anything in the update function. The place where this function is called also checks if update is nil so I could also just remove the empty function as well.
Of course there are interactive components like buttons and sliders but these are updated automatically by the UI system so you don't have to take care of this yourself in each menu.
Also all the strings will later come from the localization system instead of being specified directly as English strings.
The insertion system which is used to place the UI components in the window defaults to a 2 column layout with a size ratio of 1 (for the first column) to 2 (for the second column).
1
gui.insert.columns = {1, 2}
Any other configuration can be chosen easily by simply changing this value before calling the add-functions.
e.g.:
Adding this to line 8...
1
gui.insert.columns = {1, 2, 1, 2}
...will transform the 2 column layout to a 4 column layout (the values are still for the size ratios as explained before). I have to admit that I increased the window size a bit for the following shot because everything was badly clinched and it still is but I hope you get the idea:
IMG: http://stuff.unrealsoftware.de/pics/s3dev/ui/videosettings2_pre.jpg
> click to enlarge
Note the fancy multi line + image tool-tip at the mouse pointer. It's defined in a super convenient way in line 35: A simple table of strings and/or images! The little tool-tip exclamation mark icon however is not well positioned in the second shot. This is due to the down-scaled label text. I need to fix that.
Oh and of course all this is not finished. Some of the settings will most likely change or get removed and some others will certainly be added.
Palm Tree
Stranded III will obviously have a tropical setting so it needs a lot of palm trees. That's why I created a new one!
Click to watch me drawing the palm frond texture on YouTube!This is the model (also with a new palm bark texture):
click to enlargeThis palm tree is - as (nearly) always - work in progress and (probably) not final stuff.
By the way: I used the Hand-Painted Island Pack from the Unity asset store as reference (I didn't buy it, I just used the pictures from the asset store). I really love that style.
Flower Version 2
I really disliked the flower I presented in my previous dev blog so I worked a bit on it to improve it. The biggest problem was certainly that I used gray for shading which is almost always a horrible idea because it makes stuff look dirty. It's something you should avoid - especially when you're creating a flower! I just didn't think about it when I made it...
Whatever. Here's an improved version which looks much better in my opinion. I also tweaked the model a bit and made it a bit more detailed.
click to enlarge