ImageMap(Starプロファイル)

2010/6/18

動作

イメージマップを使い、RPG風の地図表示をする。
カーソルキーを操作して、地図を移動することができる。表示された地図の中心に「自分」がいる。

イメージマップのもと

イメージマップには「絵を描いたタイル」を並べるようなものだ。だから、「タイル」を用意しなければならない。 タイル1枚の大きさは48x48pixcelsとして、タイル30x30枚で地図全体とする。画面に表示するのは、「自分」を中心とした10x10枚の領域とする。 用意するタイルは花、芝、森、道、湖、家(大小)の8種類とする。
花 芝 森 道 湖 家 家 家

Eclipseでプログラムをつくる

プロジェクト作成、プログラム作成は「高レベルAPI・低レベルAPI」と同じ手順で行う。
  1. プロジェクト(ImgMap)を作る。HelloStarを参考にする。
  2. クラスを3つ、スクリプトファイル(run)を1つ作る。
    クラススーパークラスインタフェース
    Maincom.docomostar.StarApplicationなし
    MyCanvascom.docomostar.ui.Canvasなし
    MyPointjava.lang.Objectなし
    runjava.lang.Objectなし

    スクリプト用途
    runコンパイル,ADF作成,エミュレータ起動


  3. 3つのクラスとスクリプトファイルが用意できた。ここにプログラムを追記する。

    Main.java
    import com.docomostar.StarApplication;
import com.docomostar.ui.Display;


public class Main extends StarApplication {

	public void started(int arg0) {
		MyCanvas c=new MyCanvas();
		Display.setCurrent(c);
		while(!c.isExit()){
			
		}
		this.terminate();
	}

}

    MyCanvas.java
    import com.docomostar.media.MediaImage;
import com.docomostar.media.MediaManager;
import com.docomostar.ui.Canvas;
import com.docomostar.ui.Display;
import com.docomostar.ui.Font;
import com.docomostar.ui.Graphics;
import com.docomostar.ui.Image;
import com.docomostar.ui.ImageMap;


public class MyCanvas extends Canvas {
	Image images[]=new Image[9];//ImageMapに使うイメージデータ
	
	private boolean ExitFlag=false;
	private int[] mapdata;
	private ImageMap map;
	private String msg="OK";
	private MyPoint p=new MyPoint(9,19);
	String s[]=new String[9];//タイル説明
	
	public MyCanvas() {
		//地図データ	
		mapdata = new int[]{
				4,4,4,4,4, 4,4,4,4,4, 2,2,2,2,2, 2,2,2,2,2, 2,2,2,2,2, 2,2,2,2,2, //00
				4,4,4,4,4, 4,4,4,4,4, 2,2,2,2,2, 2,2,2,2,2, 2,2,2,2,2, 2,2,2,2,2, //01
				4,4,4,4,4, 4,4,4,4,4, 2,2,2,2,2, 2,2,2,2,2, 2,2,2,2,2, 2,2,2,2,2, //02
				4,4,4,4,4, 4,4,4,4,4, 2,2,2,2,2, 2,2,2,2,2, 2,2,2,2,2, 2,2,2,2,2, //03
				4,4,4,4,4, 4,4,4,4,4, 2,2,2,2,2, 2,2,2,2,2, 2,2,2,2,2, 2,2,2,2,2, //04

				4,4,4,4,4, 4,4,4,4,1, 1,1,1,1,1, 1,1,1,1,1, 1,1,2,2,2, 2,2,2,2,2, //05
				4,4,4,4,4, 4,4,4,4,1, 1,1,1,1,1, 1,1,1,1,1, 1,1,2,2,2, 2,2,2,2,2, //06
				4,4,4,4,4, 4,4,4,4,1, 1,1,1,1,3, 1,1,1,1,1, 1,1,1,1,2, 2,2,2,2,2, //07
				4,4,4,4,4, 4,4,4,4,1, 1,1,1,1,3, 1,1,1,1,1, 1,1,1,1,2, 2,2,2,2,2, //08
				4,4,4,4,4, 4,4,4,4,1, 1,1,1,1,3, 1,1,1,1,1, 1,1,1,1,1, 2,2,2,2,2, //09

				4,4,4,4,4, 4,4,4,1,1, 1,1,1,1,3, 1,1,1,1,1, 1,1,1,1,1, 2,2,2,2,2, //10
				4,4,4,4,4, 4,4,4,1,1, 1,1,1,1,3, 1,1,1,1,1, 1,1,1,1,1, 2,2,2,2,2, //11
				4,4,4,4,4, 4,4,4,1,1, 1,1,1,1,3, 1,1,1,1,1, 1,1,1,1,1, 2,2,2,2,2, //12
				4,4,4,4,4, 4,4,1,1,1, 1,1,1,1,3, 1,1,1,1,1, 1,1,1,1,1, 2,2,2,2,2, //13
				4,4,4,4,4, 4,4,1,1,1, 1,1,1,1,3, 1,1,1,1,1, 1,1,1,1,1, 2,2,2,2,2, //14

				4,4,4,4,4, 4,1,1,1,1, 1,1,1,1,3, 1,1,1,1,1, 1,1,1,1,1, 2,2,2,2,2, //15
				4,4,4,4,4, 4,1,1,1,1, 1,0,0,0,3, 3,3,3,3,3, 8,6,7,1,1, 2,2,2,2,2, //16
				4,4,4,4,4, 1,1,1,1,1, 1,0,0,0,3, 1,1,1,1,1, 1,1,1,1,1, 2,2,2,2,2, //17
				4,4,4,4,4, 1,1,1,1,1, 3,3,3,3,3, 3,3,3,3,3, 8,5,1,1,1, 2,2,2,2,2, //18
				4,4,4,4,4, 1,1,1,1,1, 1,0,0,0,3, 1,1,1,1,1, 1,1,1,1,1, 2,2,2,2,2, //19

				4,4,4,4,2, 1,1,1,1,1, 1,0,0,0,3, 3,3,3,3,3, 4,4,1,1,1, 2,2,2,2,2, //20
				4,4,4,4,2, 1,1,1,1,1, 1,1,1,1,3, 1,1,1,1,1, 4,4,1,1,1, 2,2,2,2,2, //21
				4,4,4,4,2, 1,1,1,1,1, 1,1,1,1,3, 1,1,1,1,1, 1,1,1,1,1, 2,2,2,2,2, //22
				4,4,4,4,2, 1,1,1,1,1, 1,1,1,1,1, 1,1,1,1,1, 1,1,1,1,2, 2,2,2,2,2, //23
				4,4,4,4,2, 1,1,1,1,1, 1,1,1,1,1, 1,1,1,1,1, 1,1,1,2,2, 2,2,2,2,2, //24

				4,4,4,4,2, 2,2,2,2,2, 2,2,2,2,2, 2,2,2,2,2, 2,2,2,2,2, 2,2,2,2,2, //25
				4,4,4,4,2, 2,2,2,2,2, 2,2,2,2,2, 2,2,2,2,2, 2,2,2,2,2, 2,2,2,2,2, //26
				4,4,4,4,2, 2,2,2,2,2, 2,2,2,2,2, 2,2,2,2,2, 2,2,2,2,2, 2,2,2,2,2, //27
				4,4,4,4,2, 2,2,2,2,2, 2,2,2,2,2, 2,2,2,2,2, 2,2,2,2,2, 2,2,2,2,2, //28
				4,4,4,4,2, 2,2,2,2,2, 2,2,2,2,2, 2,2,2,2,2, 2,2,2,2,2, 2,2,2,2,2, //29
		};
		//各セルに描くイメージを取得
			//イメージマップに使用するイメージの読み込み

		images[0]=loadImage("flower.gif");		s[0]="花";
		images[1]=loadImage("green.gif");		s[1]="芝";
		images[2]=loadImage("tree.gif");		s[2]="森";
		images[3]=loadImage("yellow.gif");		s[3]="道";
		images[4]=loadImage("water.gif");		s[4]="湖";
		images[5]=loadImage("house1.gif");		s[5]="家(小)";
		images[6]=loadImage("house2a.gif");	s[6]="家(大)";
		images[7]=loadImage("house2b.gif");	s[7]="家(大)";
		images[8]=loadImage("yellow.gif");		s[8]="入口";
		
		map=new ImageMap(48,48,30,30,mapdata,images);
		map.setWindow(0, 0, 10, 10);
		map.setWindowLocation(p.x, p.y);
		this.setSoftLabel(SOFT_KEY_2, "おしまい");
		this.setSoftLabel(SOFT_KEY_1, s[(mapdata[p.x+5+30*(p.y+5)])]);
		this.setSoftLabel(SOFT_KEY_3, Integer.toString(p.x)+","+Integer.toString(p.y));
	}


	public void paint(Graphics g) {
		g.lock();
		g.drawImageMap(map,0,0);
		g.setFont(Font.getFont(Font.STYLE_PLAIN, 12));
		g.setColor(Graphics.getColorOfName(Graphics.RED));
		g.drawString(Integer.toString(p.x)+","+Integer.toString(p.y)+","+s[(mapdata[p.x+5+30*(p.y+5)])], 0, 80);
		g.drawRect(5*48, 5*48, 48, 48);	
		g.unlock(true);
	}
	

	public void processEvent(int type, int param){
		if(type==Display.KEY_PRESSED_EVENT){
			switch(param){
			case Display.KEY_SOFT2 : ExitFlag=true;

			case Display.KEY_LEFT	: p.left()	;break;
			case Display.KEY_RIGHT	: p.right();break;
			case Display.KEY_UP		: p.up()	;break;
			case Display.KEY_DOWN	: p.down()	;break;
			}

			this.setSoftLabel(SOFT_KEY_1, s[(mapdata[p.x+5+30*(p.y+5)])]);
			this.setSoftLabel(SOFT_KEY_3, Integer.toString(p.x)+","+Integer.toString(p.y));
			map.setWindowLocation(p.x, p.y);
		this.repaint();
		}
	}
	
	public boolean isExit(){
		return ExitFlag;
	}

	
	//
	//  ファイルで指定したイメージを読み取る
	//
	Image loadImage(String fileName){
		MediaImage m = MediaManager.getImage("resource:///"+fileName);
		try{
			m.use();//使用前に有効化
		}catch(Exception e){
		}
		return m.getImage();
	}

}

    MyPoint.java
    public class MyPoint {

	public int x,y;
	
	 MyPoint(int x,int y){
		this.x=x;
		this.y=y;
	}

	 public boolean inarea(){
		return (0<=x)&&(x<20)&&(0<=y)&&(y<20);
	 }

	 public void right()	{ if(x<19)x++; }
	 public void left()	{ if(x> 0)x--; }
	 public void down()	{ if(y<19)y++; }
	 public void up()		{ if(y> 0)y--; }
	 
	 public String tostring(){
		 return Integer.toString(x)+","+Integer.toString(y);
	 }

}

    run
    #!/bin/bash
PROJECT=ImgMap
TARGET=Main
TARGET2=MyCanvas
TARGET3=MyPoint

JAM=$TARGET.jam
JAMUTF=$JAM.utf

cd  ~/workspace/$PROJECT/src/
rm -rf output

javac -g:none -target 1.1 -source 1.3 -bootclasspath ~/star/star.jar $TARGET.java
~/star/preverify1.1 -classpath ~/star/star.jar $TARGET

javac -g:none -target 1.1 -source 1.3 -bootclasspath ~/star/star.jar $TARGET2.java
~/star/preverify1.1 -classpath ~/star/star.jar $TARGET2

javac -g:none -target 1.1 -source 1.3 -bootclasspath ~/star/star.jar $TARGET3.java
~/star/preverify1.1 -classpath ~/star/star.jar $TARGET3

cd output
cp ../*gif ./
jar cMf $TARGET.jar $TARGET.class $TARGET2.class $TARGET3.class *gif

#datetime=`LANG=C date`
#time=`echo $datetime |awk -F ' ' '{print $4}'`

datetime=`LANG=C date`
time=`echo $datetime |awk -F ' ' '{print $4}'`

day=`echo $datetime |awk -F ' ' '{print $1}'`
dd=`echo $datetime |awk -F ' ' '{print $3}'`
mm=`echo $datetime |awk -F ' ' '{print $2}'`
yy=`echo $datetime |awk -F ' ' '{print $6}'`

appsize=`ls -la $TARGET.jar|awk -F ' ' '{print $5}'`

echo "LastModified = "$day, $dd $mm $yy $time > $JAMUTF
echo "AppType = FullApp" >> $JAMUTF
echo "AppClass = "$TARGET >> $JAMUTF
echo "AppName = "$PROJECT >> $JAMUTF
echo "PackageURL = "$TARGET.jar >> $JAMUTF
echo "AppSize = "$appsize >> $JAMUTF

nkf -s -Lw $JAMUTF > $JAM
rm -rf $JAMUTF

wine ~/.wine/drive_c/iDKSTAR1.0/bin/star.exe -i ~/workspace/$PROJECT/src/output/$JAM

  4. スクリプトを実行し、エミュレータで動作を確認する。
    chmod 755 ....は１回だけ実行する。
    chmod 755 ~/workspace/ImgMap/src/run
~/workspace/ImgMap/src/run
    このスクリプトは毎回コンパイルする。コンパイルを省略するときは、直接エミュレータを起動する。 
    wine ~/.wine/drive_c/iDKSTAR1.0/bin/star.exe -i ~/workspace/ImgMap/src/output/Main.jam
  5. スクリプトを実行し、エミュレータを起動する。
    カーソルキーで地図が移動する。
    画面中央の赤い正方形が「自分」のいる場所になる。本当に移動しているのは「自分」だが、「自分」が地図の中心となるように描画しているので、地図が移動する。画面左下(ソフトキー1,3)にタイルの種類と「自分」の位置を表示している。
    ImageMap

    ImageMap

[参考]iアプリ(star)でImageMapの利用
http://www.geocities.jp/inu_poti/makeiapp/star/image/imageMap.html