Home>戻る

〜第六章 マップスクロール〜


2006/12/30 加筆修正しました。
たぶん、前に書かれた記事ではよく分からなかったと思います。
最近になって、考え方がまとまったのでそれに基づいてプログラムの変更をしました。

まずカメラという考えを設けました。
カメラは主人公と同じように座標パラメータを持っています。
float camera_px, camera_py;

そしてカメラは対象となるものを映します。
サンプルでのデフォルトの状態では主人公に焦点を合わせています。
Zキーを押せば城に焦点が合うようになります。

主人公のボールは世界のどこでもいけますが、カメラの行ける範囲は端の手前までです。

では考え方を図入りで説明します。

1.マップ全体図があります。全体図は画面内ではなくて、世界全体です。


2.主人公もいます。


3.カメラが配置されます。主人公と同じ位置にします。


4.カメラに映す範囲を設定します。
これは主人公から一定距離にします。


5.マップチップは4の範囲よりもちょっと外から描いていきます。
赤枠内に全て見えるように。


6.主人公はどこでも自由に動けますが、カメラは端や隅のほうには行けません。


考え方をまとめるとこうです。
『主人公をカメラが追っている。常に画面の中央に映るように。
でも、主人公が世界の端へ近づいたら、カメラは世界の端には行けないから、手前(端+画面半分の距離)で止まる。』


プログラムを作るにあたって、カメラ座標と主人公座標、マップ座標との関連が大事になります。
まず座標系を整理します。
カメラ座標や主人公座標、マップ座標というのはゲームの中の座標です。一番左上が(0,0)で一番右下は(640,480)まであります。
この座標を「ワールド座標」と呼ぶことにします。
対して、私たちユーザーがみてるのは画面です。画面の幅は320、高さは240です。
この場所を示す座標を「スクリーン座標」と呼ぶことにします。
そこで、ワールド座標からスクリーン座標へ変換する関数を作ることにします。
ここでカメラの位置って計算します。
// ワールド座標からスクリーン座標へ
int WorldToScreenX( float p ){
	return (int)(p - camera_px + 160);
}
int WorldToScreenY( float p ){
	return (int)(p - camera_py + 120);
}
以上がその座標変換関数です。X座標とY座標とに分けてしまいましたが、構造体やクラスを使って一まとめにしたほうがいいでしょう。
実際使う時は、以下のように使います。
//描画開始位置
float view_x;
float view_y;

//座標変換
view_x = WorldToScreenX( ball_px );
view_y = WorldToScreenY( ball_py );

//ボール描画
bufferg.drawImage(ball_image,(int)view_x,(int)view_y,this);
カメラの座標は主人公が動くごとに更新するようにします。(主人公の中心)
camera_px = ball_px + (CHIP_SIZE/2);
camera_py = ball_py + (CHIP_SIZE/2);
もしカメラを固定するなら、一定の値を入れるだけにします。(城の中心)
camera_px = 256 + (CHIP_SIZE/2);
camera_py = 128 + (CHIP_SIZE/2);
ではプログラムの公開です。


Rpg06.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
// RPG06 第六章 マップスクロール
// 2004/07/11

import java.awt.*;
import java.awt.event.*;
import java.applet.*;
import java.io.*;
import java.net.URL;

public class Rpg06 extends Applet implements Runnable,KeyListener{
   Image buffer;//イメージバッファ
   Graphics bufferg;//バックバッファ
   
   final int CHIP_SIZE=32;//チップサイズ

   float FrameTime;//1フレームあたりの時間(秒)
   long waitTime;//現在時刻保存用

   Image ball_image;//ボールイメージ
   float ball_px,ball_py;//ボール座標(ワールド座標)
   float camera_px, camera_py; // 2006/12/30 カメラ座標
   final int MAP_HANI = 12;// 2006/12/30 マップ範囲
   int camera_mode = 1; //カメラをどこに固定するか

   float ball_speed;//ボールの速度

   //キーの状態(離している=0、押し続けている=1、押した瞬間=2)
   int key_states[] = new int[5];//4方向(上=0,下=1,左=2,右=3)+Zキー=4

   //マップデータ
   int map_data[][] = new int[64][64];//64×64
   int map_width,map_height;//マップの横幅、高さ(チップ数)
   Image map_image;//マップチップ画像
   
   //セルテーブル
   MapCell celltbl[] = {
      new MapCell(0,0,false),//草原
      new MapCell(1,0,true),//芝生A
      new MapCell(2,0,true),//芝生B
      new MapCell(3,0,false),//家
      new MapCell(4,0,false),//木A

      new MapCell(5,0,true),//木B
      new MapCell(6,1,true),//城
      new MapCell(7,2,true),//海
      new MapCell(8,3,true),//塔の上
      new MapCell(9,4,true),//塔の下

      new MapCell(10,0,true),//洞窟
      new MapCell(11,0,true),//岩山
      new MapCell(12,5,true),//宇宙A
      new MapCell(13,5,true),//宇宙B
      new MapCell(14,5,true),//クリスタル
   };

   //初期化
   public void init(){
      Thread t;
      Dimension d = getSize();
      MediaTracker mediaT = new MediaTracker(this);

      //ボール画像ロード
      ball_image = getImage(getDocumentBase(),"chara13.gif");
      mediaT.addImage(ball_image,0);
      
      //マップチップ画像ロード
      map_image = getImage(getDocumentBase(),"map_chip.gif");
      mediaT.addImage(map_image,0);

      //ロード待ち
      try{
         mediaT.waitForAll();
      }catch(InterruptedException e){}

      //マップデータロード(20×15サイズ)
      readData("map00.dat",20,15);

      ball_speed = 128;//ボールの速度。1秒で128ドット。

      //ボールの初期座標(マップ上で4,6の位置)
      ball_px = 4*32;
      ball_py = 6*32;

      //現在時刻保存
      waitTime=System.currentTimeMillis();

      addKeyListener(this);//キー入力リスナー
      requestFocus();//フォーカス取得

      //スレッドを開始する
      t = new Thread(this);
      t.start();

      //バッファを作成する
      buffer = createImage(d.width,d.height);
   }


   //マップデータを読み込む
   private void readData(String filename,int max_x,int max_y){
      int i,x,y;
      InputStream is = null;

      map_width = max_x;
      map_height = max_y;

      try{
         is = new URL(getDocumentBase(),filename).openStream();

         x=y=0;
         while((i=is.read()) != -1){
            map_data[x][y]=i;
            if(++x == map_width){
               ++y;
               x=0;

               if(y==map_width)break; //終了条件
            }
         }
         is.close();
      }catch(IOException e){}
   }

   //実行
   public void run(){
      try{
         //ここがゲームループ
         while(true){
            //1フレーム時間計算(秒)
            FrameTime = ( System.currentTimeMillis()-waitTime ) /1000.0f;
            waitTime = System.currentTimeMillis();

            action();//処理
            repaint();//描画

            //ちょっと休憩(0.01秒)
            Thread.sleep(10);
         }
      }
      catch(Exception e){
      }
   }
   
   //描画更新
   public void update(Graphics g){
      paint(g);
   }

   //描画
   public void paint(Graphics g){
      int i,j,x,y;
      int cell_data,gra;

      //バッファのグラフィックコンテキストを取得する
      if(bufferg == null){
         bufferg = buffer.getGraphics();
      }
      
      //バッファを描画する
      Dimension d = getSize();
      bufferg.setColor(Color.white);
      bufferg.fillRect(0,0,d.width,d.height);

      //マップ描画
      DispMap( bufferg );

      //ボール描画
      DispMy(bufferg);

      //フォント
      bufferg.setColor(Color.black);
      bufferg.drawString("マップサイズ("+map_width+","+map_height+")。",10,20);
      bufferg.drawString("現在のワールド座標は(" +(int)ball_px+ "," +(int)ball_py+ ")。",10,40);
      bufferg.drawString("現在のカメラ座標は(" +(int)camera_px+ "," +(int)camera_py+ ")。",10,60);

      //ウインドウを更新する
      g.drawImage(buffer,0,0,this);
   }


   //---------------------マップ描画------------------------
   void DispMap(Graphics bufferg){
      int i,j,x,y;
      int cell_data,gra;
      Dimension d = getSize();
      int start_x;
      int start_y;
      int end_x;
      int end_y;
      int dsp_x,dsp_y;

      //マップデータの範囲(カメラからMAP_HANIチップ分)
      start_x = (int)camera_px/CHIP_SIZE - MAP_HANI;
      start_y = (int)camera_py/CHIP_SIZE - MAP_HANI;
      end_x = start_x + 2*MAP_HANI;
      end_y = start_y + 2*MAP_HANI;

      //描画位置IJ
      int disp_start_i,disp_i,disp_start_j,disp_j;
      disp_start_i = start_y;
      disp_start_j = start_x;

      //限界
      if(start_x < 0){start_x = 0;}
      if(start_y < 0){start_y = 0;}
      if(end_x > map_width){end_x = map_width;}
      if(end_y > map_height){end_y = map_height;}

      for(i=start_y,disp_i=disp_start_i; ;i++,disp_i++){
         //終了
         if(i == end_y){break;}
         for(j=start_x,disp_j=disp_start_j; ;j++,disp_j++){
            //終了
            if(j == end_x){break;}

            //セルデータ取得
            cell_data = map_data[j][i];

            //セルデータからマップグラフィックスを取得
            gra = celltbl[ cell_data ].gra;

            //マップ座標(ワールド座標)
            dsp_x = j*CHIP_SIZE;
            dsp_y = i*CHIP_SIZE;

            //座標変換
            dsp_x = WorldToScreenX( dsp_x );
            dsp_y = WorldToScreenY( dsp_y );

            //マップチップからグラフィックスの位置を取得
            x = (gra%16)*CHIP_SIZE;
            y = (gra/16)*CHIP_SIZE;

            bufferg.drawImage(map_image,dsp_x,dsp_y,dsp_x+CHIP_SIZE,dsp_y+CHIP_SIZE,x,y,x+CHIP_SIZE,y+CHIP_SIZE,this);
         }
      }
   }

   //--------------主人公描画------------------
   void DispMy(Graphics bufferg){
      Dimension d = getSize();

      //描画開始位置
      float view_x;
      float view_y;
   
      //座標変換
      view_x = WorldToScreenX( ball_px );
      view_y = WorldToScreenY( ball_py );

      //ボール描画
      bufferg.drawImage(ball_image,(int)view_x,(int)view_y,this);
   }

   // ワールド座標からスクリーン座標へ
   int WorldToScreenX( float p ){
      return (int)(p - camera_px + 160);
   }
   int WorldToScreenY( float p ){
      return (int)(p - camera_py + 120);
   }


   //処理
   public void action(){

      Dimension d = getSize();

      //移動処理

      //上
      if(key_states[0] == 1){
         ball_py -= FrameTime * ball_speed;
         //上端
         if(ball_py < 0){
            ball_py = 0;
         }
      }

      //下
      if(key_states[1] == 1){
         ball_py += FrameTime * ball_speed;
         //下端
         if(ball_py > map_height*CHIP_SIZE-CHIP_SIZE){
            ball_py = map_height*CHIP_SIZE-CHIP_SIZE;
         }
      }

      //左
      if(key_states[2] == 1){
         ball_px -= FrameTime * ball_speed;
         //左端
         if(ball_px < 0){
            ball_px = 0;
         }
      }

      //右
      if(key_states[3] == 1){
         ball_px += FrameTime * ball_speed;
         //右端
         if(ball_px > map_width*CHIP_SIZE-CHIP_SIZE){
            ball_px = map_width*CHIP_SIZE-CHIP_SIZE;
         }
      }

      // 2006/12/30 カメラ座標更新

      // mode1 主人公の中心
      if( camera_mode == 1 ){
         camera_px = ball_px + (CHIP_SIZE/2);
         camera_py = ball_py + (CHIP_SIZE/2);
      }
      // mode2 城
      else{
         camera_px = 256 + (CHIP_SIZE/2);
         camera_py = 128 + (CHIP_SIZE/2);
      }

      //限界値チェック
      if(camera_px < 160)camera_px = 160;
      if(camera_py < 120)camera_py = 120;
      if(camera_px > (map_width*CHIP_SIZE - 160) ){
         camera_px = (map_width*CHIP_SIZE - 160);
      }
      if(camera_py > (map_height*CHIP_SIZE - 120)){
         camera_py = (map_height*CHIP_SIZE - 120);
      }

      //Zキーを押した時
      if(key_states[4] == 2){
         camera_mode = 1 - camera_mode;
         //キーの状態を押し続けに変更。
         key_states[4] = 1;
      }
   }

   //キーが押された瞬間(使わない)
   public void keyTyped(KeyEvent e){}

   //キーを押している時
   public void keyPressed(KeyEvent e){
      int key;

      key=e.getKeyCode();

      switch(key){
      //上キー
      case KeyEvent.VK_UP:
         key_states[0] = 1;
         break;
      //下キー
      case KeyEvent.VK_DOWN:
         key_states[1] = 1;
         break;
      //左キー
      case KeyEvent.VK_LEFT:
         key_states[2] = 1;
         break;
      //右キー
      case KeyEvent.VK_RIGHT:
         key_states[3] = 1;
         break;
      //Zキー
      case KeyEvent.VK_Z:
         //最初に押した時に2を入れる
         if(key_states[4] == 0){
            key_states[4] = 2;
         }
         break;
      }
   }

   //キーが放された瞬間
   public void keyReleased(KeyEvent e){
      int key;

      key=e.getKeyCode();

      switch(key){
      //上キー
      case KeyEvent.VK_UP:
         key_states[0] = 0;
         break;
      //下キー
      case KeyEvent.VK_DOWN:
         key_states[1] = 0;
         break;
      //左キー
      case KeyEvent.VK_LEFT:
         key_states[2] = 0;
         break;
      //右キー
      case KeyEvent.VK_RIGHT:
         key_states[3] = 0;
         break;
      //Zキー
      case KeyEvent.VK_Z:
         key_states[4] = 0;
         break;
      }

   }
}

made by Cソース→HTML変換プログラム『道具箱』 ver12.1 はるキッチンソフト