mieki256's diary

; hsp3dish でスプライトを表示してみるテスト

#include "hsp3dish.as"

    #packopt name "hsp3dish_sprite"
    #packopt type 0
    #packopt xsize 640
    #packopt ysize 480
    
    ; ウインドウID=0を初期化
    screen 0, 640, 480, screen_normal
    title "hsp3dish sprite test"
    sw = ginfo_sx
    sh = ginfo_sy

    ; スプライト初期化
    es_ini

    ; 画像読み込み。バッファID=3 に読み込んでる
    imgid = 3
    buffer imgid
    picload "player_64x64_512x256.png"

    ; スプライトサイズを指定
    ; w, h, 当たりサイズの割合(%)
    es_size 64, 64, 100

    n = 8
    repeat n
        ; キャラ画像定義
        ; キャラNo, x, y, (フレーム数), (バッファID)
        es_pat cnt, 64 * cnt, 0

        ; スプライトを登録
        ; スプライトNo, x, y, キャラNo
        es_set cnt, 0, 0, cnt
    loop

    ; 描画先を指定。ウインドウID=0 を指定してる。
    gsel 0

    ; redraw 0 を呼んだ時の画面クリア設定
    ; 0 or 1, 色指定($000000 - $ffffff)
    setcls CLSMODE_SOLID, $3070a0

    ang = 0.0

*mainloop
    ; ESCキーで終了
    stick key, $ff
    if key & $80 : goto *jobend
    
    redraw 0        ; 描画開始

    ; スプライトの表示位置を変更
    a = 20
    repeat n
        ra = double(ang + (a * cnt)) * M_PI / 180
        w = sw / 2
        h = sh / 2
        x = 0.8 * w * cos(ra) + w
        y = 0.8 * h * sin(ra) + h

        ; スプライトの座標を設定
        ; スプライトNo, x, y, (オプション)
        es_pos cnt, x - 32, y - 32
    loop
    
    es_draw         ; スプライトを描画
    
    redraw 1        ; 描画終了

    ang = ang + 0.5
    
    await (1000 / 60)   ; 処理待ち
    goto *mainloop

*jobend
    es_bye      ; スプライトシステム開放
    end

• hsp3dish を使いたい時は、最初のあたりで #include "hsp3dish.as" と書いておく。
• redraw 0 で描画開始、redraw 1 で描画終了。redraw 0 と redraw1 の間に描画処理を書く。
• 標準スプライトを使いたい時は、es_ini, es_size, es_pat, es_set, es_pos, es_draw 等を使う。

• Python 3.x の場合 : python -m http.server 8000
• Python 2.x の場合 : python -m SimpleHTTPServer 8000

; hsp3dish で celput を使って描画できるかテスト

#include "hsp3dish.as"

    #packopt name "celput_anime"
    #packopt type 0
    #packopt xsize 640
    #packopt ysize 480
    
    ; ウインドウID=0を初期化
    screen 0, 640, 480, screen_normal
    title "hsp3dish cellput test"
    
    sw = ginfo_sx
    sh = ginfo_sy

    ; スプライトシート画像を読み込み
    imgid = 3
    buffer imgid
    celload "player_64x64_512x256.png", imgid

    ; 画像を分割。
    ; 64 x 64 で分割して、基準座標を (32, 32) にしている
    celdiv imgid, 64, 64, 32, 32
    n = 19

    ; 描画先を指定。ウインドウID=0 を指定してる。
    gsel 0

    ; redraw 0 を呼んだ時の画面クリア設定
    ; 0 or 1, 色指定($000000 - $ffffff)
    setcls CLSMODE_SOLID, $4080c0
    
    an = 0.0

*mainloop
    ; ESCキーで終了
    stick key, $ff
    if key & $80 : goto *jobend

    redraw 0    ; 描画開始

    gmode 2     ; αチャンネル有効、半透明無効でコピーを指定

    x = sw / 2 - 32
    y = sh / 2 - 32
    imgnum = int(an) \ n
    
    ; celput で描画
    pos x, y
    celput imgid, imgnum

    redraw 1    ; 描画終了

    an = an + 0.2
    
    await (1000 / 60)
    goto *mainloop

*jobend:
    end

• celload で、画像を読み込み。
• celdiv で、読み込んだ画像を分割。
• pos x, y で表示位置を指定してから、celput で画像を描画。

; hsp3dish でスプライトを表示してアニメしてみるテスト

#include "hsp3dish.as"

    #packopt name "hsp3dish_sprite_anime"
    #packopt type 0
    #packopt xsize 640
    #packopt ysize 480
    
    ; ウインドウID=0を初期化
    screen 0, 640, 480, screen_normal
    title "hsp3dish sprite anime test"

    ; スプライト初期化
    es_ini

    ; キャラ画像読み込み
    imgid = 3
    buffer imgid
    picload "player_64x64_512x256.png"

    ; スプライトサイズを指定。w, h, 当たりサイズの割合(%)
    es_size 64, 64, 0

    ; キャラ画像定義。ここでは4キャラ分定義している
    ; フレーム数を指定すると、そのフレーム数が経過したら
    ; 次のキャラに表示が変わる。つまりアニメができる。
    ;
    ; es_pat キャラNo, x, y, (フレーム数), (バッファID)
    frm = 6
    es_pat 0, 64 * 0, 64, frm
    es_pat 1, 64 * 1, 64, frm
    es_pat 2, 64 * 2, 64, frm
    es_pat 3, 64 * 3, 64, frm

    ; スプライトアニメ設定
    ; キャラNo 3 を表示し終わったら、キャラNo 0 に戻るように指定
    es_link 3, 0

    ; キャラ画像定義は、以下のような書き方もできる
    ; ただし、キャラが横に並んでいること
    ; es_patanim キャラNo, 定義個数, x, y, (フレーム数), (バッファID)
    es_patanim 4, 4, 0, 64, frm
    es_link 7, 4

    ; スプライトを登録
    ; スプライトNo, x, y, キャラNo
    es_set 0, (64 * 1), 64, 0
    es_set 1, (64 * 3), 64, 4

    ; 描画先を指定。ウインドウID=0 を指定している。
    gsel 0

    ; redraw 0 を呼んだ時の画面クリア設定
    ; 0 or 1, 色指定($000000 - $ffffff)
    setcls CLSMODE_SOLID, $3070a0

*mainloop
    ; ESCキーで終了
    stick key, $ff
    if key & $80 : goto *jobend
    
    redraw 0        ; 描画開始
    
    es_draw         ; スプライトを描画
    
    redraw 1        ; 描画終了
    
    await (1000 / 60)   ; 処理待ち
    goto *mainloop

*jobend
    es_bye      ; スプライトシステム開放
    end

• 標準スプライトは、es_pat を使ってキャラNo.を定義できる。
• es_pat の後ろのほうには、フレーム数を指定できる。
• そのフレーム数が経過すると、次のキャラNo. に自動で移行してくれる。つまり、アニメを作れる。
• es_link を使うと、特定のキャラNo. が表示された後、任意のキャラNo.に移行するように設定できる。つまり、ループアニメを作れる。
• もし、キャラ画像が横並びの状態なら、es_patanim を使って一気にキャラNo.を定義することもできる。

オーバーラップとは、映像のトランジション手法のことです。

映像Aが徐々に消えて（フェードアウトして）、映像Bが徐々に現れる（フェードインする）トランジションのことを、オーバーラップと呼びます。

他の言い方としては「ディゾルブ（dissolve）」という言葉もあります。英語のdisolveを映像以外で使う場合「溶かす」という意味があるので、映像Aと映像Bが互いに溶けて混ざり合うイメージで覚えるといいかもしれません。

; hsp3dish の celput で背景画像のオーバーラップ切り替えをするテスト

#include "hsp3dish.as"

    #packopt name "celput_overlap"
    #packopt type 0
    #packopt xsize 1280
    #packopt ysize 720
    
    ; ウインドウID:0 初期化
    screen 0, 1280, 720, screen_normal
    title "celput overlap"

    ; 画像ファイル群を列挙
    sdim bgs, 256, 4
    bgs(0) = "black.png"
    bgs(1) = "bg_1280x720_0b.jpg"
    bgs(2) = "bg_1280x720_1b.jpg"
    bgs(3) = "bg_1280x720_2b.jpg"
    bgs(4) = "bg_1280x720_3b.jpg"
    bgmax = length(bgs)

    ; 画像読み込み
    bgid = 4
    repeat bgmax
        id = bgid + cnt
        celload bgs(cnt), id
    loop

    ; 描画先ウインドウIDを指定
    gsel 0
    
    step = 0
    bg_current = 0
    wait_frame = 60 * 3
    count = wait_frame

*mainloop
    ; ESCキーで終了
    stick key, $ff
    if key & $80 : goto *jobend

    redraw 0        ; 描画開始

    ; 現在、及び、次の描画元画像バッファIDを取得
    nowid = bgid + bg_idx
    newid = bgid + ((bg_idx + 1) \ bgmax)
    
    switch step
    case 0
        ; 通常描画
        gmode 2
        pos 0, 0
        celput nowid
        
        count = count + 1
        if count >= wait_frame {
            step = step + 1
            count = 0
        }
        swbreak
    case 1
        ; オーバーラップで描画
        count = count + 4
        if count >= 256 {
            ; 次の画像に切り替わった
            gmode 2
            pos 0, 0
            celput newid
            
            step = 0
            count = 0
            bg_idx = bg_idx + 1
            if bg_idx >= bgmax {
                bg_idx = 0
                count = wait_frame
            }
        } else {
            ; 切替中
            gmode 2
            pos 0, 0
            celput nowid

            ; 透明度を指定して描画
            gmode 3, , ,count
            pos 0, 0
            celput newid
        }
        swbreak
    swend
    
    redraw 1        ; 描画終了
    
    await (1000/60) ; 時間待ち
    goto *mainloop

*jobend
    end

• どうやって背景画像を描画したらいいのか悩んだけれど、とりあえず celload と celput を使えばなんとかなる模様。
• gmode 2 で、アルファチャンネルを反映させた描画を指定。
• gmode 3, , , xxx で、アルファチャンネルを反映させた半透明描画を指定。

• 文字列配列は、sdim 変数名, 最大文字数, 配列個数 で確保する。
• 変数名 = "a", "b", "c" という記述でもいいし、変数名(0) = "a"、変数名(1) = "b"、変数名(2) = "c" という記述でもいいらしい。
• 配列個数は length(変数名) で取得できる。

• スプライトシート画像を読み込んでアニメ表示できるか。
• 背景画像をオーバーラップさせて切替表示できるか。

picload "data/hoge.png"

picload "data\\hoge.png"

picload "hoge.png"

• ./hoge.png
• ./data/hoge.png