まるぼ実験場

今年専門を卒業したけど就活サボってしまいました(関係ない職種でフリーター生活中)。どうすんだよこれ。

ウィルコムPHS用のゲームを自作した記録(3)

最初にサンプルを動作させてみる。

さて、開発の必須ツールであるj2meを起動するとこんな画面が表示されます。
f:id:kikyou_kiki:20180505211057p:plain
メニューとコンソールだけのシンプルな画面構成。コンソール部にエラー内容が出力されます。
では、プロジェクトを作成していきます

新規プロジェクトを作成

新規プロジェクト作成を押します。
f:id:kikyou_kiki:20180505211201p:plain
クラス名とクラス名を入力します。
f:id:kikyou_kiki:20180505211237p:plain
API設定では、
marubodiary.hateblo.jp
の項で確認した項目を設定していきます。
402KCの場合は、JTWI+CLDC1.1を選択し了解します。作成するプログラムや動作させる機種に合わせて他は設定します。(今回は特に弄らなくても実機動作します)
ここの設定を間違えると、パッケージされたファイルが実機でのインストール時に弾かれたりする現象が発生したりします。

作業フォルダをエクスプローラでさがす
f:id:kikyou_kiki:20180505212208p:plain
C\Users\(アカウントのユーザー名)\j2mewtk\2.5.2\apps\(プロジェクト名)に作業フォルダが作られるようです。
ここのフォルダsrc内にファイルを作成し編集していきます。
ここでは、公式サイトからダウンロードしたサンプルFontSample.javaを動作させます。
FontSample.javaとFontSampleCanvas.javaを作業フォルダにコピーし、エディタで編集します。*1
たとえば、クラス名がtestの場合このように変更。

FontSample.java 4~13行目

/** FontSample*/
public class test extends MIDlet { //ここのFontSampleを新規プロジェクト作成時設定したクラス名に変更
	static MIDlet midlet;

    /** コンストラクタ */
    public test() { //ここも同じく
		midlet =this;
        Display.getDisplay(this).setCurrent(new FontSampleCanvas());
    }

FontSampleCanvas.java 60~65行目

	public void commandAction(Command c, Displayable d) 
	{
		if (c == exit){
			test.midlet.notifyDestroyed(); //ここも同じく
		}
	}

編集が終わったら上書き保存してj2meに戻り、ビルド→エラーがなければ実行ボタンを押します。
f:id:kikyou_kiki:20180505215048p:plainf:id:kikyou_kiki:20180505215054p:plain
決定ボタンで(プロジェクト名)を選ぶと実行できます。

パッケージの作成

実機で動作させるためのパッケージを生成します。
f:id:kikyou_kiki:20180505220015p:plain
パッケージ化に成功したら、先ほどの作業フォルダ下、\bin内にjarとjadが生成されます。
f:id:kikyou_kiki:20180505220513p:plain
このjarかjadのどちらかを携帯端末に転送します。

Webページから転送する方法もありますが、今回はSDカードを使用します。
携帯上でフォーマットしたSDカードの、
(SDカードのドライブ):\PRIVATE\KYOCERA\DATA(402KCの場合。機種によって差異があるかも)
にjarかjadをコピーします。(USBマスストレージでも可)
f:id:kikyou_kiki:20180505222320j:plain
データフォルダ→microSDデータからコピーしたファイルを探す。
f:id:kikyou_kiki:20180505222331j:plainf:id:kikyou_kiki:20180505222348j:plain
インストールして起動する

プロジェクトの読み込み

j2meを起動し、プロジェクトを開く、を押すとこのような画面が出ます。
f:id:kikyou_kiki:20180506235358p:plain
プロジェクト名を選択し、プロジェクトを開く。
作業フォルダのファイルを開き、編集を再開します。

エミュや実機上で無事に新規プログラムを動作させる手順をつかめたら、あとはソースの編集→ビルド(エラーが出たらデバッグ)を繰り返してゲームを作ります。

ゲームに不可欠なグラフィックの利用方法をまとめます。

Canvasへの描画

サンプル、GraphicsSampleCanvas.javaが参考になります。
paintメソッド内
色指定方法

        g.setColor(255,255,255); //RGB指定

ラインの描画

        g.drawLine(10,30,50,30); //原点x,y、終点x,y

        //破線の描画
        g.setStrokeStyle(Graphics.DOTTED); //スタイルに破線を設定
        g.drawLine(60,30,100,30);                    //このdrawLineは破線が描画される
        g.setStrokeStyle(Graphics.SOLID);       //スタイルを戻す

四角形の描画

        g.drawRect(10,60,40,40);    //原点x,y、幅、高さ
        g.fillRect(60,60,40,40);        //四角形の塗り潰し

        g.fillRect(0,0,getWidth(),getHeight());        //背景の塗り潰し
        //getWidthとgetHeightで画面サイズを取得できるので、そのサイズで塗りつぶしている

        //角丸四角形の描画
        g.drawRoundRect(10,110,40,40,20,20); // 原点x,y、幅、高さ、弧の幅、弧の高さ
        g.fillRoundRect(60,110,40,40,20,20);        //角丸四角形の塗り潰し

円弧の描画

        g.drawArc(10,160,40,40,0,270); // 原点x,y、直径x,y、開始角度、弧の角度
        g.fillArc(60,160,40,40,0,270);        //円弧の塗り潰し
        // 角度の単位は度(degree)

三角形の描画

        //三角形の塗り潰し
        g.fillTriangle(10,250,35,210,60,250); //三角形の頂点をx,y3つ指定

javaアプレットのpaintを使用したことがあれば、同じような感覚で使用できるでしょう。

画像の利用

f:id:kikyou_kiki:20180504203610p:plain
画像を表示させるだけならばImageメソッドで十分可能ですが、ここではSpriteメソッドを使用して、画像を表示させていきます。
SpriteにはImageにはない便利な機能があるので、活用することによって画像容量&ファイル数削減に役立てることができます。
グラフィックや音楽などのリソースはプロジェクトフォルダのresフォルダに保存すること。

読み込み

Image im_title;
im_title = Image.createImage("/teruri.png");
Sprite title = new Sprite(im_title, 250, 250);

画像のフレーム指定

title.setFrame(0); //x=0-250,y=0-250の範囲をセット
title.setFrame(1); //x=250-500,y=0-250の範囲をセット
title.paint(g);       //(1)のみ描画される
title.setFrame(0); //x=0-250,y=0-250の範囲をセット
title.paint(g);       //(0)描画
title.setFrame(1); //x=250-500,y=0-250の範囲をセット
title.paint(g);       //(1)描画

Imageクラスで読み込んだ画像をSpriteに指定します。Spriteでは反転やフレームを指定できるのでアニメーションに便利。
一つの画像にまとめることによって読み込み回数を減らすことができ、その点でも有利(自分はそうしてないけれども
この機能を使用して、タイトル画面を表示させています。
 f:id:kikyou_kiki:20180504203501p:plain
タイトル画面は差分となっていて、順次重ねていくことによって変化をつけています。
f:id:kikyou_kiki:20180518002139p:plain
例えば、クリア1回目はこうなる 

画像の反転

f:id:kikyou_kiki:20180504203539p:plain
プレイヤーはこの画像を半分に分割したものを反転を利用して表示しています。

drawGamePlayerクラス

if(player.getdir() == 1){
	p.setTransform(2);
	p.setFrame(1);
}else if(player.getdir() == -1){
	p.setTransform(0);
	p.setFrame(1);
}else{
	p.setFrame(0);
}
/*
setTransform(0):そのままの画像。TRANS_NONE
setTransform(2):左右反転した画像。TRANS_MIRROR
*/

プレイヤーが移動している場合、移動方向を取得し、frame(1)を移動方向に応じて反転したものをセットしています。
詳しくは、リファレンスのSpriteの項に色々載ってます:Sprite (Unofficial 'CLDC 1.1 + MIDP 2.0' API Reference.)

音楽ファイルの使用方法について解説します

基本となりそうな部分について。

変数宣言

Player player=null;//プレイヤーの作成
String ss=null; //ファイル名

Player型変数playerを宣言

サウンドファイルの読み込み

try {
	InputStream in=getClass().getResourceAsStream(ss);
	player=Manager.createPlayer(in,"audio/midi");
}catch (Exception e) {
	e.printStackTrace();
}

再生

try{  
	player.start();
}catch (Exception e) {
	e.printStackTrace();
}

InputStreamでファイルを入力。
Manager.createPlayerでplayerにファイルを渡す。
player.start()やplayer.stop()で再生停止ができます。

SEの使用について 補足

f:id:kikyou_kiki:20180504165010p:plain
端末上でSEを使用するには、wav(量子化ビット数2/4bit サンプリング周波数8/16/32kHz)に変換する必要があるそうなのですが、自分が見つけた変換ソフトのほとんどがWindows10に対応していない模様?よくXP環境で挙げられているサウンドレコーダーも見つからない。
とりあえず仕方ないので現状のwavファイルのままで完成ビルドにいれています。WX402KCではSEが再生されないという状況ですが、もし他の機種で再生されたなどありましたら、情報提供していただけると幸いです。

*1:プロジェクト新規作成時、クラス名をFontSampleにしていた場合この作業は必要ない