2014/02/10

【2014年度版】phonegapでアプリ化する その2(アンドロイド版)

【注意】この記事より新しいアプリ化の手順が公開されています。

Androidアプリ化手順 2015年版


前回までで、アンドロイドアプリ化に必要な開発環境を整えました。

まだの方は >>【2014年度版】phonegapでアプリ化する その1(アンドロイド版)を先に確認してください。


*先ほどの動作確認で作成したプロジェクトは削除しておいてください

プロジェクトフォルダの作成

好きな場所に、あなたのプロジェクトフォルダを作成します。
今回は、Dドライブ直下にmyprojectという名前で作成しておきます。



NodeJSのインストール

アプリ化にはNodeJSが必要です。
以下のURLより、NodeJSを取得してインストールしてください。

http://nodejs.org/




環境変数の設定

コントロールパネル → システム → システムの詳細設定 → 環境変数 を選択してください

以下ようにPATHにすべて追加します。


D:\adt-bundle-windows-x86_64-20131030\eclipse\plugins\org.apache.ant_1.8.3.v201301120609\bin\;D:\adt-bundle-windows-x86_64-20131030\sdk\platform-tools;D:\adt-bundle-windows-x86_64-20131030\sdk\tools; ;%JAVA_HOME%\bin


adt-bundle-windows-xxxxxxxxxxxx などの数字の部分はそれぞれ、環境によって異なるので、読み替えて適切に設定してください。

%JAVA_HOME%にはJDKを指定する必要があります。


index.htmlの編集

ゲームプロジェクトのindex.html の </body>タグの直前に以下のコードを追加してください

<script type="text/javascript" src="cordova.js" ></script>

PhoneGapのインストール

本記事の執筆時点での最新版はphonegap3.3 です。そのバージョンを元に記述していきます。

続いて、PhoneGapのインストールを行います。
最初に作成しておいたプロジェクトフォルダを開いて

[ファイル]=>[コマンドプロンプトで開く] を選択します。


すると、黒いコンソール画面が開いたかと思います。

そこで、以下のコマンドを順番に打ち込んでください。


npm install -g phonegap@3.3.0-0.19.6

*動作が不安定な場合があるので、バージョンを固定してインストールします。


phonegap create myapp
cd myapp
phonegap plugin add org.apache.cordova.media

以上を実行すると、myapp というフォルダができているかと思います。

その中のwwwというフォルダへティラノスクリプトのプロジェクト一式を上書きしてください。




もう一度コンソール画面に戻って

phonegap build android

と打ち込みましょう。


完了したら、次に再度Eclipse を開いてください

[File] → [Import]→ [Android] →[Existing Android Code Into Workspace]

そこから、新しく作成されたアンドロイド向けのプロジェクトがあるので、そのフォルダを選択します。




以上で、準備は完了です。
このプロジェクトをアンドロイドアプリケーションとして実行してください。




いかがでしょう。プレイ出来ましたね。

音を鳴らしたい場合は --useaudio オプションが必要です。
実機確認やアンドロイドマーケットのアップについてはまた後日。アディオス




【2014年度版】phonegapでアプリ化する その1(アンドロイド版)

【注意】この記事より新しいアプリ化の手順が公開されています。

Androidアプリ化手順 2015年版





ティラノスクリプトで作成したゲームをアンドロイドアプリ化する手順を説明します。

iphoneアプリ化についてはこちら

アンドロイドSDKとEclipseのインストール

以下のURLより、ダウンロードしてインストールしてください。



適当な場所へ回答してください。
今回はD:ドライブ直下に解凍したものとして、解説を続けます。


eclipse ディレクトリの下にあるeclipse.exe を実行してください。
以下のように、起動すれば問題ありません。

うまく起動できない場合は、Javaがインストールされていない可能性があります。
以下のURLよりJavaをインストールしてください。




プロジェクト作成

eclipse が起動したらアンドロイドアプリ用のプロジェクトを作成します
画面上部のメニューから[File] => [New] => [Android Application Project] を選択します。



続いて、プロジェクト名を決定します。ここではmyappという名前をつけて解説を進めます。
以下の画面のようにしてNextを押してください



あとは、適当に進めていって、Finishを押します。

これで、プロジェクトが作成されました。

アンドロイドエミュレーター起動確認

アンドロイドのエミュレーターが起動できるようにします。
画面上部の[Window]=>[Android Device Manager]を選択します。

開いた画面のリストに、AVDが表示されていれば大丈夫です。
存在しない場合はNewボタンをクリックして、適当なデバイスを追加してください。


さて、それでは準備が整いましたので、エミュレータを起動します。
画面左側のmyapp上で右クリックから、[Run As] =>[Android Application] を選択します



エミュレータが起動しましたね?




以上で、基本的な準備は完了です。
次回はいよいよ、ティラノスクリプトのゲームをアンドロイドアプリ化していきます。







【2014年度版】phonegapでアプリ化する (ios編)

警告!! この記事の内容は古いです。アプリ化する場合は以下の記事を参考にして下さい。



最新版 ティラノスクリプトのアプリ化
http://shikemokumk.hateblo.jp/entry/2016/03/15/111922



ティラノスクリプトで作成したゲームをアプリ化する方法を解説します。
専門的な知識は不要です。だれでもiphoneやipad 向けにアプリを作成することができます。

Androidアプリ化の手順はこちら

まず、iphoneアプリ化するのに、必要なものとして

Mac PC

が必要です。

はい。Windowsではiphoneアプリは作れません。MacBook等を手に入れよう。もしくは借りよう!

これさえあれば、後は以下の手順で作っていくだけです。
それでは、制作をはじめていきましょう。

Xcodeをインストール

まずは、Macに最新版のXcodeをインストールする必要があります。
Xcodeとは、Macでソフトウェア開発を行うためのソフトウェアです。
それでは、AppStoreを開いて、「xcode」と検索してください













無料ですので、手順にそってインストールを完了してください

phoneGapのインストール

次にPhoneGapというツールをインストールします。
以下のURLがphonegap の公式サイトになります。

http://phonegap.com/

執筆時点の最新バージョンはphonegap3.3ですので、そのバージョンを元に解説していきます。

phonegap を使用するには nodejs が必要です。
以下のサイトから入手してインストールしてください。

http://nodejs.org/




INSTALL ボタンをクリックしてパッケージをインストールしてください。
後は他のMacアプリと同様にインストールを完了してください。

続いて、アプリ化を実行していきます。
最初にデスクトップなどの適当な場所にフォルダをつくってください。
ここでは、iphoneという名前として説明していきます。

作成したフォルダをツールバーにある黒いアイコン(画像参考)にドラッグ&ドロップしてください。


真っ黒い画面が出てきたかと思います。



画面が出てきたら、以下のコマンドを順番に実行してください。
コピペで貼り付けて、エンターキーを押します。

(1)phonegap のインストール


sudo npm install -g phonegap

(2)アプリの作成(myappという名前で作っておきます)
phonegap create myapp com.myapp "myapp"
cd myapp
phonegap plugin add org.apache.cordova.media

次にティラノスクリプトのプロジェクトフォルダを用意してください。
以下の画像のように、先ほど作成してiphone/myapp以下のwwwというフォルダに
ティラノスクリプトのプロジェクト以下のファイルをすべて上書きしてください。



さて、ここまでくるとあと少しです。
もう一度コンソール画面(黒いウィンドウ)に戻ってください。

そこで
phonegap build ios

と打ちます。

すると、myapp/platforms/ios/myqpp.xcodeproj

というファイルが作成されていると思いますので、実行してください。
Xcodeが起動します。




あとは、画面左上部分から、再生する機種 (iphone Retina(3.5inch)) 等 を確認して再生ボタンを押してください。


さて、いかがでしょう。
以下のようにゲームが開始されましたね。



いかがでしょう。
アプリ化の準備は以上です。

ここから、実機での確認やAppStoreでの販売などについては
他の解説サイトがたくさんありますので、そちらでご確認願います。
(次回、このサイトでも追記します)

その他、小ワザとして

ゲームを縦、横に固定したい場合は


Deployment Info の部分を上記のようにすると
横固定のゲームになります。その他、時計や電池バーの表示制御なども可能になります。


さらに、昨今のスマートフォンでは画面サイズが一定ではありません。
そのため、作成したゲームのサイズによっては画面に黒い空きスペースができるかと思います。
縦横比を無視して画面いっぱいに拡大したい場合はティラノスクリプトのプロジェクトフォルダ system/Config.tjs の中にある


;ScreenRatio = fix;

の部分を fit に変更することで画面いっぱいに拡大できます。








2014/02/06

ティラノスクリプトVer2.93 をリリースしました。

 以下、主な更新内容です。

画面比率の調整機能追加
Config.tjs の ScreenRatio を調整することで画面サイズの比率を調整できるようになりました


・fix モード(デフォルト)
画面比率は常に固定されます。スマートフォンなどで見た場合は比率を崩さないで
表示できうる最大サイズに調整されます。ただし、画面サイズによっては空白部分ができます。

・fitモード
画面いっぱいに拡張されます。
スマートフォンなどで比率を気にせず、画面いっぱいに表示したい場合はこのモードを使用して下さい。


アンドロイドアプリ化した際に、一部環境で正常に音楽が再生されない不具合を調整。
phonegap 最新版3.3 に対応

バックログタグの追加 [showlog] 
kag.menu.displayLog() でも標準のバックログを表示します

キャラクター制御の機能拡張

キャラクターをオブジェクトとして扱えるようになりました。
例えば、最初に立ちキャラクターと表情を登録しておくと
表情を指定するだけで、キャラクターの立ち絵を変更することができるようになりました。

;表情の登録
[chara_face name="yuko" face="angry" storage="newface.png"]

;表情の適応
[chara_mod name="yuko" face="angry"]

;発言者の名前も同時にかえたい場合
[chara_ptext name="yuko" face="angry"]

;短縮して書けます。以下も同じ意味
#yuko:angry

;chara_new で登録した画像はdefaultという名前で指定可能
#yuko:default

以上です。
次回はメジャーアップデートを予定しています。