Home / Uncategorized / Finger-tracing crossword

Finger-tracing crossword

A finger-tracing crossword

the puzzle layer in page1.psd will become a crossword with the external codes for user to trace each letters of words with the finger. The sample kwik project is here

put these folders to your build4 folder

  • assets/sprites/
  • components/crossword

words are selected from data.lua

  • components/crossword/data.lua

    local data = {
        {"Apple","Mac"},
        {"Goole","Search"},
        {"Amazon","Ecommece"},
        {"Netflix","Video"},
        {"Microsoft","Windows"},
        {"Nvidia","GPU"},
        {"Facebook","SNS"},
        {"Oracle","RDB"},
        {"Cisico","Network"},
        {"Tesla","E-Car"},
        {"Samsung","Phone Asia"},
        {"Nokia","Phone Eu"},
        {"Yahoo","WWW"},
        {"Twitter","SNS"},
    }
    return data
    

the table size is defined in params.lua

  • components/crossword/params.lua

    local params = {
        colNum      = 8,
        rowNum      = 8,
        rectWidth   = 20, -- this is @1x, so in psd, need to multiply by 4 becasue of @4x system
        rectHeight  = 20,
        fontSize    = 20,
        posX        = display.contentCenterX, 
        posY        = display.contentCenterY
    }
    
    return params
    

layers in photoshop

  • msgTxt layer
    • kwik text replacement
    • params.listener = "msgTxt" in the external code shows a message

  • puzzle layer
    • command.create(params, "puzzle", UI) in the external code create a crossword

external code

  • ext/crossword_create.lua
  • ext/crossword_show.lua
  • ext/crossword_hide.lua

crowssowrd_create.lua

local params     = require("components.crossword.params")
local command    = require("components.crossword.command")

--params.hintGroup = "hnts"
params.listener = "msgTxt"
command.create(params, "puzzle", UI)
function UI.layer.msgTxt:crossword(event)
    local objs = event.objs
    local map = event.map
    print("====================")
    if event.type == "hit" then
        -- action for the word completed
        for i = 1, #objs do
            transition.to(
                objs[i],
                {
                    rotation = 360,
                    onComplete = function()
                        objs[i].rotation = 0
                    end
                }
            )
        end
        for k, v in pairs(map) do
            if v.completed == false then
                print(k, false)
                self.text = "Please find " .. k
                return
            end
        end
        -- all the words are completed
        self.text = "completed"
        print("all words are completed")
    end
end
UI.layer.msgTxt.text = "Please find " .. command.lastWord

crossword_show.lua

UI.layer.msgTxt:addEventListener("crossword", UI.layer.msgTxt)

crossword_hide.lua

UI.layer.msgTxt:removeEventListener("crossword", UI.layer.msgTxt)

If you want to use an imagesheet, set drawHandler to drawSpirte in view.lua.

The imagesheet in the sample is generated with Adobe Animate. Export spritesheet with JSON Array

  • components/crossword/view.lua

    local drawHandler = require("components.crossword.drawText").command
    --local drawHandler = require("components.crossword.drawSprite").command
    
    
  • components/crossword/drawSprite

    ...
    ...
    local jsonFile = "assets/sprites/alphabet_array.json"
    local imageFile = "assets/sprites/alphabet.png"
    ...
    ...
    
    local function newAlphabet(char, x, y, params)
        --65-90
        --97-122
        local frameIndex = char:byte()
        if frameIndex > 96 then
            local filename = char.."_1"
            frameIndex = frameMap[filename]
        else
            frameIndex = frameMap[char]
        end
        ...
        ...
    end
    
  • assets/sprites/alphabet_array.json

    ...
    ...
    ,{
        "filename": "Y",
        "frame": {"x":0,"y":99,"w":50,"h":47},
        "rotated": false,
        "trimmed": false,
        "spriteSourceSize": {"x":0,"y":0,"w":50,"h":47},
        "sourceSize": {"w":50,"h":47}
    }
    ,{
        "filename": "Z",
        "frame": {"x":50,"y":99,"w":40,"h":43},
        "rotated": false,
        "trimmed": false,
        "spriteSourceSize": {"x":0,"y":0,"w":40,"h":43},
        "sourceSize": {"w":40,"h":43}
    }
    ,{
        "filename": "a_1",
        "frame": {"x":90,"y":99,"w":23,"h":34},
        "rotated": false,
        "trimmed": false,
        "spriteSourceSize": {"x":0,"y":0,"w":23,"h":34},
        "sourceSize": {"w":23,"h":34}
    }
    ,{
        "filename": "b_1",
        "frame": {"x":113,"y":99,"w":27,"h":43},
        "rotated": false,
        "trimmed": false,
        "spriteSourceSize": {"x":0,"y":0,"w":27,"h":43},
        "sourceSize": {"w":27,"h":43}
    },
    ...
    ...
    

Enjoy!

Leave a Reply

Your email address will not be published. Required fields are marked *