HSP3 プログラミングの基礎W
前へ 目次へ 次へ 

(8) 数字等画像表示

 基本的には「プログラミングの基礎V (2) 画像表示」と同じである。ゲームなどで得点を表示するとき、数字のフォントやサイズを設定して表示すればよいが、特殊な形の数字で表示したいこともある。このようなとき、これらの数字を画像で作成して表示することが考えられる。
 


 サンプルデータ suuji.bmp(80KB)

 数字画像の表示

 数字の画像を作成する。1つの数字は16×27ドット、背景色は黒色とし、0,1,2,…,8,9の順に配置する。画像のファイル名はsuuji.bmpとし、プログラムを保存するフォルダと同じ場所に保存する。

サンプル数字の画像を作成して表示する。

    buffer 1
    picload "suuji1.bmp"    ;数字画像読み込み
    size_x = 16             ;文字幅16ドット
    size_y = 27             ;文字高27ドット
    screen 0
    gmode 2, size_x, size_y    ;背景透過、コピーサイズ設定
    suu = 1    ;表示させる数字
    gcopy 1, suu * size_x, 0    ;描画
    stop

実行黒色で1が表示される。

試してみようgcopy命令の最後の0(Y座標)をsize_y, size_y*2, size_y*3, size_y*4に変えて実行する。

    gcopy 1, suu * size_x, size_y    ;描画

実行size_yで赤色、size_y*2で緑色、size_y*3で青色、size_y*4で7セグメント風の数字が表示される。

 1つ1つの数字は決められた大きさ(16×27)の長方形に納めてある。その長方形の左上角の座標からX方向に16ドット、Y方向に27ドットの範囲を数字として取り出す。
 x0, x1, …が各数字の左上角のX座標である。 
  x0 = 0 × 16
  x1 = 1 × 16
  x2 = 2 × 16
 計算式からわかるように、取り出したい数字に16を掛ければX座標が求められる。同じようにして、数字のグループはY座標を変えるだけである。

 

サンプル2けたの数字を数字画像で表示する。

    buffer 1
    picload "suuji1.bmp"
    size_x = 16
    size_y = 27
    screen 0
    gmode 2, size_x, size_y
    suu = 1
    gcopy 1, suu * size_x, 0
    suu = 2                     ;2けた目
    gcopy 1, suu * size_x, 0    ;描画
    stop

実行2だけしか表示されない。

 gcopy命令ではカレントポジションが変わらないので、1を描画した上から2が描画される。したがって、2だけしか表示されていないように見える。

試してみよう12と並べて表示する。

    buffer 1
    picload "suuji1.bmp"
    size_x = 16
    size_y = 27
    screen 0
    gmode 2, size_x, size_y
    pos 0, 0     ;描画位置設定
    suu = 1
    gcopy 1, suu * size_x, 0
    pos size_x, 0    ;描画位置設定
    suu = 2
    gcopy 1, suu * size_x, 0
    stop

実行12と表示される。

 さらにけた数があるとき、3けた目のX座標はsize_x*2、4けた目はsize_x*3…というように座標をずらしていけばよい。

 


画像表示命令(モジュール)作成

 指定した数字の文字列を画像で表示する命令image_printを作成する。
 この命令の動作(処理)に必要なデータは、@数字の画像ファイル名、A数字1つのサイズ、B描画する数字の文字列、C描画する座標である。
 ここで、@のファイル名は画像ファイルを読み込むときに、Aのサイズも変数に設定するときに、それぞれ一度だけ処理をしておけばよい。
 したがって、@Aのデータを受け取って初期化する命令image_initを別に作成する。そして、命令image_printはBCのデータを受け取って描画するだけにする。

サンプル命令image_initとimage_printを作成する。

#deffunc image_init int buf, str fname, int x, int y
;
;image_init  ウィンドウID,画像ファイル名,サイズX,サイズY
; ウィンドウID=int ウィンドウID
; 画像ファイル名=str  ファイル名
;  サイズX,サイズY=int 数字1つ分の大きさ(ドット単位)
;
    buf_num = buf   ;ウィンドウIDの設定
    size_x = x      ;サイズの設定
    size_y = y      ;サイズの設定
    buffer buf      ;buf番のウィンドウを初期化
    picload fname   ;画像ファイルの読み込み
    return

 画像ファイルを読み込むウィンドウは、いつも1番とは限らないので、変更できるようにパラメータを追加した。
 変数size_x, size_y及びbuf_numは数字1つ分のサイズとウィンドウIDが格納されているので、プログラムの中で変更しないように注意する。

#deffunc image_print str num, int xx, int yy
;
;image_print 数字文字列,座標X,座標Y
; 数字文字列=str  数字の文字列
; 座標X,座標Y=int  描画開始位置
;

    gmode 2, size_x, size_y    ;透過モードとgcopyでコピーするサイズの設定
    color 200, 200, 200     ;実際にはcolor 0,0,0とする。
    boxf xx, yy, xx + strlen(num) * size_x, yy + size_y  ;消去(数字部分だけ)
    pos xx, yy        ;描画位置の設定
    repeat strlen(num)
        suuji = num    ;パラメータnumを変数に格納
        n1 = int(strmid(suuji, cnt, 1))    ;cnt番目の1文字を整数で取り出す
        pos cnt * size_x + xx              ;1文字ずつの描画開始位置Xの設定
        gcopy buf_num, n1 * size_x, 0      ;描画
    loop
    return

 変数size_x, size_y及びbuf_numの値はimage_init命令の中で設定したものを使って(参照して)いる。
 この2つの命令のプログラムを#module〜#globalではさめば完成である。
 次に、この2つの命令を使ったサンプルプログラムを作成する。

#module
#deffunc image_init int buf, str fname, int x, int y
;
;image_init  ウィンドウID,画像ファイル名,サイズX,サイズY
; ウィンドウID=int ウィンドウID
; 画像ファイル名=str  ファイル名
;  サイズX,サイズY=int 数字1つ分の大きさ(ドット単位)
;

    buf_num = buf   ;ウィンドウIDの設定
    size_x = x      ;サイズの設定
    size_y = y      ;サイズの設定
    buffer buf_num  ;buf_num番のウィンドウを初期化
    picload fname   ;画像ファイルの読み込み
    return
#deffunc image_print str num, int xx, int yy
;
;image_print 数字文字列,座標X,座標Y
; 数字文字列=str  数字の文字列
; 座標X,座標Y=int  描画開始位置
;

    gmode 2, size_x, size_y    ;透過モードとgcopyでコピーするサイズの設定
    color 200, 200, 200     ;実際にはcolor 0,0,0とする。
    boxf xx, yy, xx + strlen(num) * size_x, yy + size_y  ;消去(数字部分だけ)
    pos xx, yy        ;描画位置の設定
    repeat strlen(num)
        suuji = num    ;パラメータnumを変数に格納
        n1 = int(strmid(suuji, cnt, 1))    ;cnt番目の1文字を整数で取り出す
        pos cnt * size_x + xx              ;1文字ずつの描画開始位置Xの設定
        gcopy buf_num, n1 * size_x, 0      ;描画
    loop
    return
#global
;メイン(命令を使ったサンプル)
    image_init 1, "suuji1.bmp", 16, 27    ;数字画像の初期化
    screen 0, 640, 480

    suuji = 3
    image_print "00" + suuji, 100, 100    ;数字描画
    wait 100
    suuji = 2
    image_print "00" + suuji, 100, 100    ;数字描画
    wait 100
    suuji = 1
    image_print "00" + suuji, 100, 100    ;数字描画
    wait 100

    tt = 0
    repeat
        suuji = "00000"+tt           ;数字の先頭に0を付ける
        suuji = strmid(suuji, -1, 6) ;数字を6けたに整形する
        image_print suuji, 100, 100    ;数字描画
        tt += 1    ;tt = tt + 1
        wait 50
    loop
    stop

実行3, 2, 1とカウントダウンの後、6けたの数字が0.5秒間隔でカウントアップする。

 画像データを変えれば数字以外のデータも描画させることができる。

 

前へ 目次へ 次へ 
2006  © Hiroshi Masuda 

 

 

inserted by FC2 system