本文へスキップ

Kwik App Design Book: 3 Kwikの各パネル


Kwikの基本的な機能の紹介

Kwikの機能は以下の5つに大まかに分類されます。

  1. プロジェクトとページの作成
  2. レイヤーと画像の入れ替え
  3. インタラクション
  4. アニメーション
  5. 物理



1.プロジェクトとページの作成

作成するアプリの各フォトショップのページとKwikで作成したボタンやアニメーションなどの部品の情報をまとめて管理するものです。

  • プロジェクトの設定(プロパティ)

  • ページの設定(プロパティ)

  • 外部ファイルの追加

  • Main.luaへの外部コードの追加

  • 外部コードの追加

  • グループの順序

  • ページの追加

  • サウンドの追加

  • アクション

  • タイマー

  • グループの作成

  • グループレイヤーを表示しない

  • 変数の作成

2.レイヤーと画像の入れ替え

言語を切り替える設定、パラパラアニメーションを行うスプライトシートやムービークリップの入れ替え、読み上げ機能で単語をハイライトする、ビデオに入れ替え、ウェブのページに入れ替え、ベクターの図形に入れ替え、地図の入れ替え、レイヤーの画像の数を増やす機能やユーザ操作やプログラムで動的に更新される文字や文字入力を行うことができます。

  • レイヤーの設定(プロパティ)

  • 言語をレイヤーに設定

  • スプライトシートに置き換え

  • 読み上げと置き換え

  • ビデオと置き換え

  • ウェブと置き換え

  • ベクター図形と置き換え

  • 地図と置き換え

  • 数を増やす

  • パーティクルと置き換え

  • 動的な文字にする

  • 文字入力にする

  • カウントダウンと置き換え

  • テキストに置き換え

3.インタラクション

アプリケーションでユーザが操作するボタン、指でのタッチ、スワイプ、ピンチといった操作について、どう反応するかといった操作を設定することができます。デバイス自体を振る(加速度)を検知して、それに応じた動作を設定することも可能です。

  • ボタンの追加

  • ドラッグで 動かす

  • ピンチ

  • スワイプ

  • スピン

  • シェイク

  • スクロール

  • パラレル

  • キャンバス

4.アニメーション

フォトショップのレイヤーの画像にアニメーションを設定します。線形のアニメーションやパスに沿ったアニメーションを行います。画像をスイッチさせて、別の画像を表示、画像を回転、拡大や縮小を素早く行うパルスや、跳ねるようなバウンス、ウインクするようなアニメーションを作成することが可能です。

  • 線形アニメーション

  • パスアニメーション

  • スイッチング

  • 回転

  • パルス

  • バウンス

  • ウィンク

  • シェイク

5. 物理

現実世界の重力をアプリケーションの中で再現し、重力で物体を落下させたり、物体に力(加速度)を加えることができます。物体の衝突や反発、物体同士を連結(ジョイント)させることもできます。

  • 環境設定

  • 物体の設定

  • 加速度の設定

  • ジョイントの設定

  • 衝突判定