Home / Uncategorized / Kwik4 Comic テンプレート

Kwik4 Comic テンプレート

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” が各パネル(コマ)を定義します。各パネルの直下に2つのフレームレイヤーを設定することができます。
“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 秒で設定されています。10行目の _Durationです。
背景となるイラストの画像レイヤーの横幅と縦幅を 11行目(_SheetWidth) と12行目(_SheetHeight)に設定してください。

page_swipe_comic.lua.
背景となるイラストの画像レイヤーの横幅と縦幅を 12行目に(bgW, bgH) 設定してください。 4で割って指定します。

ページの 事前読み込み(preload)を無効にしてください。そして、Kwiiのパブリッシュを行なってください。

備考:
パネルと吹き出しには、アニメーションを設定できますが、フレームには設定できません。
線形(Linear), 回転(Rotation), パルス(Pulse), バウンス(Bounce), ブリンク(Blink)、 シェイク(Shake)を設定可能です。
パス(Path), 画像スイッチ(Switch) とフィルター(Filer)は、未サポートとなります。