読者です 読者をやめる 読者になる 読者になる

ぼんさいゲーム

RPGツクールMVでゲームを作ったりするブログ

RPGツクールMVで作ったアプリに「十字キー」を実装する方法(iPhone)スマホゲームアプリ必携!X-codeでの実装

RPGツクールMVからついに、スマホ向けにゲームを出力できるようになりましたね!
とはいえスマホ画面では文字が小さくて、コマンドがタップしにくい。
もっと操作しやすくできないかと考えてみました。

十字キー(バーチャルコントローラー)をつけよう

今回はX-codeを使って、iPhoneで「バーチャルコントローラー」を実装する簡単なプログラムを公開します。
(※注意:これはプラグインではありません。しいて言うならネイティブプラグインです)

なお、X-code等についての解説はしません。
Xcodeがインストールされていないと今回の記事は全く役に立ちません。)

1.iPhone向けにビルドしよう

この項目については支援しません。
公式ヘルプなどを見ていろんなソフトを入れて頑張ってビルドしてみてください。

2.Xcodeでビルドしてみよう

(1) Xcodeのプロジェクトファイルを開く

さて、cordovaで作成したプロジェクトのフォルダがありますね。
「config.xml」「hook」「platforms」「plugins」「www」が並んでいるフォルダです。
その中の、「platforms」の中の「ios」フォルダを開きましょう。
難しそうな変なファイルが並んでいますが、この中の「(プロジェクト名).xcodeproj」を開いてみてください。
(もし拡張子を表示するようにしていないのであれば、下の画像のアイコンのファイルですよ)
f:id:minamiju:20151122033412p:plain

(2) ビルドしてみる

開くと、Xcodeが立ち上がって何やら見たことのない画面が表示されますね。
さっそく左上の右向き三角(▶)ボタンを押してみましょう。あるいは「⌘R」です。
iPhoneシミュレータが立ち上がるはずです。

3.ソースコードを書き換えよう

まずはソースファイルを開きましょう。
f:id:minamiju:20151122034743p:plain

そして、以下のソースコードをそれぞれ指定の場所に加えます。

(1) 「#import "MainViewController.h"」の次の行
@interface MainViewController ()

@property (weak, nonatomic) IBOutlet UIButton* upButton;
@property (weak, nonatomic) IBOutlet UIButton* downButton;
@property (weak, nonatomic) IBOutlet UIButton* leftButton;
@property (weak, nonatomic) IBOutlet UIButton* rightButton;
@property (weak, nonatomic) IBOutlet UIButton* enterButton;
@property (weak, nonatomic) IBOutlet UIButton* escButton;
@property (weak, nonatomic) IBOutlet UIButton* shiftButton;

@end
(2) 「 // Do any additional setup after loading the view from its nib.」の次の行
#define ATTACH_BUTTON(BUTTON, KEYCODE)    if (BUTTON != nil) {\
        BUTTON.tag = KEYCODE;\
        [BUTTON addTarget:self action:@selector(OnKeyDown:) forControlEvents:UIControlEventTouchDown];\
        [BUTTON addTarget:self action:@selector(OnKeyUp:) forControlEvents:UIControlEventTouchUpInside];\
        [BUTTON addTarget:self action:@selector(OnKeyUp:) forControlEvents:UIControlEventTouchDragExit];\
    }

    ATTACH_BUTTON(self.upButton, 38);
    ATTACH_BUTTON(self.downButton, 40);
    ATTACH_BUTTON(self.leftButton, 37);
    ATTACH_BUTTON(self.rightButton, 39);
    ATTACH_BUTTON(self.enterButton, 13);
    ATTACH_BUTTON(self.escButton, 27);
    ATTACH_BUTTON(self.shiftButton, 16);

#undef ATTACH_BUTTON
(3) 「- (void)viewDidUnload」の前の行
-(void)OnKeyDown:(UIButton*)sender
{
    NSString* script = [NSString stringWithFormat:@"var event = document.createEvent('Event'); event.initEvent('keydown', true, true); event.keyCode = %d; document.dispatchEvent(event);", (int)sender.tag];
    [self.webView stringByEvaluatingJavaScriptFromString:script];
}

-(void)OnKeyUp:(UIButton*)sender
{
    NSString* script = [NSString stringWithFormat:@"var event = document.createEvent('Event'); event.initEvent('keyup', true, true); event.keyCode = %d; document.dispatchEvent(event);", (int)sender.tag];
    [self.webView stringByEvaluatingJavaScriptFromString:script];
}

4.ボタンを追加しましょう

さて、次はボタンを追加しましょう。

f:id:minamiju:20151122035644p:plain

MainViewController.xibというファイルを開き、右下のリストから「Button」を探しだし、
Buttonを画面の中にドラッグアンドドロップで追加します。
上下左右、決定ボタンにメニューボタン、必要ならShiftボタンの分も、置いちゃいましょう。
置いたボタンはダブルクリックで文字を変更できます。
(ボタンの色を変えたり、画像に変更したりするやり方は、、、独力でがんばってください!)
参考↓techacademy.jp

5.ボタンをリンクさせる

ボタンを押したらゲーム内のボタンが動くようにしましょう!
作ったボタンと、先ほど書き込んだソースコードを繋ぎます。

f:id:minamiju:20151122043258p:plain

追加したボタン全てで同じ作業をしましょう。

6.動作確認

これで作業は完了です。
再び、「▶」ボタンか⌘Rでアプリを実行してみましょう。

f:id:minamiju:20151122043524p:plain

こうなるはずです。
やらなければいけないことは、まだまだ沢山ありますけど頑張りましょう!

3~6について質問があれば、このブログ記事にコメント下さい。
できる範囲で回答します。

Xcode 5 完全攻略

Xcode 5 完全攻略