Window Icon, UI Polish

* SDL2 builds of the game now set their app window icon.
* Create/Edit Level window is updated to show a tabbed UI to create a
  new Level or a new Doodad. The dedicated main menu button to create a
  new doodad (which immediately prompted for its size) is replaced by
  this new tab's UI.
* Edit Drawing/Play Level window is more responsive to smaller screen
  sizes by drawing fewer columns of filenames.
* Bugfix: the Alert and Confirm modals always re-center themselves on
  screen, especially to adapt between Portrait or Landscape mode on a
  mobile device.
This commit is contained in:
Noah 2021-12-30 16:31:45 -08:00
parent 37377cdcc1
commit d16a8657aa
18 changed files with 692 additions and 511 deletions

BIN
assets/icons/1024.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 89 KiB

BIN
assets/icons/128.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.9 KiB

BIN
assets/icons/16.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 785 B

BIN
assets/icons/256.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

BIN
assets/icons/32.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
assets/icons/512.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

BIN
assets/icons/64.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
assets/icons/96.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.9 KiB

View File

@ -19,6 +19,7 @@ import (
"git.kirsle.net/apps/doodle/pkg/log"
"git.kirsle.net/apps/doodle/pkg/shmem"
"git.kirsle.net/apps/doodle/pkg/sound"
"git.kirsle.net/apps/doodle/pkg/sprites"
"git.kirsle.net/apps/doodle/pkg/usercfg"
"git.kirsle.net/go/render"
"git.kirsle.net/go/render/sdl"
@ -166,6 +167,16 @@ func main() {
game := doodle.New(c.Bool("debug"), engine)
game.SetupEngine()
// Set the app window icon.
if engine, ok := game.Engine.(*sdl.Renderer); ok {
if icon, err := sprites.LoadImage(game.Engine, balance.WindowIcon); err == nil {
engine.SetWindowIcon(icon.Image)
} else {
log.Error("Couldn't load WindowIcon (%s): %s", balance.WindowIcon, err)
}
}
if c.Bool("guitest") {
game.Goto(&doodle.GUITestScene{})
} else if filename != "" {

View File

@ -8,6 +8,8 @@ import (
// Theme and appearance variables.
var (
WindowIcon = "assets/icons/96.png"
// Title Screen Font
TitleScreenFont = render.Text{
Size: 46,

View File

@ -78,7 +78,7 @@ func (u *EditorUI) SetupMenuBar(d *Doodle) *ui.MenuBar {
fileMenu.AddItemAccel("Open...", "Ctrl-O", u.Scene.MenuOpen)
fileMenu.AddSeparator()
fileMenu.AddItem("Close "+drawingType, func() {
fileMenu.AddItem("Quit to menu", func() {
u.Scene.ConfirmUnload(func() {
d.Goto(&MainScene{})
})

View File

@ -17,3 +17,11 @@ const (
DoodadExt = ".doodad"
LevelPackExt = ".levelpack"
)
// Responsive breakpoints for mobile friendly UIs.
const (
ScreenWidthXSmall = 400
ScreenWidthSmall = 600
ScreenWidthMedium = 800
ScreenWidthLarge = 1000
)

View File

@ -36,7 +36,6 @@ type MainScene struct {
labelVersion *ui.Label
labelHint *ui.Label
frame *ui.Frame // Main button frame
btnRegister *ui.Button
winRegister *ui.Window
winSettings *ui.Window
winLevelPacks *ui.Window
@ -125,47 +124,13 @@ func (s *MainScene) Setup(d *Doodle) error {
s.updateButton.Hide()
s.Supervisor.Add(s.updateButton)
// Register button.
s.btnRegister = ui.NewButton("Register", ui.NewLabel(ui.Label{
Text: "Register Game",
Font: balance.LabelFont,
}))
s.btnRegister.SetStyle(&balance.ButtonPrimary)
s.btnRegister.Handle(ui.Click, func(ed ui.EventData) error {
if s.winRegister == nil {
cfg := windows.License{
Supervisor: s.Supervisor,
Engine: d.Engine,
OnCancel: func() {
s.winRegister.Hide()
},
}
cfg.OnLicensed = func() {
// License status has changed, reload the window!
if s.winRegister != nil {
s.winRegister.Hide()
}
s.winRegister = windows.MakeLicenseWindow(d.width, d.height, cfg)
}
cfg.OnLicensed()
}
s.winRegister.Show()
return nil
})
s.btnRegister.Compute(d.Engine)
s.Supervisor.Add(s.btnRegister)
if license.IsRegistered() {
s.btnRegister.Hide()
}
// Main UI button frame.
frame := ui.NewFrame("frame")
s.frame = frame
var buttons = []struct {
Name string
If func() bool
Func func()
Style *style.Button
}{
@ -182,6 +147,9 @@ func (s *MainScene) Setup(d *Doodle) error {
shmem.FlashError(err.Error())
}
},
OnCloseWindow: func() {
s.winLevelPacks.Hide()
},
})
}
s.winLevelPacks.MoveTo(render.Point{
@ -198,21 +166,14 @@ func (s *MainScene) Setup(d *Doodle) error {
Style: &balance.ButtonBabyBlue,
},
{
Name: "Create a Level",
Name: "New Drawing",
Func: d.GotoNewMenu,
Style: &balance.ButtonPink,
},
{
Name: "Create a Doodad",
Func: func() {
d.NewDoodad(0)
},
Style: &balance.ButtonPink,
},
{
Name: "Edit a Drawing",
Name: "Edit Drawing",
Func: d.GotoLoadMenu,
Style: &balance.ButtonPrimary,
Style: &balance.ButtonPink,
},
{
Name: "Settings",
@ -223,6 +184,34 @@ func (s *MainScene) Setup(d *Doodle) error {
s.winSettings.Show()
},
},
{
Name: "Register",
If: func() bool {
return !license.IsRegistered()
},
Func: func() {
if s.winRegister == nil {
cfg := windows.License{
Supervisor: s.Supervisor,
Engine: d.Engine,
OnCancel: func() {
s.winRegister.Hide()
},
}
cfg.OnLicensed = func() {
// License status has changed, reload the window!
if s.winRegister != nil {
s.winRegister.Hide()
}
s.winRegister = windows.MakeLicenseWindow(d.width, d.height, cfg)
}
cfg.OnLicensed()
}
s.winRegister.Show()
},
Style: &balance.ButtonPrimary,
},
}
for _, button := range buttons {
button := button
@ -406,12 +395,6 @@ func (s *MainScene) positionMenuPortrait(d *Doodle) {
X: (d.width / 2) - (s.frame.Size().W / 2),
Y: 260,
})
// Register button.
s.btnRegister.MoveTo(render.Point{
X: d.width - s.btnRegister.Size().W - 24,
Y: d.height - s.btnRegister.Size().H - 24,
})
}
func (s *MainScene) positionMenuLandscape(d *Doodle) {
@ -447,13 +430,6 @@ func (s *MainScene) positionMenuLandscape(d *Doodle) {
X: (col2.X+col2.W)/2 - (s.frame.Size().W / 2),
Y: (d.height / 2) - (s.frame.Size().H / 2),
})
// Register button to the top left.
// TODO: not ideal, move into main button list?
s.btnRegister.MoveTo(render.Point{
X: 20,
Y: 20,
})
}
// LoopLazyScroll gently scrolls the title screen demo level, called each Loop.
@ -560,9 +536,6 @@ func (s *MainScene) Draw(d *Doodle) error {
s.frame.Compute(d.Engine)
s.frame.Present(d.Engine, s.frame.Point())
// Register button.
s.btnRegister.Present(d.Engine, s.btnRegister.Point())
// Present supervised windows.
s.Supervisor.Present(d.Engine)

View File

@ -17,6 +17,9 @@ MenuScene holds the main dialog menu UIs for:
* New Level
* Open Level
* Settings
DEPRECATED: migrate these prompts into popup windows to appear
on the MainScene or elsewhere as wanted.
*/
type MenuScene struct {
// Configuration.
@ -159,6 +162,9 @@ func (s *MenuScene) setupNewWindow(d *Doodle) error {
Level: lvl,
})
},
OnCreateNewDoodad: func(size int) {
d.NewDoodad(size)
},
OnCancel: func() {
d.Goto(&MainScene{})
},

View File

@ -5,6 +5,7 @@ import (
"git.kirsle.net/apps/doodle/pkg/balance"
"git.kirsle.net/apps/doodle/pkg/keybind"
"git.kirsle.net/apps/doodle/pkg/modal/loadscreen"
"git.kirsle.net/apps/doodle/pkg/shmem"
"git.kirsle.net/go/render"
"git.kirsle.net/go/render/event"
"git.kirsle.net/go/ui"
@ -87,10 +88,13 @@ func Draw() {
// Center the window on screen.
func center(win *ui.Window) {
var modSize = win.Size()
var (
modSize = win.Size()
width, height = shmem.CurrentRenderEngine.WindowSize()
)
var moveTo = render.Point{
X: (window.W / 2) - (modSize.W / 2),
Y: (window.H / 4) - (modSize.H / 2),
X: (width / 2) - (modSize.W / 2),
Y: (height / 4) - (modSize.H / 2),
}
win.MoveTo(moveTo)

File diff suppressed because it is too large Load Diff

View File

@ -17,7 +17,8 @@ type LevelPack struct {
Engine render.Engine
// Callback functions.
OnPlayLevel func(pack levelpack.LevelPack, level levelpack.Level)
OnPlayLevel func(pack levelpack.LevelPack, level levelpack.Level)
OnCloseWindow func()
// Internal variables
window *ui.Window
@ -65,6 +66,7 @@ func NewLevelPackWindow(config LevelPack) *ui.Window {
// And each LevelPack's screen is a pager for its Levels.
tabFrame := ui.NewTabFrame("Screens Manager")
tabFrame.SetTabsHidden(true)
tabFrame.Supervise(config.Supervisor)
window.Pack(tabFrame, ui.Pack{
Side: ui.N,
FillX: true,
@ -90,12 +92,23 @@ func NewLevelPackWindow(config LevelPack) *ui.Window {
config.makeDetailScreen(tab, width, height, packmap[filename])
}
// indexTab.Resize(render.Rect{
// W: width-4,
// H: height-4,
// })
// Close button.
if config.OnCloseWindow != nil {
closeBtn := ui.NewButton("Close Window", ui.NewLabel(ui.Label{
Text: "Close",
Font: balance.MenuFont,
}))
closeBtn.Handle(ui.Click, func(ed ui.EventData) error {
config.OnCloseWindow()
return nil
})
config.Supervisor.Add(closeBtn)
window.Place(closeBtn, ui.Place{
Bottom: 15,
Center: true,
})
}
tabFrame.Supervise(config.Supervisor)
window.Supervise(config.Supervisor)
window.Hide()
return window

View File

@ -6,6 +6,7 @@ import (
"strings"
"git.kirsle.net/apps/doodle/pkg/balance"
"git.kirsle.net/apps/doodle/pkg/enum"
"git.kirsle.net/apps/doodle/pkg/level"
"git.kirsle.net/apps/doodle/pkg/log"
"git.kirsle.net/apps/doodle/pkg/native"
@ -32,8 +33,18 @@ type OpenLevelEditor struct {
func NewOpenLevelEditor(config OpenLevelEditor) *ui.Window {
var (
width, height = config.Engine.WindowSize()
columns = 4
)
// Show fewer columns on smaller devices.
if width <= enum.ScreenWidthXSmall {
columns = 1
} else if width <= enum.ScreenWidthSmall {
columns = 2
} else if width <= enum.ScreenWidthMedium {
columns = 3
}
window := ui.NewWindow("Open Drawing")
window.Configure(ui.Config{
Width: int(float64(width) * 0.75),
@ -86,7 +97,9 @@ func NewOpenLevelEditor(config OpenLevelEditor) *ui.Window {
func(i int, lvl string) {
btn := ui.NewButton("Level Btn", ui.NewLabel(ui.Label{
Text: lvl,
Font: balance.MenuFont,
Font: balance.MenuFont.Update(render.Text{
PadY: 2,
}),
}))
btn.Handle(ui.Click, func(ed ui.EventData) error {
if config.LoadForPlay {
@ -103,7 +116,7 @@ func NewOpenLevelEditor(config OpenLevelEditor) *ui.Window {
Fill: true,
})
if i > 0 && (i+1)%4 == 0 {
if columns == 1 || i > 0 && (i+1)%columns == 0 {
lvlRow = ui.NewFrame(fmt.Sprintf("Level Row %d", i))
frame.Pack(lvlRow, ui.Pack{
Side: ui.N,