素人のウィルコム用Javaアプリ制作の記録です
このブログの目次

グラフィックの使用

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

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.)