Skip to content

Commit

Permalink
Merge pull request #37 from yohamta/update-example
Browse files Browse the repository at this point in the history 
update example
  • Loading branch information
@yohamta
yohamta authored Dec 3, 2022
2 parents bf5f0cc + 26cff79 commit de515e2
Show file tree
Hide file tree
Showing 16 changed files with 378 additions and 70 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ go get github.com/yohamta/furex/v2
## Example
[Full source code of the example](examples/game/main.go)

Assets by [Kenney](https://kenney.nl).
Assets by [Kenney](https://kenney.nl). Fonts by [00ff](http://www17.plala.or.jp/xxxxxxx/00ff/)

<p align="center">
<img width="480" src="./assets/example.gif">
Expand Down
Binary file modified assets/example.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added examples/game/assets/fonts/x14y20pxScoreDozer.ttf
View file
Binary file not shown.
Binary file added examples/game/assets/images/uipackSpace_sheet.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
81 changes: 81 additions & 0 deletions examples/game/assets/images/uipackSpace_sheet.xml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
<TextureAtlas imagePath="sheet.png">
<SubTexture name="barHorizontal_blue_left.png" x="400" y="78" width="6" height="26"/>
<SubTexture name="barHorizontal_blue_mid.png" x="388" y="420" width="16" height="26"/>
<SubTexture name="barHorizontal_blue_right.png" x="400" y="0" width="6" height="26"/>
<SubTexture name="barHorizontal_green_left.png" x="400" y="104" width="6" height="26"/>
<SubTexture name="barHorizontal_green_mid.png" x="386" y="366" width="16" height="26"/>
<SubTexture name="barHorizontal_green_right.png" x="400" y="26" width="6" height="26"/>
<SubTexture name="barHorizontal_red_left.png" x="400" y="130" width="6" height="26"/>
<SubTexture name="barHorizontal_red_mid.png" x="386" y="340" width="16" height="26"/>
<SubTexture name="barHorizontal_red_right.png" x="400" y="156" width="6" height="26"/>
<SubTexture name="barHorizontal_shadow_left.png" x="400" y="182" width="6" height="26"/>
<SubTexture name="barHorizontal_shadow_mid.png" x="386" y="314" width="16" height="26"/>
<SubTexture name="barHorizontal_shadow_right.png" x="400" y="208" width="6" height="26"/>
<SubTexture name="barHorizontal_white_left.png" x="402" y="314" width="6" height="26"/>
<SubTexture name="barHorizontal_white_mid.png" x="399" y="236" width="16" height="26"/>
<SubTexture name="barHorizontal_white_right.png" x="402" y="366" width="6" height="26"/>
<SubTexture name="barHorizontal_yellow_left.png" x="400" y="52" width="6" height="26"/>
<SubTexture name="barHorizontal_yellow_mid.png" x="399" y="262" width="16" height="26"/>
<SubTexture name="barHorizontal_yellow_right.png" x="402" y="340" width="6" height="26"/>
<SubTexture name="barVertical_blue_bottom.png" x="26" y="500" width="26" height="6"/>
<SubTexture name="barVertical_blue_mid.png" x="336" y="322" width="26" height="16"/>
<SubTexture name="barVertical_blue_top.png" x="104" y="506" width="26" height="6"/>
<SubTexture name="barVertical_green_bottom.png" x="130" y="506" width="26" height="6"/>
<SubTexture name="barVertical_green_mid.png" x="336" y="370" width="26" height="16"/>
<SubTexture name="barVertical_green_top.png" x="78" y="506" width="26" height="6"/>
<SubTexture name="barVertical_red_bottom.png" x="130" y="500" width="26" height="6"/>
<SubTexture name="barVertical_red_mid.png" x="336" y="386" width="26" height="16"/>
<SubTexture name="barVertical_red_top.png" x="0" y="506" width="26" height="6"/>
<SubTexture name="barVertical_shadow_bottom.png" x="104" y="500" width="26" height="6"/>
<SubTexture name="barVertical_shadow_mid.png" x="386" y="314" width="16" height="26"/>
<SubTexture name="barVertical_shadow_top.png" x="0" y="500" width="26" height="6"/>
<SubTexture name="barVertical_white_bottom.png" x="26" y="506" width="26" height="6"/>
<SubTexture name="barVertical_white_mid.png" x="336" y="354" width="26" height="16"/>
<SubTexture name="barVertical_white_top.png" x="78" y="500" width="26" height="6"/>
<SubTexture name="barVertical_yellow_bottom.png" x="52" y="506" width="26" height="6"/>
<SubTexture name="barVertical_yellow_mid.png" x="336" y="338" width="26" height="16"/>
<SubTexture name="barVertical_yellow_top.png" x="52" y="500" width="26" height="6"/>
<SubTexture name="crossair_black.png" x="300" y="468" width="32" height="32"/>
<SubTexture name="crossair_blackOutline.png" x="300" y="400" width="36" height="36"/>
<SubTexture name="crossair_blue.png" x="332" y="436" width="32" height="32"/>
<SubTexture name="crossair_blueOutline.png" x="300" y="328" width="36" height="36"/>
<SubTexture name="crossair_red.png" x="300" y="436" width="32" height="32"/>
<SubTexture name="crossair_redOutline.png" x="300" y="364" width="36" height="36"/>
<SubTexture name="crossair_white.png" x="332" y="468" width="32" height="32"/>
<SubTexture name="crossair_whiteOutline.png" x="300" y="292" width="36" height="36"/>
<SubTexture name="cursor_hand.png" x="336" y="292" width="30" height="30"/>
<SubTexture name="cursor_pointer3D.png" x="380" y="212" width="20" height="24"/>
<SubTexture name="cursor_pointer3D_shadow.png" x="364" y="450" width="20" height="27"/>
<SubTexture name="cursor_pointerFlat.png" x="364" y="477" width="20" height="24"/>
<SubTexture name="cursor_pointerFlat_shadow.png" x="366" y="292" width="20" height="27"/>
<SubTexture name="dotBlue.png" x="362" y="322" width="24" height="24"/>
<SubTexture name="dotGreen.png" x="364" y="426" width="24" height="24"/>
<SubTexture name="dotRed.png" x="362" y="370" width="24" height="24"/>
<SubTexture name="dotWhite.png" x="362" y="346" width="24" height="24"/>
<SubTexture name="dotYellow.png" x="360" y="402" width="24" height="24"/>
<SubTexture name="dot_shadow.png" x="336" y="402" width="24" height="24"/>
<SubTexture name="glassPanel.png" x="0" y="0" width="100" height="100"/>
<SubTexture name="glassPanel_cornerBL.png" x="0" y="100" width="100" height="100"/>
<SubTexture name="glassPanel_cornerBR.png" x="0" y="200" width="100" height="100"/>
<SubTexture name="glassPanel_cornerTL.png" x="200" y="400" width="100" height="100"/>
<SubTexture name="glassPanel_cornerTR.png" x="300" y="0" width="100" height="100"/>
<SubTexture name="glassPanel_corners.png" x="100" y="200" width="100" height="100"/>
<SubTexture name="glassPanel_projection.png" x="200" y="300" width="100" height="100"/>
<SubTexture name="glassPanel_tab.png" x="300" y="100" width="100" height="112"/>
<SubTexture name="metalPanel.png" x="200" y="200" width="100" height="100"/>
<SubTexture name="metalPanel_blue.png" x="200" y="100" width="100" height="100"/>
<SubTexture name="metalPanel_blueCorner.png" x="200" y="0" width="100" height="100"/>
<SubTexture name="metalPanel_green.png" x="100" y="400" width="100" height="100"/>
<SubTexture name="metalPanel_greenCorner.png" x="100" y="300" width="100" height="100"/>
<SubTexture name="metalPanel_plate.png" x="300" y="212" width="80" height="80"/>
<SubTexture name="metalPanel_red.png" x="100" y="100" width="100" height="100"/>
<SubTexture name="metalPanel_redCorner.png" x="100" y="0" width="100" height="100"/>
<SubTexture name="metalPanel_yellow.png" x="0" y="400" width="100" height="100"/>
<SubTexture name="metalPanel_yellowCorner.png" x="0" y="300" width="100" height="100"/>
<SubTexture name="squareBlue.png" x="384" y="450" width="19" height="26"/>
<SubTexture name="squareGreen.png" x="380" y="262" width="19" height="26"/>
<SubTexture name="squareRed.png" x="384" y="394" width="19" height="26"/>
<SubTexture name="squareWhite.png" x="384" y="476" width="19" height="26"/>
<SubTexture name="squareYellow.png" x="380" y="236" width="19" height="26"/>
<SubTexture name="square_shadow.png" x="386" y="288" width="19" height="26"/>
</TextureAtlas>
0 examples/game/assets/uipack_rpg_sheet.png → ...s/game/assets/images/uipack_rpg_sheet.png
View file
File renamed without changes
0 examples/game/assets/uipack_rpg_sheet.xml → ...s/game/assets/images/uipack_rpg_sheet.xml
View file
File renamed without changes.
130 changes: 108 additions & 22 deletions examples/game/main.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,10 @@ import (
"sync"

"github.com/hajimehoshi/ebiten/v2"
"github.com/tinne26/etxt"
"github.com/yohamta/furex/v2"
"github.com/yohamta/furex/v2/examples/game/sprites"
"github.com/yohamta/furex/v2/examples/game/text"
"github.com/yohamta/furex/v2/examples/game/widgets"
)

Expand Down Expand Up @@ -41,33 +43,53 @@ func (g *Game) Layout(outsideWidth, outsideHeight int) (int, int) {
}

func NewGame() (*Game, error) {
sprites.LoadSprites(sprites.LoadOpts{
PanelOpts: []sprites.PanelOpts{
{
Name: "panelInset_beige.png",
Border: 32,
text.LoadFonts()
sprites.LoadSprites(
"assets/images/uipack_rpg_sheet.xml",
"assets/images/uipack_rpg_sheet.png",
sprites.LoadOpts{
PanelOpts: map[string]sprites.PanelOpts{
"panelInset_beige.png": {
Border: 32,
Center: 36,
},
"panel_brown.png": {
Border: 32,
Center: 36,
},
},
{
Name: "panel_brown.png",
Border: 32,
})
sprites.LoadSprites(
"assets/images/uipackSpace_sheet.xml",
"assets/images/uipackSpace_sheet.png",
sprites.LoadOpts{
PanelOpts: map[string]sprites.PanelOpts{
"glassPanel_corners.png": {
Border: 40,
Center: 20,
},
"glassPanel_projection.png": {
Border: 20,
Center: 10,
},
},
},
})
})
game := &Game{}
return game, nil
}

func (g *Game) setupUI() {
newButton := func() *furex.View {
newButton := func(txt string) *furex.View {
return (&furex.View{
Width: 45,
Height: 49,
MarginTop: 5,
MarginBottom: 10,
MarginLeft: 5,
MarginRight: 5,
MarginLeft: 20,
MarginRight: 20,
Handler: &widgets.Button{
Text: "Button",
Text: txt,
Color: color.RGBA{210, 178, 144, 255},
Sprite: "buttonSquare_brown.png",
SpritePressed: "buttonSquare_brown_pressed.png",
OnClick: func() { println("button clicked") },
Expand All @@ -93,6 +115,8 @@ func (g *Game) setupUI() {
(&furex.View{
Width: 300,
Height: 300,
MarginTop: 120,
MarginLeft: 130,
Handler: &widgets.Panel{Sprite: "panel_brown.png"},
Direction: furex.Column,
AlignItems: furex.AlignItemCenter,
Expand Down Expand Up @@ -121,6 +145,7 @@ func (g *Game) setupUI() {
Width: 180,
MarginBottom: 2,
Handler: &widgets.Text{
Color: color.RGBA{50, 48, 41, 255},
Value: "Health",
},
},
Expand All @@ -146,6 +171,7 @@ func (g *Game) setupUI() {
Width: 180,
MarginBottom: 2,
Handler: &widgets.Text{
Color: color.RGBA{50, 48, 41, 255},
Value: "Mana",
},
},
Expand Down Expand Up @@ -195,17 +221,19 @@ func (g *Game) setupUI() {
// close button
(&furex.View{
Position: furex.PositionAbsolute,
Left: 296,
Top: 4,
Left: 300 - 35/2,
Top: 4 - 38/2,
Width: 35,
Height: 38,
Handler: &widgets.Button{
Sprite: "buttonRound_blue.png",
OnClick: func() { println("button clicked") },
},
}).AddChild(
&furex.View{
Position: furex.PositionAbsolute,
Left: 1,
Top: -2,
Left: 18,
Top: 17,
Handler: &widgets.Sprite{
Sprite: "iconCross_beige.png",
},
Expand All @@ -222,10 +250,68 @@ func (g *Game) setupUI() {
AlignItems: furex.AlignItemEnd,
MarginBottom: 20,
}).AddChild(
newButton(),
newButton(),
newButton(),
newButton(),
newButton("A"),
newButton("B"),
newButton("C"),
newButton("D"),
),
).AddChild(
(&furex.View{
Position: furex.PositionAbsolute,
Left: 20,
Top: 52,
}).AddChild(
// panel
(&furex.View{
Width: 260,
Height: 140,
Handler: &widgets.Panel{Sprite: "glassPanel_corners.png"},
Direction: furex.Column,
AlignItems: furex.AlignItemCenter,
Justify: furex.JustifyCenter,
}).AddChild(
&furex.View{
Width: 100,
Height: 8,
MarginBottom: 20,
Direction: furex.Row,
AlignItems: furex.AlignItemCenter,
Justify: furex.JustifyCenter,
Handler: &widgets.Text{
Color: color.RGBA{45, 73, 94, 255},
Value: "PLAY THE GAME?",
HorzAlign: etxt.XCenter,
VertAlign: etxt.YCenter,
},
},
(&furex.View{
Width: 100,
Height: 50,
Direction: furex.Row,
AlignItems: furex.AlignItemCenter,
Justify: furex.JustifyCenter,
}).AddChild(
&furex.View{
Width: 100,
Height: 50,
Handler: &widgets.Panel{
Sprite: "glassPanel_projection.png",
Text: "YES",
OnClick: func() { println("button clicked") },
},
},
&furex.View{
Width: 100,
Height: 50,
MarginLeft: 20,
Handler: &widgets.Panel{
Sprite: "glassPanel_projection.png",
Text: "NO",
OnClick: func() { println("button clicked") },
},
},
),
),
),
).AddChild(
// panels that draws mouse cursor
Expand Down
29 changes: 19 additions & 10 deletions examples/game/sprites/panel.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,35 +7,44 @@ import (
"github.com/yohamta/ganim8/v2"
)

func createPanels(img *ebiten.Image, r image.Rectangle, border int) map[string]*ganim8.Sprite {
type PanelOpts struct {
Border int
Center int
}

func createPanels(img *ebiten.Image, r image.Rectangle, opts PanelOpts) map[string]*ganim8.Sprite {
ret := map[string]*ganim8.Sprite{}
w, h := img.Bounds().Dx(), img.Bounds().Dy()
border := opts.Border
center := opts.Center
cx, cy := r.Min.X+r.Dx()/2, r.Min.Y+r.Dy()/2

// top left
g := ganim8.NewGrid(border, border, img.Bounds().Dx(), img.Bounds().Dy(), r.Min.X, r.Min.Y)
g := ganim8.NewGrid(border, border, w, h, r.Min.X, r.Min.Y)
ret["top_left"] = ganim8.NewSprite(img, g.Frames())
// top
g = ganim8.NewGrid(r.Dx()-border*2, r.Dy()-border*2, img.Bounds().Dx(), img.Bounds().Dy(), r.Min.X+border, r.Min.Y)
g = ganim8.NewGrid(center, border, w, h, cx-center/2, r.Min.Y)
ret["top"] = ganim8.NewSprite(img, g.Frames())
// top right
g = ganim8.NewGrid(border, border, img.Bounds().Dx(), img.Bounds().Dy(), r.Min.X+r.Dx()-border, r.Min.Y)
g = ganim8.NewGrid(border, border, w, h, r.Min.X+r.Dx()-border, r.Min.Y)
ret["top_right"] = ganim8.NewSprite(img, g.Frames())
// left
g = ganim8.NewGrid(border, r.Dy()-border*2, img.Bounds().Dx(), img.Bounds().Dy(), r.Min.X, r.Min.Y+border)
g = ganim8.NewGrid(border, center, w, h, r.Min.X, cy-center/2)
ret["left"] = ganim8.NewSprite(img, g.Frames())
// center
g = ganim8.NewGrid(r.Dx()-border*2, r.Dy()-border*2, img.Bounds().Dx(), img.Bounds().Dy(), r.Min.X+border, r.Min.Y+border)
g = ganim8.NewGrid(center, center, w, h, cx-center/2, cy-center/2)
ret["center"] = ganim8.NewSprite(img, g.Frames())
// right
g = ganim8.NewGrid(border, r.Dy()-border*2, img.Bounds().Dx(), img.Bounds().Dy(), r.Min.X+r.Dx()-border, r.Min.Y+border)
g = ganim8.NewGrid(border, center, w, h, r.Min.X+r.Dx()-border, cy-center/2)
ret["right"] = ganim8.NewSprite(img, g.Frames())
// bottom left
g = ganim8.NewGrid(border, border, img.Bounds().Dx(), img.Bounds().Dy(), r.Min.X, r.Min.Y+r.Dy()-border)
g = ganim8.NewGrid(border, border, w, h, r.Min.X, r.Min.Y+r.Dy()-border)
ret["bottom_left"] = ganim8.NewSprite(img, g.Frames())
// bottom
g = ganim8.NewGrid(r.Dx()-border*2, border, img.Bounds().Dx(), img.Bounds().Dy(), r.Min.X+border, r.Min.Y+r.Dy()-border)
g = ganim8.NewGrid(center, border, w, h, cx-center/2, r.Max.Y-border)
ret["bottom"] = ganim8.NewSprite(img, g.Frames())
// bottom right
g = ganim8.NewGrid(border, border, img.Bounds().Dx(), img.Bounds().Dy(), r.Min.X+r.Dx()-border, r.Min.Y+r.Dy()-border)
g = ganim8.NewGrid(border, border, w, h, r.Min.X+r.Dx()-border, r.Min.Y+r.Dy()-border)
ret["bottom_right"] = ganim8.NewSprite(img, g.Frames())

return ret
Expand Down
25 changes: 10 additions & 15 deletions examples/game/sprites/sprites.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,17 +26,12 @@ type subTexture struct {
Height int `xml:"height,attr"`
}

type PanelOpts struct {
Name string
Border int
}

type LoadOpts struct {
PanelOpts []PanelOpts
PanelOpts map[string]PanelOpts
}

func LoadSprites(opts LoadOpts) {
dat, err := os.ReadFile("assets/uipack_rpg_sheet.xml")
func LoadSprites(xmlPath string, imgPath string, opts LoadOpts) {
dat, err := os.ReadFile(xmlPath)
if err != nil {
panic(err)
}
Expand All @@ -45,7 +40,7 @@ func LoadSprites(opts LoadOpts) {
panic(err)
}

img, _, err := ebitenutil.NewImageFromFile("assets/uipack_rpg_sheet.png")
img, _, err := ebitenutil.NewImageFromFile(imgPath)
if err != nil {
panic(err)
}
Expand All @@ -58,14 +53,14 @@ func LoadSprites(opts LoadOpts) {
rects[s.Name] = rect
}

for _, o := range opts.PanelOpts {
r, ok := rects[o.Name]
for k, o := range opts.PanelOpts {
r, ok := rects[k]
if !ok {
panic("panel not found: " + o.Name)
panic("panel not found: " + k)
}
panels := createPanels(img, r, o.Border)
for k, v := range panels {
sprites[fmt.Sprintf("%s_%s", o.Name, k)] = v
panels := createPanels(img, r, o)
for kk, v := range panels {
sprites[fmt.Sprintf("%s_%s", k, kk)] = v
}
}
}
Expand Down
Loading

0 comments on commit de515e2

Please sign in to comment.