Kwik4のテンプレート(tmplt)のカスタマイズを使った実験的な手法です。
Electric EggplantのDavid Fox氏 は Corona Comic SDK 2.0 を使った the Middle School Confidential アプリを2011年に開発しています。
http://www.middleschoolconfidential.com
https://github.com/Eddy34743/Corona-Comics-SDK-2.0
The actual page images on video are proprietary. Excerpted from Be Confident in Who You Are by Annie Fox, M.Ed., © 2008. Used with permission of Free Spirit Publishing Inc., Minneapolis, MN; 800-735-7323; www.freespirit.com. All rights reserved. Images are from the app, “Middle School Confidential 1: Be Confident in Who You Are” from Electric Eggplant – http://MiddleSchoolConfidential.com
このパネルとフレームを使った画面遷移をKwik4で実現してみます。
最新のKwik4をご利用ください。
※ ~/Documents/Kwikのsettings.xmlをテキストエディターで開いて、 <prefLang>en</prefLang>のen をjpに変更すると
Kwikのパネルが日本語表示になります。
<prefLang>jp</prefLang>
サンプルのコミックプロジェクトはこちらです。
http://kwiksher.com/daily/comic1223/Comic.zip
build4 フォルダを corona simulatorで開いてください。
page1のpsdファイルは下記のレイヤー構造となっています。
“Auto” レイヤー は、自動で画面遷移を開始します。
“Tap” レイヤー は、次の画面に即座に移動するボタンです。
“Whole image” は画面全体を表示するボタンになります。
“-panels” は レイヤーグループで、各パネル(コマ割)を矩形で指定します。
“ballons” のレイヤーグループは、各吹き出しのレイヤーとなります。
“background”がコミックのイラストの画像レイヤーです。
各パネル（コマ割）には、アニメーションを設定することが可能です。Kwikのレイヤー名の規則に従ってください。数字のみのレイヤー名や記号を含むもの、全角文字を使っては行けません。アルファベットと数字を使用してください。吹き出しやパネルにアニメーションを設定しないのであれば、数字のみレイヤー名でも構いません。
“-panels” が各パネル（コマ）を定義します。各パネルの直下に２つのフレームレイヤーを設定することができます。
“ballons” が各吹き出しを定義します。
パネルと吹き出しを関連づけるために、各吹き出しの名前には、パネルの名前、または名前の一部を含む必要があります。
例えば パネル名が “1” ならば, 吹出し “1” が表示されます。
パネルが フレーム “11” と “12”を含む場合, 吹き出し名を “bl11” とすると “11” が含まれますので、 “bl11” の吹き出しがパネル 11と一緒に表示されます。吹き出し “bl11″は、アニメーションを設定するために、吹き出し名が “bl”というアルファベットから始まっています。
フレーム名 “12” の時には、吹き出し “12” が表示されます。
吹き出し “21-31” は、フレーム “21” と “31”の両方で表示されます。
ボタン “Auto”には下記の外部コードが設定されています。
——————————-
— auto
local panels = require(“components.”..UI.page..”.page_meta_panels”)
panels:reset()
panels:start(1, false)
——————————-
ボタン “Tap” には下記の外部コードが設定されています。
——————————-
— tap
local panels = require(“components.”..UI.page..”.page_meta_panels”)
panels:tap()
— panels:start(4, true) — pause = true
return true
——————————-
“Whole Image” には下記の外部コードが設定されています。
——————————-
— whole image
local panels = require(“components.”..UI.page..”.page_meta_panels”)
panels:reset()
——————————-
パネル “pn1” にはアニメーションが設定されています。
吹き出し “bl11” にはアニメーションが設定されています。
下記のテンプレートファイルが置き換わっています。components/pageXXXのファイルです。
下記の.luaの中身を置き換えてください。例えば、layer_anime.luaの中身は、layer_anime_comic.luaのコードに入れ替えてください。
– layer_anim.luaの中身をlayer_anim_comic.lua のものにする。
– layer_image.luaの中身をlayer_image_set.lua
– layer_meta.luaの中身をpage_meta_comic.lua
– page_swipe.luaの中身をpage_swipe_comic.lua
page_meta_comic.lua.
画面遷移が 3 秒で設定されています。１０行目の _Durationです。
背景となるイラストの画像レイヤーの横幅と縦幅を 11行目(_SheetWidth) と12行目(_SheetHeight)に設定してください。
page_swipe_comic.lua.
背景となるイラストの画像レイヤーの横幅と縦幅を 12行目に(bgW, bgH) 設定してください。 4で割って指定します。
ページの 事前読み込み(preload)を無効にしてください。そして、Kwiiのパブリッシュを行なってください。
備考:
パネルと吹き出しには、アニメーションを設定できますが、フレームには設定できません。
線形(Linear), 回転(Rotation), パルス(Pulse), バウンス(Bounce), ブリンク(Blink)、 シェイク(Shake)を設定可能です。
パス(Path), 画像スイッチ(Switch) とフィルター(Filer)は、未サポートとなります。