Axure 8.0:制作簡易翻卡游戲
翻卡游戲風靡于頁游與手游中的小游戲。具有玩法簡單、易于實現的特點,在活動中經常使用。本次教程將帶大家快速制作。
成品效果圖:
原型分析
流程分析:
卡牌獎品總覽->點擊按鈕->卡牌翻到背面、洗牌->花費代價點擊卡片/放棄本局游戲;
元素分析:
底層背景圖片:作者自己用矩形畫的
待翻卡牌:具有正面和反面2種狀態,采用動態面板切換。作者是用橢圓形配簡單文字畫的。
花費代價提示:用2個標簽,一個寫不變的信息,一個寫隨時變的花費代價信息。
重新開局按鈕:點擊后所有卡牌為背面、洗牌,代價回歸初始狀態。
退出按鈕(此教程省略):退出返回到指定頁面
實現步驟
元件的層次
背景圖片放在底層、卡牌放在頂層。通過”右擊圖片->順序”設置。
花費值變量設置
菜單欄 ” 項目->全局變量-> +”添加變量,變量名字和默認值自定,作者設為CardPrice和0
拖兩個標簽,一個寫固定說明性文字如“下個花費”,一個起名為“價格”并寫上初始文字。
單個卡牌設置
拖出一個動態面板,調好尺寸,起好名字如“獎品1”,雙擊后進入“面板狀態管理”里雙擊state1編輯狀態。Tip:單擊選中state1后再單擊可改名
- 正面:把正面圖片放在動態面板里。作者是拖了個橢圓配上文字
- 背面:推薦直接選中state1后復制狀態,然后改成另一張圖片。作者是改了下圓的填充色和文字。
為背面圖片添加鼠標單擊時用例:
面板狀態更改:
價格變量更改:作者改為”[[CardPrice+100]]”
“價格”標簽文字修改:
之后可在主頁面將該動態面板復制數個,并為每個獎品進行個性化調整。
翻面洗牌設置
變量和價格變回初始值:過程略。
翻面:為重來按鈕添加用例。將所有卡牌的面板狀態設置為背面。
洗牌:
可看作牌之間移動交換,耗費時間自定。具體交換規則點擊每一步的”fx”詳細設定每一步x,y坐標
fx詳細設置:添加局部變量以指定交換的卡牌元件,此處命名為”LVAR1″,
x為”[[LVAR1.left]]”,y為”[[LVAR1.top]]”。x、y中需各自添加局部變量。
X:
Y:
之后每一步的移動仿照此步設置好對應x,y值即可。
本文由 @YoSha 原創發布于人人都是產品經理。未經許可,禁止轉載。
- 目前還沒評論,等你發揮!