2012/04/07のプロ生@品川の時のLTスライドです。

1. 1
CoronaSDKのご紹介
ビールじゃないよ？

2. 2
軽く自己紹介
うずきあおば ( @uzuki_aoba )
 日本コロナの会 元・熊本支部長
 春から神奈川で新社会人
 大学時代はPythonやらJavaScriptで書いてGAEで動かしたりしてま
した
 バイトでネット販売の支援アプリを書いてました

3. 3
物理エンジンを使う例

4. 4
物理エンジンを使う例
地面(画像)を表示し、
物が当たった時の
跳ね返り具合を設定
箱(画像)を表示し、
上空にセット
箱を落とす！

5. 5
CoronaSDKの特徴
が開発しているマルチプラットフォームSDK。Adobe
Flashに似た構造のグラフィックフレームワークを持っています。
 Lua言語
 2Dゲーム得意
 OpenGL (ネイティブ, 60fpsくらい
 OpenAL
 Box2D
 マルチプラットフォーム
 サーバサイドでビルド
 海外では商用アプリも実績あり

6. 6
映画のプロモーションにも！
 Dolphin Tale: Fling a Fish

7. 7
CoronaSDKの特徴
Flasherとかデザイン系の人にやさしい？
 PhotoshopやFlash用のプラグインやツール
豊富なドキュメント
 Ansca社の公式ドキュメント(英語)
 APIレファレンス, サンプルコード集, コードの共有スペース
 日本語の本も出ました！
 「基礎から学ぶ CoronaSDK」2012/2/25
 無料で始められる！
 マーケットに出すならライセンス買ってね

8. 8
Robert Nay
 14歳
 Coronaで作ったゲームが１ヶ月で700万DL
 開発期間は 1.5ヶ月 4,000行

9. 「シュベーレ・グスタフごっ
こ。」
9
 位置、方角、発射角度を取得。着弾地点を算出して地図で表
示

10. 10
使ってみた実感
 Anscaの開発スピードが早くて嬉しい
 週一くらいのペースでバグ潰しやら機能拡張やらをしてく
れる
 シュミレータが早い。軽い
 コードを上書き保存するとすぐに反映される
 反復的な開発、Try&Errorでガンガンいこうぜ
 画像さえ準備すれば、かなりいい感じ
 絵を使って簡単に、綺麗に魅せるのが得意

11. 11
ご静聴ありがとうございました！

12. 12
Anscaのプロモーションビデオ
 http://www.youtube.com/watch?v=WMZ7R92glQ4

13. 13
サーバサイドでビルド
Ansca
Your
Code
iPhone
App
iPad App
Android
App

14. 14
マルチプラットフォーム

15. 15
無料からはじめられる
 無料でも有料ライセンスとほぼ同じことが出来る！
 無料ではできないこと
 App StoreやGoogle Playへの登録（が可能なバイナリの作成）
 最新機能の使用
 ビルドスピードが若干遅い
 有料ライセンス
 iOS Only $199/year
 + Apple社のiOSの開発者登録料
 Android Only $199/year
 All Platforms $349/year
 http://www.anscamobile.com/pricing/

16. 16
Corona Daily Builds Summary
http://developer.anscamobile.com/content/
corona-daily-builds/summary

17. 17
Kwik
 Photoshopのプラグイン
 コードを操作することなく、デジ
タルブック等のアプリが作れる
 短期間で見た目がいいものが作れ
るので、受けがいい
https://docs.google.com/viewer?a=v&pid=sites&srcid=ZGVmYXVsdGRvbWFpbnxjb3Jv
bmFvcGVuc3JjMnxneDoyYWJhZDIzNTljMmFhZDcw

18. 18
SpriteLoq
 Flashで作ったキャラクターを書きだす（画像+コード）
 アニメーションをフレームごとに切って、スプライトシート
を作る
 シーン分けもちゃんと把握してくれる

19. 19
Gumbo
 Webアプリ
 GUIで設計して、コードを吐き出す
 http://www.nerderer.com/Gumbo/

20. 20
教育分野でも使われはじめてる！
 熊本
 昨年度ゼミで試しに導入してみたところ他ゼミにも好評
で、情報コースのいくつかで本格導入することに！

21. 21
Coronaにおけるセンサー
使えるセンサー




heading (方位)
location (位置)
accelerometer (加速度)
gyroscope (ジャイロ)
使い方
 使用可能か調べる：system.hasEventSource()
 値を取得したときのリスナーを登録する：
Runtime:addEventListener()
 リスナーで値を使う（保存、表示、etc…）

22. 22
コード例
 system.hasEventSource(“heading”)でコンパスが使えるか確認する
 使えるならRuntime:addEventListener(“heading”, リスナー関数)で、方
位を取得した場合の処理を登録する
 これは方位が変化する度に呼び出される
 使えない場合の処理も必要です。（例では使えない旨を表記）

23. 23
build.settingsで許可
 androidでGPSを使うにはパーミッション（許可）設定が必要
 プロジェクトのフォルダにあるbuild.settingsに記述する
12/02/24
•
•
http://developer.anscamobile.com/content/configuring-projects#Application_Permissions_Android
build.settingsについて：
• http://developer.anscamobile.com/content/configuring-projects
Androidのパーミッション設定の項目について：
• http://developer.android.com/reference/android/Manifest.permission.html

24. 「シュベーレ・グスタフごっ
こ。」
24
 ナショジオのミリタリーアワー見ながら何造るか考えてたらこんなこと
になりました。
 ナチス・ドイツが誇るトンデモ兵器である80cm列車砲“シューベーレ・
グスタフ（Schwerer Gustav）”をシュミレートします。
 方角と発射角度をセンサーで決定して、飛距離と着弾地点を算出しま
す。
 兵器の威力と恐ろしさを伝えます。

25. 25
特長
 センサーを使いました
 使ったセンサー
 heading
 location
 accelerometer (所持してるAndroid端末がgyroscope非搭載だったので)
 使い方はAnscaのテンプレートやAPIレファレンスの例とほぼ同じで
す。
 マップを表示します
 Androidはネイティブのマップが呼び出せません（多様性があるた
め）
 native.showWebPopupでhtmlファイルを表示し、html側で
JavaScriptを使ってGoogle Mapを呼び出しています。
 GETメソッドで値は渡しています。
 CDNで他所にあるスクリプトを読み込んで使うのもOKです。
 GoogleにホスティングされているjQueryを使っています。

26. 26
デモ
 HTC EVOでデモします

27. 27
感想
 センサー類の実装はネイティブの開発環境よりシンプル
 何も考えなくてもだいたいは動く
 そして、だいたいはAnscaのサンプル書き換えでOK
 マップが呼べない等端末差異やサポートしてない機能も有るけ
れど、native.showWebPopup()でJavaScriptに仕事させれば何と
かなる
 センサー類は実機でないと試せないので、デバッグが少し面倒
 appMobi XDKみたいに本体傾きや位置のエミュレートが出来るとう
れしい…
 locationイベントの発生が遅いのはなんでだろう・・・
 50秒くらいかかる

28. 28
感想(2)
 Android端末の間でもセンサーのズレがありますね。個体差かし
ら。
 もともと精度は期待できないので仕方ないけど。

29. 付録: native.showWebPopup()を
使ったmap表示
29
 htmlを経由することで、Androidでも
iOSでも共通の実装でmapを表示できま
す。
 Google Static Map APIを表示していま
すが、ちゃんと組めば動かせるMapも出
せると思います(未検証
 表示用のHTMLはプロジェクトフォルダ
につっこんでます。
 jQueryが使えるので、だいたいの事はで
きます。
←グスタフごっこでは着弾地点の表示に使ってます

30. 30
やり方：Corona側




Anscaが公開してるnative.showWebPopupの利用例とほぼ同じ。
Map表示用に準備したHTMLファイルをWebPopupで開く。
表示したいマーカーの座標と、スクリーンサイズをGETメソッドで渡しています。
下が該当部分です（urlRequestListener等は省略してますが、Anscaのサンプル通りで
OK）

31. 31
やり方: HTML側
 metaタグをちゃんと指定する。
 スマートフォン用のviewpointの設定で良いです
 map表示用のエレメント(Static Mapの場合img)と、ローディング中の代
替表示用のエレメント、閉じるボタン用のエレメントを準備する
 Corona側で拾うために、閉じるボタンはformとsubmitで作ります。
 jQueryを読み込む
 他のライブラリでも良いですし、ネイティブ実装でも良いです
 JavaScriptでHTMLのロード時の処理を書く
 GETメソッドでパラメータを取得する
 map表示用のエレメントのサイズを、Corona側から渡した画面サイズを基に
調節する
 Google Static Map APIに投げるリクエストURLを組み立てて、map表示用の
imgエレメントのsrc属性に入れる
 画像のロード完了時にローディング表示を消してmapを表示する