tech/game

21/07/13 TicTacToe - LUA DISPLAY OBJECTS & LUA FONT FORMATING: How to style objects, fonts in Lua

tech-lover 2021. 7. 13. 14:29

https://youtu.be/CgFtOWQvcAo

https://fonts.google.com/

 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

https://fonts.google.com/specimen/Ranchers?query=rancher 

 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

https://www.dafont.com/brady-bunch.font

 

Brady Bunch Remastered Font | dafont.com

 

www.dafont.com

https://www.dafont.com/goonies.font

 

Goonies Font | dafont.com

 

www.dafont.com

 

 

```

local composer = require( "composer" )

local scene = composer.newScene()

 

-- -----------------------------------------------------------------------------------

-- Code outside of the scene event functions below will only be executed ONCE unless

-- the scene is removed entirely (not recycled) via "composer.removeScene()"

-- -----------------------------------------------------------------------------------

 

local grpBackground

local grpMain

local grpUI

 

local grpBoardBG

local grpBoardFG



local backgroundImage

local gridSqure

 

local imgLogo

local imgGameTitle

 

local message

local messageOptions = {

    parent = grpUI,

    text = "Hello World",

    x = display.contentCenterX,

    y = display.contentCenterY-210,

    width = display.contentWidth - 20,

    font = "fonts-tictactoe/BradBunR.ttf",

    fontSize = 40,

    align = "center"

}

 

local optionsNotes = 

{

    text = "O",

    x = display.contentCenterX,

    y = display.contentCenterY,

    -- font = native.systemFont,

    font = "fonts-tictactoe/BradBunR.ttf",

    fontSize = 120,

    align = "center"  -- Alignment parameter

}

 

local optionsCrosses = 

{

    text = "X",

    x = display.contentCenterX,

    y = display.contentCenterY,

    font = "fonts-tictactoe/BradBunR.ttf",

    fontSize = 120,

    align = "center"

}

 

-- -----------------------------------------------------------------------------------

-- Scene event functions

-- -----------------------------------------------------------------------------------

 

-- create()

function scene:create( event )

 

    local sceneGroup = self.view

    -- Code here runs when the scene is first created but has not yet appeared on screen

 

    grpBackground = display.newGroup()  

    grpMain = display.newGroup()   

    grpUI = display.newGroup() 

 

    sceneGroup:insert(grpBackground)

    sceneGroup:insert(grpMain)

    sceneGroup:insert(grpUI)

 

    grpBoardBG = display.newGroup() 

    grpBoardFG = display.newGroup() 

    grpMain:insert(grpBoardBG)

    grpBoardBG:insert(grpBoardFG)

 

    grpBoardFG:toBack()

    grpBoardFG:toFront()

 

    backgroundImage = display.newImageRect(grpBackground, "images-tictactoe/background-orange.jpg"7681024)

    backgroundImage.x = display.contentCenterX

    backgroundImage.y = display.contentCenterY

 

    local gridBoarder = display.newRect(grpBoardBG, display.contentCenterX, display.contentCenterY, 300300)

    gridBoarder.alpha = 0.5

    gridBoarder:toBack()

    gridBoarder:setFillColor(1110.1)

    gridBoarder.strokeWidth = 10

    gridBoarder:setStrokeColor(00.50.5)

 

    local imgLogo = display.newImageRect(grpMain, "images-tictactoe/logo.png"

    7070)

    imgLogo.x = display.contentCenterX - 130

    imgLogo.y = display.contentCenterY - 300

    imgLogo:rotate(-10)

    imgLogo:setFillColor(0.50.51)

 

    local imgGameTitle = display.newImageRect(grpMain, "images-tictactoe/game-studio.png"1000/5358/5)

    imgGameTitle.x = display.contentCenterX + 10

    imgGameTitle.y = display.contentCenterY - 300

    imgGameTitle:setFillColor(0.511)

 

    message = display.newText(messageOptions)

end

 

 

-- show()

function scene:show( event )

 

    local sceneGroup = self.view

    local phase = event.phase

 

    if ( phase == "will" ) then

        -- Code here runs when the scene is still off screen (but is about to come on screen)

         



        local function drawSquare(xPosIn, yPosIn)

            print("sqaure")

            gridSquare = display.newRect(grpBoardBG, xPosIn, yPosIn, 100100)

            gridSquare.strokeWidth = 3

            gridSquare:setStrokeColor( 000)

            gridSquare.isVisible = true

            gridSquare:toBack() 

 

        end



        local function drawRow(xPosIn, yPosIn) 

            print("drawRow()")

 

            local numCols = 3

            local xPos = xPosIn

            local yPos = yPosIn

 

            for count=1, numCols, 1 do

                print("for loop")

 

                drawSquare(xPos, yPos)

                xPos = xPos + 100



            end

 

        end

 

        local function drawGrid(xPosIn, yPosIn)

            print("drawGrid()")

 

            local numRows = 3

            local xPos = xPosIn

            local yPos = yPosIn

 

            for count=1, numRows, 1 do

            

                print("for loop rows")

                drawRow(xPos, yPos)

                yPos = yPos + 100

 

            end

 

        end

 

        -- Starting box coordinates (top left box 1)

        local xPos = display.contentCenterX - 100

        local yPos = display.contentCenterY - 100

        drawGrid(xPos, yPos)

 

        grpBoardBG.y = grpBoardBG.y + 20

 

    elseif ( phase == "did" ) then

        -- Code here runs when the scene is entirely on screen

 

        local charNotes = display.newText( optionsNotes )

        grpBoardFG:insert(charNotes)

        charNotes:setFillColor( 10.20.1 )

        charNotes.isVisible = true

        charNotes:toFront()

    

        local charCrosses = display.newText( optionsCrosses )

        grpBoardFG:insert(charCrosses)

        charCrosses:setFillColor( 0.10.51 )

        charCrosses.isVisible = true        

        charCrosses:toFront()

 

    end

end

 

 

-- hide()

function scene:hide( event )

 

    local sceneGroup = self.view

    local phase = event.phase

 

    if ( phase == "will" ) then

        -- Code here runs when the scene is on screen (but is about to go off screen)

 

    elseif ( phase == "did" ) then

        -- Code here runs immediately after the scene goes entirely off screen

 

    end

end

 

 

-- destroy()

function scene:destroy( event )

 

    local sceneGroup = self.view

    -- Code here runs prior to the removal of scene's view

 

end

 

 

-- -----------------------------------------------------------------------------------

-- Scene event function listeners

-- -----------------------------------------------------------------------------------

scene:addEventListener( "create", scene )

scene:addEventListener( "show", scene )

scene:addEventListener( "hide", scene )

scene:addEventListener( "destroy", scene )

-- -----------------------------------------------------------------------------------

 

return scene

 

 

```