mieki256's diary

まずは Hello World。

_01_hello_hsp3dish.hsp

    ; hsp3dish hello world

    #include "hsp3dish.as"          ; use hsp3dish

    #packopt name   "01_hello_hsp3dish"
    #packopt type   0
    
    #define KB_ESC      $00080
    
    ; set font
    font "Tahoma", 32, font_bold
    
*mainloop
    stick k, 0                      ; check keyboard
    if k & KB_ESC : goto *job_end   ; ESC key to exit
    
    redraw 0            ; draw start
    
    color 0, 100, 200
    boxf                ; clear screen
    
    ; draw text
    color 255, 255, 255
    pos 10, 10
    mes "Hello World"
    
    redraw 1            ; draw end. screen refresh.
    
    await (1000 / 60)   ; wait 1/60 sec
    ;await 12
    
    goto *mainloop
    
*job_end
    end

以下のような感じになった。

• hsp3dish を使う時は、最初のほうに #include "hsp3dish.as" を書く。
• HSPの標準機能では複数の表示ウインドウを持つことが可能だけど、hsp3dish の利用時は、実際に表示できるウインドウとしてウインドウID 0 の1枚のみを持つ。らしい。
• 描画を開始する前に redraw 0 を呼び、描画が終わったら redraw 1 を呼ぶ。そうすることでウインドウに描画内容が反映される。

画像を描画してみる。せっかくだから、ファンタジーコンソール TIC-80 起動時の初期サンプルと同様に、カーソルキーで画像を移動できるようにしてみた。

_02_hello_hsp3dish_with_image.hsp

    ; hsp3dish hello world. display image.

    #include "hsp3dish.as"  ; use hsp3dish
    
    #packopt name   "02_hello_hsp3dish_with_image"
    #packopt type 0 ; generate ".exe"

    #pack "chara.png"
    
    #define KB_ESC      $00080
    #define KB_LEFT     $00001
    #define KB_UP       $00002
    #define KB_RIGHT    $00004
    #define KB_DOWN     $00008
    #define KB_CURSOR   (KB_LEFT | KB_UP | KB_RIGHT | KB_DOWN)
    
    title "Hello world - hsp3dish"  ; set window title
    
    ; set window size
    ; hsp3dish は表示ウインドウとしてウインドウID 0しか使えない点に注意
    screen 0, 800, 600, 0
    
    ; load image
    #define IMGID   3
    celload "chara.png", IMGID
    celdiv IMGID, 16, 16, 8, 8  ; 16x16ドットで分割して管理。基準点は(8,8)に

    ; set font kind
    font "Tahoma", 24, 1

    ; get window size
    wdwx = ginfo_winx
    wdwy = ginfo_winy
    
    x = wdwx / 2
    y = wdwy / 2
    i = 0
    count = 0
    
; ----------------------------------------
*mainloop
    stick k, KB_CURSOR              ; check keyboard
    if k & KB_ESC : goto *job_end   ; ESC key to exit
    
    ; cursor key to move
    spd = 4
    if k & KB_LEFT  : x -= spd
    if k & KB_RIGHT : x += spd
    if k & KB_UP    : y -= spd
    if k & KB_DOWN  : y += spd
    
    redraw 0                ; draw start
    
    ; clear screen
    color 0, 100, 200
    boxf
    
    gfilter FILTER_NONE
    ; gfilter FILTER_LINEAR
    ; gfilter FILTER_LINEAR2

    ; draw image
    gmode gmode_rgb0, IMGW, IMGH
    pos x, y
    idx = (count / 15) & 1
    scale = 6.0
    angle = 0.0
    celput IMGID, idx, scale, scale, angle

    ; draw text
    color 255, 255, 255
    pos 10, 10
    mes "Hello World - hsp3dish, Push cursor key"
    
    redraw 1                ; draw end. screen refresh.
    
    await (1000 / 60)       ; wait 1/60 sec
    ;await 12
    
    count++
    goto *mainloop
    
*job_end
    end

使用画像は以下。

_chara.png


以下のような感じになった。

• screen命令でウインドウサイズを変更できる。この機能については、HSP 3.6 から対応、とドキュメントに書いてあった。以前のバージョンでは別ファイルでウインドウサイズを指定して、そのサイズに固定しておかないといけなかったらしい。
• screen命令等、ウインドウの初期化をする命令を呼ぶと、それまで読み込んでいた画像等は消滅するらしい。ウインドウの初期化が終わってから画像を読み込むこと。
• 画像を読み込む命令として picload 等も使えるらしいけど、今回は celload を使ってみた。celload, celdiv, celput を使うと、読み込んだ画像を指定サイズで分割して、n番目の領域を拡大縮小回転しながら描画することができる。
• celput は、等倍表示の時は gcopy、等倍表示ではない時は grotate 相当の描画をする命令なのだとか。

この時点で、ちょっと気づいたことがある。

問題その1。文字を描画するとゴミが出る。上記のスクリーンショットでは、「-」の右下に変なドットが出ている。

問題その2。画像の周囲に1ドットのゴミが出る。必ずいつでも出るわけではなく、拡大描画をした際に、拡大率によっては出たり出なかったりするらしい。

もしかすると、どちらの問題も、隣のドットまで拾ってきて描画しちゃってるのかもしれない。

_celputの拡大縮小回転表示 - HSP Dishでスマホのゲームを制作、販売してニート脱出を試みる
_hsp3dishのcelputで、表示倍率マイナス指定時に１ドットずれる - HSPTV!掲示板
_celputの動作について - HSPTV!掲示板
_hsp3dishにおけるgfilter 1での拡大時の輪郭のノイズ - HSPTV!掲示板

回避策としては…。あらかじめ画像側で、描画したい領域の周辺を1〜2ドットほど透明にしておく、とか。ただ、タイルBGのようにギッシリ詰まってる系の画像では、そういうことはできないよな…。

せっかく celput で描画したので、拡大縮小描画を試してみる。

_celput_zoom.hsp

    ; hsp3dish + celput で拡大縮小描画を試す
    ;
    ; Windows10 x64 22H2 + HSP 3.7beta7

    ; 次の行をコメントアウトすれば hsp3dish を使わずに描画
    #define HSP3DISH_ENABLE
    
#ifdef HSP3DISH_ENABLE
    #include "hsp3dish.as"
#endif

    #packopt name "celput_zoom"
    #packopt type 0
    #packopt xsize 1024
    #packopt ysize 768
    
    #define TEX_FILE    "texa.png"
    #pack   TEX_FILE
    
    #define KB_ESC  $000080
    
    ; init window ID 0
    screen 0, 1024, 768, 0
    title "cellput zoom test - hsp3dish"
    
    wdw_w = ginfo_winx
    wdw_h = ginfo_winy

    ; load image
    imgid = 3
    celload TEX_FILE, imgid

    ; 512x512 で画像を分割。基準点は(256, 512)
    celdiv imgid, 512, 512, 256, 512

    ; 描画先を指定。ウインドウID=0 を指定
    gsel 0, 1

#ifdef HSP3DISH_ENABLE
    ; redraw 0 を呼んだ時の画面クリア設定
    ; 0 or 1, 色指定($000000 - $ffffff)
    setcls CLSMODE_SOLID, $4080c0
#endif
    
    scale = 0.1
    idx = 0

*mainloop
    ; ESC key to exit
    stick key, 0
    if key & KB_ESC : goto *jobend

    redraw 0            ; draw start
    gmode gmode_rgb0    ; αチャンネル有効、半透明無効でコピーを指定
    
#ifndef HSP3DISH_ENABLE
    ; clear screen
    color 64, 128, 192
    boxf
#endif

    x = int(double(wdw_w) * 0.25)
    y = int(double(wdw_h) * 0.90)
    
    ; draw image by crlput
    pos x, y
    celput imgid, idx, scale, scale, 0.0
    
    ; draw text
    color 255, 255, 255
    pos 10, 10
    mes "scale = " + scale

    redraw 1            ; draw end. screen refersh

    scale += 0.01
    if scale >= 8.0 {
        scale = 0.1
        idx = (idx + 1) \ 4
    }
    
    await (1000 / 60)
    goto *mainloop

*jobend:
    end

使用画像は以下。

_texa.png


せっかくだから、hsp3dish + celput と、HSP標準機能の celput で結果を比較してみたところ、ちょっと興味深い結果になった。動画でキャプチャしてみたけれど、前半が hsp3dish + celput、後半(01:00-)が HSP標準の celput。HSP 3.7 beta7 で動作確認。




hsp3dish + celput は、比較的滑らかに拡大表示されている。しかし、HSP標準の celput は、途中からプルプルと震え始めて、最後のあたりはもうガックンガックン状態…。

HSP標準の celput は、等倍表示は gcopy、等倍表示ではない場合は grotate を使っているという話なので、celput ではなく grotate を使ってもおそらくこんな感じの結果になるのだろうなと予想。

先日作成したスクリーンセーバで、見た目がプルプルしてしまう点について自分の書いた部分がバグってるのではないかと疑ったけど、grotate や gsquare を使うとそうなってしまうのは仕方ない、ということなのだろう…。たぶん。

hsp3dishでフルスクリーン表示をしてみたい。HSP 3.6 からはウインドウサイズをソース(スクリプト？)内から変更できるようになったとのことなので、そのあたりを試してみる。

HSP標準機能を使いつつ、フルスクリーン表示をするには、以下の考え方で実現できるらしい。

1. デスクトップのサイズを取得して、
2. bgscr で枠無しウインドウを指定、かつ、デスクトップサイズと同じにして、(0, 0) の位置に表示。

この方法を、hsp3dish でも使えるのかどうか…？

_fullscreen_hsp3dish.hsp

    ; hsp3dish + fullscreen test
    ;
    ; Windows10 x64 22H2 + HSP 3.7beta7
    
    #include "hsp3dish.as"
    #include "d3m.hsp"
    
    #packopt name "fullscreen_hsp3dish"
    #packopt type 0
    
    #define TEX_FILE    "texa2.png"
    #pack   TEX_FILE
    
    #define KB_ESC  $000080
    #define FRAMERATE   60
    
    ; get desktop size
    dispx = ginfo_dispx
    dispy = ginfo_dispy
    
    ; initialize window without frame
    bgscr 0, dispx, dispy, 0
    
    ; load image
    imgid = 3
    celload TEX_FILE, imgid

    ; split image, set orign.
    celdiv imgid, 512, 512, 256, 256

    ; Set the buffer to draw from. Windows ID 0
    gsel 0, 1
    
    ; Set screen clear color to be performed when redraw 0 is called.
    ; 0 or 1, color ($000000 - $ffffff)
    setcls CLSMODE_SOLID, $4080c0
    
    font "Tahoma", 24, 1
    
    angle = 0.0
    
    time_start = d3timer()
    
*mainloop
    ; ESC key to exit
    stick key, 0
    if key & KB_ESC : goto *jobend
    
    tm = d3timer() - time_start
    fps = d3getfps()
    
    angle += 0.5
    
    redraw 0            ; draw start
    
    ; clear screen
    ; color 64, 128, 192
    ; boxf
    
    objmax = 64
    repeat objmax
        r = double(dispy) * 0.5
        a = angle + (270.0 / double(objmax)) * double(cnt)
        x = int(r * cos(deg2rad(a))) + (dispx / 2)
        y = int(r * sin(deg2rad(a))) + (dispy / 2)
        d = double(cnt) / double(objmax)
        
        ; draw image by crlput
        gmode gmode_rgb0    ; alpha channel enabled. Semi transparency disabled.
        pos x, y
        
        scale = 8.0 - (7.5 * d)
        idx = (cnt \ 4)
        rot = deg2rad(angle * 2.0 + 360.0 * d)
        celput imgid, idx, scale, scale, rot
    loop

    color 255, 255, 255
    pos 10, 10
    mes strf("[%dx%d] %d/%dFPS", dispx, dispy, fps, FRAMERATE)
    
    redraw 1            ; draw end. screen refersh
    
    await (1000 / FRAMERATE)
    ; await 12
    goto *mainloop
    
*jobend:
    end

使用画像は以下。

_texa2.png


実行したら以下のような感じになった。縮小してるので見辛いけど、雰囲気だけは伝わるかと。




一応、フルスクリーン表示ができているように見える。しかもこれだけの面積を描画しているのに60FPS出てる。素晴らしい。


ただ、「bgscrは使うべきじゃない」というやり取りも見かけてしまって…。

_HSP3dishでWindows用のフルスクリーンゲームを作るには？ - HSPTV!掲示板

bgscrはwindows版と非互換なのであまり使わない方がいいと思います。

HSP3dishでWindows用のフルスクリーンゲームを作るには？ - HSPTV!掲示板 より

何を言わんとしているのか、よく分からない…。非互換？ どういうこと？

「Linux や Android で bgscr を使ったスクリプトは違う動作になるかもしれないから色んな環境で動かすことを考えたら使わないほうが良い」という話なのだろうか？ でも、それはつまり、逆に考えれば、「Windows上で動かすことだけを念頭に置いているなら使っても良い」ということ…？ ただ、件のやり取りは、WindowsAPI を叩きまくってフルスクリーン表示を実現できるかどうか、という話のようで…。そもそも最初から「Windows上でやれるのか？」というお題だから、Linux や Android のことは考えなくてもいいのでは…。

上記のソレは2016年頃のやり取りだから、今はまた状況が違っているのだろうか？

doclib\history.txt を確認したところ、以下の記述があった。

2020/07/09 3.6 beta3
...
[HSP3Dish][Linux] bgscr,screen命令による表示サイズ変更、及びフルスクリーン化に対応
...

2020/01/14 3.6 beta2
...
[HSP3Dish][Windows] bgscr,screen命令による表示サイズ変更、及びフルスクリーン化に対応
...

2016年から4年後にこういった機能が盛り込まれたわけだから、現状の HSP 3.6 や HSP 3.7beta では bgscr でフルスクリーン表示できるよ、と捉えてしまってもいいのだろうか。実際動いてるようにも見えるし…。

TV版を見ていることが前提の作りなので、映画単体として成立してないのがなんだかもったいない印象も受けてしまったのだけど、考えてみたら、昨今はTV版で浸透させて映画で稼ぐのが一般的とも聞くので、こういうスタイルでも商売として見れば問題無いのだろうなと…。というか、これだけ凝った映像を作ったのだから、TVだの映画だの色んな場所で流せたほうがいいよなという気もする。

そもそも、どうして映画単体で成立させないといけないのか。そのあたり考えていくと、別にそうでなければいけないという理由もほとんどないのだよな…。

お客さんがたくさん入ってるということは、こういうスタイルがフツーに受け入れられてるという証拠でもあるし。映画は特別なモノだとすっかり思い込んでる人達が「こんなの映画じゃない」と言い出すだけの話で。映画とは何なのか、そのあたりの定義が各人で違うのだろうけど。公開スタイルとしての映画とか、ユーザ体験としての映画とか、映画の定義にも色々ありそうだなと。

映画の尺できっちり収まってるけど、映画館から出てきたお客さんの顔がお通夜状態になってる映画。TV版を見てないと話が分からんけど、映画館から出てきたお客さんが皆ハイテンションになってる映画。さてどっちが映画ですかと問われたら、ちょっと悩んでしまう。映画って、何だろう。

新規シーンを作って、ルートノードを作成する。

Godot Engine で2Dゲームを作る場合、「メインシーンのルートノードには Node を使え」という話をどこかで見かけた記憶があるのでソレに従う。

「その他のノード」を選択。



「Node」を選んで「作成」。



ルートノードとして Node が追加された。



分かりやすくするために、ノード名を「Main」に変更。

子ノードとして、プレイヤーキャラのシーンと、林檎や爆弾の発生シーンを追加する。

「シーンファイルをノードとしてインスタンスにします」ボタンをクリック。プラスマークの右にあるボタン。



子にするシーンを選ぶ。プレイヤーキャラのシーン、assets/Player.tscn を選択して「開く」。



同様に、林檎や爆弾の発生シーン、assets/ItemGenerator.tscn も選択して「開く」。



Mainノードの下に、Player と ItemGenerator がぶら下がっている構成にした。

シーンを保存。シーン → 名前を付けてシーンを保存、を選択。



Mainシーンは、res:// の直下に保存してしまっていい。メインシーンなので。

F6キーを押して実行してみる。


プレイヤーキャラが表示されて、林檎や爆弾も落ちてくる状態になった。ゲームっぽい画面になってきた。

前述の画面は一見するとゲームっぽい画面だけど、プレイヤー、林檎、爆弾は衝突判定の類をまだ何もしていないので、これでは全然ゲームになってない。そのあたりの処理を追加していく。

プレイヤーキャラは、アタリ範囲を持てるArea2Dノードを使っているけれど。Area2Dノードは、自分のアタリ範囲にRigidBody2D が入ってきた時に、「何かが自分に当たったよ」と教えてくれる、body_entered(body) シグナルを発行することができる。

つまり、Playerノードが持ってるシグナル、body_entered にメソッドを接続してやれば、「プレイヤーに林檎か爆弾が当たった時にメソッドを呼んで何か処理をする」という状態を作れる。

Playerノードを選択して、ノードタブを選択。body_entered(body:Node) を選んで、「接続」。



「メソッドにシグナルを接続」ウインドウが開くので、「Player」を選択して「接続」。受信側メソッド名はそのままでいい。



プレイヤーキャラのスクリプト、Player.gd の最後に、メソッド _on_Player_body_entered(body) が追加された。


このメソッドの中に、林檎や爆弾と当たった時の処理を書けばいい。

スクリプトを書く。


追加する内容は以下。

_Player.gd

func _on_Player_body_entered(body):
    if body.kind == "Apple":
        print("Apple")
        body.queue_free()  # kill Apple
    else:
        print("bomb")

body には、林檎か爆弾のどちらかのインスタンスが入ってくるので、それが林檎なのか爆弾なのかを判別しないといけないけれど…。

以前、林檎や爆弾のスクリプトを書いた際に、以下を記述してあるので…。

export var kind = "Apple"

export var kind = "bomb"

body.kind に "Apple" が入ってるのか、それとも "bomb" が入ってるのかを調べれば、林檎か爆弾なのかを判別できる。 *1

print("hoge") で、Godot Engine エディタ画面の出力ウインドウにメッセージを出力することができる。

また、林檎と衝突した場合、その林檎はもう不要なので、body.queue_free() を呼んで林檎を消去してやる。

衝突判定処理を書けたので、F6キーを押して実行してみる。


プレイヤーが林檎か爆弾と衝突するたびに、出力ウインドウにどちらに当たったかが出力された。ちゃんと衝突判定が動いている。後はこのメソッドの中で、林檎を取った時の処理や、爆弾に当たった時の処理を書いていけばいい。

今回作った Main.tscn を、このプロジェクトのメインシーンとして設定しておく。ファイル一覧ウインドウ内で、Main.tscn を右クリック。「メインシーンとして設定」を選ぶ。


これで、Godot Enigne を起動してプロジェクトを開いたときに、Main.tscn が開かれた状態になる。

さて、林檎や爆弾と当たる状態にはなったけど、当たった時に何かアクションが欲しい。例えば林檎をキャッチした時はスコアが増えてほしい…。次回はスコア表示等を担当するシーンを作りたい。

HUDシーンを新規作成。シーン → 新規シーンを選択。



Godot Engine は、スコアやタイトルなどを画面に表示する場合、CanvasLayerノードを使うことになっているらしい。「その他のノード」を選択。



「CanvasLayer」を選んで「作成」。



CanvasLayerノードがルートノードとして追加された。左上のプラスマークをクリックして子ノードを追加していく。



文字列表示を担当する Labelノードを2つ、ボタンを担当する Buttonノードを1つを、CanvasLayerの子ノードとして追加した。



分かりやすいように名前を変更しておく。

Hud (CanvasLayer)
    │
    ├─ Message (Label) : ゲームタイトルや「GAME OVER」の表示に使う。
    │
    ├─ Score (Label) : スコア表示を担当。
    │
    └─ StartButton (Button) : スタートボタンを担当。

シーンを保存。シーン → 名前を付けてシーンを保存、を選択。



res://assets/ の下に、Hud.tscn として保存する。

Messageノードにゲームタイトル名を表示させる。Messageノードを選択。



Textプロパティに、今回のゲームタイトル「NEWTOTOTONE」を入力。また、Align と Valign を Center にしておく。これで文字列が中央揃えで表示される。

「レイアウト」をクリックして「中央水平伸長」を選択。ある程度位置合わせをしてくれる。



小さい赤丸をドラッグして縦幅を調整。

これで表示文字列の指定とレイアウトはできたけど、文字が小さい。これでは読めない…。

ちゃんとした表示にするためには、フォントファイルが必要になる。Godot Engine はフォントファイルとして ttfファイルやotfファイルが使えるので、入手してインポートすればいい。

しかし、一般的にフォントファイルはライセンスが指定されていて、ものによってはゲームに同梱することが許されてなかったりする。

ここは比較的自由に使えるラインセンスのフォントを入手しないといけないわけだけど…。ありがたいことに、ドットコロンさんがいくつかのフォントファイルをCC0ライセンスで公開してくれているので、感謝しつつ使わせてもらうことにする。マジ助かります…。ありがたや…。

_ドットコロン
_Aileron | ドットコロン
_CC0について ― “いかなる権利も保有しない” | クリエイティブ・コモンズ・ジャパン
_CC0の日本語版が公開されました | 著作権のネタ帳

今回は Aileronフォントを使わせてもらうことにした。ダウンロードして解凍すると、中に otfファイルが入ってるので、今回は以下の2つを利用。

• Aileron-Black.otf
• Aileron-Bold.otf

エクスプローラ等からフォントファイルをGodot Engineのエディタ画面にドラッグアンドドロップ。これでフォントファイルがプロジェクトフォルダ内にコピーされる。



res://直下にコピーされてしまった。ドラッグして resourcesフォルダ内に移動。



resourcesフォルダ内に入った。

インポートしたフォントを利用する。Messageノードの Custom Fontsプロパティをクリックして、「空」の部分をクリック。「新規DynamicFont」を選択。



「DynamicFont」の部分をクリックして、「Font Data」の「空」の部分をクリック。「読込み」を選ぶ。



Aileron-Black.otf を選んで、「開く」。



フォントが適用された。見た目が変わっている。これなら読めそう。

フォントサイズその他を設定する。

• Custom Fonts → Font → Settings → Size を 96 に。文字の大きさが変わる。
• Custom Fonts → Font → Settings → Use Filter を有効に。文字が少し滑らかに表示される。
• Custom Colors → Font Color Shadow を有効に。フォントに影がつく。
• Custom Constants → Shadow Offset X, Y を 12 に。影の位置をずらせる。

これらの指定で、イイ感じの表示になってきた。

スコア表示の文字列と見た目を調整する。Scoreノードを選択。



Textプロパティに「SCORE: 0」と入力。



Messageノードと同様の手順でフォントを指定する。見た目がイイ感じになればOK。



表示位置を少し調整。Rect の Position や Size を変更してもいいし、GUIでキャンバス(?)上のノードをドラッグして位置調整してもいい。

スタートボタンの文字列と見た目を調整する。StartButtonノードを選択。



Text に「START」を入力。



フォントやフォンサイズ等を指定。



位置やサイズを調整する。グリッドスナップを有効にすれば作業がしやすくなる。



それらしい位置に配置できた。



F6キーを押して実行してみる。


それっぽい表示になった。

次回はこのHUDシーンにスクリプトを追加して、スコア表示の更新や、スタートボタンを押したときの処理を追加していく。

Hudノードを選んでおいて、右上のスクリプトをアタッチするボタンをクリック。



res://scripts/ 以下に Hud.gd というファイル名でスクリプトファイルを作成。



スクリプトを記述するエディタ画面が開かれた。

スタートボタンが押された時に、ゲーム開始処理を行わないといけない。そのあたりの処理を行うメソッドを用意する。

StartButtonノードを選択。



Buttonノードがマウスクリックされると、pressed() というシグナルが発行される。このシグナルにメソッドを接続する。ノードタブをクリックして、pressed() を選択して「接続」。



Hudノードを選択して「接続」。



Hud.gd 内に _on_StartButton_pressed() というメソッドが用意された。このメソッドの中にスタートボタンが押されたときに必要な処理を書いていけばいい。

Hud.gd にスクリプトを記述していく。


記述内容は以下。

_Hud.gd

extends CanvasLayer

signal new_game

func _ready():
    pass # Replace with function body.

#func _process(delta):
#   pass

func _on_StartButton_pressed():
    $Message.hide()
    $StartButton.hide()
    emit_signal("new_game")

func update_score(score):
    $Score.text = "SCORE: " + str(score)

func show_message(text):
    $Message.text = text
    $Message.show()
    
func hide_message():
    $Message.hide()

func show_startbutton():
    $StartButton.show()

内容を簡単に説明すると…。

• _on_StartButton_pressed() : スタートボタンが押されたときの処理。
• update_score(score) : スコア表示更新処理。score には整数が入ってくる。
• show_message(text) : ゲームタイトルや「GAME OVER」等のメッセージ(?)を表示する。text には文字列が入ってくる。
• hide_messsage() : メッセージ表示を隠す。
• show_startbutton() : スタートボタンを表示する。

• $ノード名.show() で、そのノードを表示状態にできる。
• $ノード名.hide() で、そのノードを非表示状態にできる。

• signal new_game で、カスタムシグナルを作っている。
• emit_signal("new_game") でカスタムシグナルを発行。

カスタムシグナルについては少し説明が必要かもしれない。各ノードはあらかじめ色々なシグナルを持っているけれど、スクリプトファイルの最初のあたりに「signal hoge」と書いておけば、hogeシグナルを新規に用意することができる。

この hogeシグナルに何かメソッドを接続しておいて、どこかで「emit_signal("hoge")」を呼んでhogeシグナルを発行してやれば、そのタイミングで接続されているメソッドが実行される。

今回は、スタートボタンが押されたタイミングで、メインシーンに対して「スタートボタンが押されたよ」と知らせてゲーム開始処理を行いたいので、new_game というカスタムシグナルを用意した。後々、この new_game シグナルに、Main.gd 内のメソッドを接続する予定。

スクリプトを書けたので、F6キーを押して実行してみる。


スタートボタンが押された時に _on_StartButton_pressed() が呼ばれるけれど、そこでは「MessageノードとStartButtonノードを非表示にせよ」と書いてあるので…。スタートボタンをクリックするとその2つのノードが画面内で非表示になった。ちゃんとスクリプトは動いてる。

次回は、このHudシーンをメインシーンに合体させる。

ソースは以下。

-- title:  game title
-- author: game developer
-- desc:   short description
-- script: lua

t=0
x=24
y=32
sy=0
PAL_ADDR=0x3FC0
SCR_OFST=0x3FF9

function TIC()
 local spd=2
 if btn(0) then y=y-spd end
 if btn(1) then y=y+spd end
 if btn(2) then x=x-spd end
 if btn(3) then x=x+spd end

 cls(0)
 map(0,0)
 spr(1+t%60//30*2,x,y,14,2,0,0,2,2)
 print("HELLO WORLD!",84,28)
 t=t+1
 sy=math.floor((136*0.7)+16*math.sin(math.rad(t)))

 -- reset palette 
 sync(1<<5)
end

function SCN(row)
 local dy=row-sy
 local rx,ry
 if dy<0 then
  rx=0
  ry=0
 else
  rx=1.5*math.cos(math.rad(4*t+55*dy))
  ry=-dy*2
 end
 poke(SCR_OFST,rx)
 poke(SCR_OFST+1,ry)
 
 if dy==0 then
  -- palette change
  for i=PAL_ADDR,PAL_ADDR+16*3-1 do
   poke(i,peek(i)*0.7)
  end
 end
end

今回は、水面部分が少し暗い色になるようにしてみたり。SCN() の中で、16色分のパレットを書き換えることで暗くしている。要は、 _メガドライブ版ソニックの水面処理 みたいな感じ。 *1

_RAM - nesbox/TIC-80 Wiki によると、パレット値は 0x3FC0 から 16色 x 3 Byte (RGB 24 bit) = 48byte として記録されている。その領域を _poke() で書き換えてやれば、走査線単位でパレット値を変化させることができる。 *2

ただ、パレット値を書き換えると、次回の描画時に、暗くなったパレット値のまま画面を描いてしまうので…。TIC()内の最後のあたりで sync(1<<5) を呼んでパレットをリセットしている。

_sync - nesbox/TIC-80 Wiki

sync() に、マスク情報を渡しながら呼ぶことで、画像領域、マップ、効果音、音楽、パレットを、new した直後の状態にリセットできるらしい。また、おそらく有償版の TIC-80 なら、sync() を使ってバンク切り替えもできる模様。

TIC() や SCN() の描画後に、別の何かを独立して描画できる OVR() については、実装された際に書かれた記事が参考になりそうだなと。

_Overlap mode - Issue #429 - nesbox/TIC-80
_TIC-80さんのツイート: "going to add new "overlap" mode to #TIC80 https://t.co/AaOOmN7HRd to create this kind of effects… "

上記記事のスクリーンショットの事例では、スクロールだけなら map() を複数呼ぶことでも実現できるけど。1ライン描画するたびにパレット値を書き換えて、BG相当を少しずつ暗くしてる・グラデーションにしているあたりがポイントかもしれないなと。もし OVR() が無かったら、自機も1ラインずつ暗くなってしまうはず。

_Releases - nesbox/TIC-80 の Changelog を眺めていたら、F6キーを押すとCRT(ブラウン管)っぽい表示ができると知った。


ホントだ…。それっぽい…。円形に歪ませつつ、 _シャドーマスク っぽいソレにしてるのかな…。

_アパーチャーグリル - Wikipedia
_スロットマスク - Wikipedia

まずは Ubuntu に golang をインストールしないと話にならない。以下でインストール。

sudo apt install golang

バージョンを確認。

$ go version
go version go1.6.2 linux/amd64

古いな…。まあ、いいか。

goのパッケージがインストールされる場所を作成。

mkdir ~/go

環境変数 GOPATH に、上記の場所を指定してやる。

vi ~/.bashrc

以下を追加。

export GOPATH=$HOME/go

~/.bashrc を再読み込み。

source ~/.bashrc

ただ、以下によると、比較的新しい版をインストールすることもできるらしい。

_Ubuntu - golang/go Wiki

Ubuntu 16.04 LTS なら、以下でイケる、と書いてある。試してみる。

sudo add-apt-repository ppa:longsleep/golang-backports
sudo apt-get update
sudo apt-get install golang-go

$ go version
go version go1.8.3 linux/amd64

Go 1.8 がインストールされた模様。最新版の Go 1.9.x ではないけれど、比較的新しい。

Ubuntu公式リポジトリに置いてあるSDL2関係のファイルをインストール。

sudo apt install libsdl2-dev libsdl2-image-dev libsdl2-mixer-dev libsdl2-net-dev libsdl2-ttf-dev libsdl2-gfx-dev

go get -v github.com/veandco/go-sdl2/sdl
go get -v github.com/veandco/go-sdl2/mix
go get -v github.com/veandco/go-sdl2/img
go get -v github.com/veandco/go-sdl2/ttf

何か言ってきた。

$ go get -v github.com/veandco/go-sdl2/sdl
github.com/veandco/go-sdl2 (download)
github.com/veandco/go-sdl2/sdl
# github.com/veandco/go-sdl2/sdl
go/src/github.com/veandco/go-sdl2/sdl/audio.go:22:9: note: #pragma message: SDL_DequeueAudio is not supported before SDL 2.0.5
#pragma message("SDL_DequeueAudio is not supported before SDL 2.0.5")
         ^
# github.com/veandco/go-sdl2/sdl
go/src/github.com/veandco/go-sdl2/sdl/video.go:21:9: note: #pragma message: SDL_SetWindowResizable is not supported before SDL 2.0.5
#pragma message("SDL_SetWindowResizable is not supported before SDL 2.0.5")
         ^

「SDL 2.0.5 より前はサポートしてねえよ」と言ってるのかな？

Ubuntu公式リポジトリの SDL2 は、2.0.4 らしい…。となると…最新版をインストールしないとダメなのだろうか…。

公式リポジトリのパッケージをアンインストール。

sudo apt remove libsdl2-dev libsdl2-image-dev libsdl2-mixer-dev libsdl2-net-dev libsdl2-ttf-dev libsdl2-gfx-dev
sudo apt autoremove

ビルドに必要になりそうなパッケージをインストール。他にも必要なパッケージがあるかもしれない。

sudo apt install build-essential automake mercurial libtool qt5-default libfontconfig-dev
sudo apt install freeglut3-dev libasound2-dev libaudio-dev libdbus-1-dev libegl1-mesa-dev libesd0-dev libflac-dev libfluidsynth-dev libfreeimage-dev libgles2-mesa-dev libglu1-mesa-dev libjpeg-dev libmirclient-dev libmircommon-dev libmircookie-dev libmircookie2 libmircore-dev libmodplug-dev libmpg123-dev libopenal-dev libpango1.0-dev libpng12-dev libprotobuf-dev libpulse-dev libsndfile1-dev libsndio-dev libtiff-dev libtiff5-dev libudev-dev libvorbis-dev libwayland-bin libwayland-dev libwebp-dev libxcursor-dev libxi-dev libxinerama-dev libxkbcommon-dev libxrandr-dev libxss-dev libxt-dev libxv-dev x11proto-video-dev zlib1g libsamplerate0-dev

SDL2のソースをDLしてくる。

_Index of /release
_Index of /projects
_SDL_gfx / SDL2_gfx - ferzkopp.net

mkdir ~/sdl2
cd ~/sdl2
wget https://www.libsdl.org/release/SDL2-2.0.7.tar.gz
wget https://www.libsdl.org/projects/SDL_image/release/SDL2_image-2.0.2.tar.gz
wget https://www.libsdl.org/projects/smpeg/release/smpeg2-2.0.0.tar.gz
wget https://www.libsdl.org/projects/SDL_mixer/release/SDL2_mixer-2.0.2.tar.gz
wget https://www.libsdl.org/projects/SDL_net/release/SDL2_net-2.0.1.tar.gz
wget https://www.libsdl.org/projects/SDL_ttf/release/SDL2_ttf-2.0.14.tar.gz
wget http://www.ferzkopp.net/Software/SDL2_gfx/SDL2_gfx-1.0.3.tar.gz

SDL2をビルドする。のだけど、このバージョンの組み合わせでは問題があるのでやらないほうがいい…。

tar zxvf SDL2-2.0.7.tar.gz
cd SDL2-2.0.7
mkdir build && cd build
../configure
make
sudo make install
cd ../..

SDL2-2.0.7 は一応ビルドできた。

• /usr/local/include/SDL2/ 以下に *.h が、
• /usr/local/lib/ 以下に libSDL2*.so が、

それぞれコピーされた。

しかし、SDL2_image でちょっと問題が。

tar zxvf SDL2_image-2.0.2.tar.gz
cd SDL2_image-2.0.2
mkdir build && cd build
../configure
make
sudo make install
cd ../..

make をしたら、エラーが。

../IMG_png.c:578:16: error: ‘struct <anonymous>’ has no member named ‘png_write_png’
             lib.png_write_png(png_ptr, info_ptr, PNG_TRANSFORM_IDENTITY, NULL);
                ^
Makefile:591: ターゲット 'IMG_png.lo' のレシピで失敗しました
make: *** [IMG_png.lo] エラー 1

どうすりゃいいんだ。

それぞれのバージョンを変えてみたらどうだろう。

• SDL2 を 2.0.6 に、
• SDL2_image を 2.0.1 に、
• SDL2_mixer を 2.0.1 に、
• SDL2_gfx を 1.0.1 に。

と言うのも。以下を見ると、Ubuntu 17.10 (artful) ではそういう組み合わせらしいので…。

_Ubuntu - パッケージ検索結果 -- sdl2

wget https://www.libsdl.org/release/SDL2-2.0.6.tar.gz
wget https://www.libsdl.org/projects/SDL_image/release/SDL2_image-2.0.1.tar.gz
wget https://www.libsdl.org/projects/SDL_mixer/release/SDL2_mixer-2.0.1.tar.gz
wget http://www.ferzkopp.net/Software/SDL2_gfx/SDL2_gfx-1.0.1.tar.gz
wget https://www.libsdl.org/projects/smpeg/release/smpeg2-2.0.0.tar.gz
wget https://www.libsdl.org/projects/SDL_net/release/SDL2_net-2.0.1.tar.gz
wget https://www.libsdl.org/projects/SDL_ttf/release/SDL2_ttf-2.0.14.tar.gz

一々コピペで入力するのは面倒臭いので、download.lst というファイルを作成して以下を記述。

download.lst

https://www.libsdl.org/release/SDL2-2.0.6.tar.gz
https://www.libsdl.org/projects/SDL_image/release/SDL2_image-2.0.1.tar.gz
https://www.libsdl.org/projects/smpeg/release/smpeg2-2.0.0.tar.gz
https://www.libsdl.org/projects/SDL_mixer/release/SDL2_mixer-2.0.1.tar.gz
https://www.libsdl.org/projects/SDL_net/release/SDL2_net-2.0.1.tar.gz
https://www.libsdl.org/projects/SDL_ttf/release/SDL2_ttf-2.0.14.tar.gz
http://www.ferzkopp.net/Software/SDL2_gfx/SDL2_gfx-1.0.1.tar.gz

以下のように wget を使うことで、一括でダウンロードできる。

wget -i download.lst

で。試してみたところ、この組み合わせなら make 時にエラーが出なかった。 どうやら Ubuntu 16.04 で SDL2 を使うなら、この組み合わせにしておくほうが無難っぽい。

既にインストールしてしまった SDL2-2.0.7 をアンインストール。

cd ~/sdl2
cd SDL2-2.0.7/build
sudo make uninstall
make clean
cd ../..

SDL2-2.0.6 等を解凍、ビルド、インストール。

tar zxvf SDL2-2.0.6.tar.gz
cd SDL2-2.0.6
mkdir build && cd build
../configure
make
sudo make install
cd ../..

tar zxvf SDL2_image-2.0.1.tar.gz
cd SDL2_image-2.0.1
mkdir build && cd build
../configure
make
sudo make install
cd ../..

tar zxvf smpeg2-2.0.0.tar.gz
cd smpeg2-2.0.0
mkdir build && cd build
../configure
make
sudo make install
cd ../..

tar zxvf SDL2_mixer-2.0.1.tar.gz
cd SDL2_mixer-2.0.1
mkdir build && cd build
../configure
make
sudo make install
cd ../..

tar zxvf SDL2_net-2.0.1.tar.gz
cd SDL2_net-2.0.1
mkdir build && cd build
../configure
make
sudo make install
cd ../..

tar zxvf SDL2_ttf-2.0.14.tar.gz
cd SDL2_ttf-2.0.14
mkdir build && cd build
../configure
make
sudo make install
cd ../..

tar zxvf SDL2_gfx-1.0.1.tar.gz
cd SDL2_gfx-1.0.1
mkdir build && cd build
../configure
make
sudo make install
cd ../..

共有ライブラリのキャッシュを更新。

sudo ldconfig

この状態なら、go-sdl2 のインストール時も文句を言ってこなかった。

ちなみに、go-sdl2 を再インストールしたいときは…。

• ~/go/pkg/linux_amd64/github.com/ 以下の veandco を削除。
• ~/go/src/github.com/ 以下の veandco を削除。
• go get -v github.com/veandco/go-sdl2/{sdl,mix,img,ttf} を実行。

動作確認は、Raspberry Pi Zero W + raspbian stretch + golang + go-sdl2 で行った手順と同じ。

love を実行したが、そちらも描画は問題無さそう。

VMware + Ubuntu 16.04 LTS上で動かすと、gopherrun が物凄い速度で動く。おそらく VMware は Vsync を見てないというか、妙な値を返している気配が。それで速度がおかしくなるのかなと邪推。

足元で埃を被ってたサブPC(Ubuntu 16.04 LTS機)でも試してみた。

ちゃんと動いてくれた。速度もそれほどおかしくない。ジャンプSEも鳴ってる。

自分で書いてみたら、こんな感じになった。…ソースが長くなってしまったので、Gistに貼ってみたり。

_gview_zoom2.py - Gist

• マウスホイールで拡大縮小。
• ステータスバー上のボタンを押しても拡大縮小。
• 中ボタンドラッグ(ホイールボタンドラッグ)でスクロール。

マウスカーソル位置を基準にして拡大縮小するようにもなったし、マウスカーソル位置に常時画像を表示することもできてる。これならイイ感じ。

もったいないから、昨日までごちゃごちゃやってた、ダメな例のソースも貼っておく。

_gview_zoom.py - Gist

前述の通り、こちらの例では QGraphicsScene内のItemを拡大縮小することでズーム変更してるのだけど。このやり方では、マウスカーソル位置を基準にして拡大縮小することが最後までできなかったという…。

前述のページを見ていて知ったのだけど。どうやら、mapToScene() や mapFromScene() を使うと、マウスカーソル座標の扱いも楽になるっぽい。

おそらくだけど…。

• mapToScene() は、QGraphicsView 用の座標値を、QGraphicsScene 内での座標値に変換するメソッド。
• mapFromScene() は、QGraphicsScene用の座標値を、QGraphicsView用の座標値に変換するメソッド。

なのではないか。たぶん。違うのかな。どうなんだろ。英語分かりません。

今まで、シーン内の座標値を得るために、スクロールバーの値を加味して、倍率を掛けて、とか面倒なことをしてたけど。mapToScene() を使ったらそのへんの処理をごっそり削れた。ありがたや。

ズーム変更を何度も繰り返していたら、倍率が100%に戻らず、99%になってしまって悩んだり。print で変数の値を表示しても100%(1.0)なのに、アプリ上の表示は99%になる。なんでや。Qtのバグなのかコレ。

浮動小数点の誤差っぽい。

_Python の小数 - Qiita

0.1を10回足しても1にならないソレ。超基本的なことなのに、うっかり忘れてた。

とりあえず、倍率は整数値で持つことに。実際に使う際に 100.0 で割ってから使えばええやろ…。結局最後に割ってるから誤差は残ってるけど、見た目ではどうせ分からんし。

ただ、倍率を増減させる際に 1.2 とか 0.8333 を掛けてるので、結局はやっぱり誤差が溜まってきて、どこかでおかしくなるという…。実際のソレを作る際は、100%、200%、300%等、キリがいい倍率をテーブルで持っておいて、順々に変化させていくことになるかなと。

マウスカーソル形状を変える際には、 _QtGui.QApplication.setOverrideCursor() を使うのだけど。

今までは、

global myApp
myApp = QApplication(sys.argv)

とかやっておいて、後から、

global myApp
myApp.setOverrideCursor(Qt.ClosedHandCursor)

として、カーソル形状を変えてたわけで。

で、今頃になって「qApp というグローバル変数があるぜ」「QApplication.〜 とか書かなくて済むぜ」と知り。コレを使うと以下のように書けるらしい。

qApp.setOverrideCursor(Qt.ClosedHandCursor)

少し楽になった。

ちなみに、カーソル種類は、 _QCursor Class | Qt 4.8 を眺めればなんとなく分かるかなと。ページの真ん中あたりに、画像一覧が。

Dropboxのpublicフォルダが死んだのでファイルの置き場所を変更。

Macrium Reflect FREE Edition をWindows XP機にインストールして、パーティションをイメージファイルとして書き出してバックアップを取ってみたり。

ただ、ファイルやフォルダへのアクセス権の問題で、イメージをマウントしても読み取れないファイルが出てきそうな気がする。セーフモードで起動してアクセス権にEveryoneを追加した状態でバックアップを取ってみたけど、これで本当に他のPC上でも読めるのかどうか。Windows XP側のセキュリティ面もかなりマズイ状態になったような気もするけど…。しかしセキュリティ云々を優先しすぎて取り出せるはずのファイルを取り出せないのもよろしくないし…。

うっかり使ってしまったけど、おかしな言葉なのか…。

再掲。個人的には、こういう意欲的な企画がもっと増えてほしいのだけど、やっぱり売れないのかしら…。日本人は、枠からはみ出た・既存フォーマット外の企画を受け入れられるだけの懐の広さを持ってない、ってことなんだろうか。

考えてみれば、「作画崩壊」という言葉も、いかに枠の中にピッチリ収まってるか、という視点じゃないと出てこない言葉だよな。…学校でも枠の中に収まることを要求されて。会社でも枠の中に収まることを要求されて。あまつさえ、娯楽コンテンツにすら枠の中に収まることを客自らが要求してるという。それが日本人という民族の性質なのだろうか。…まあ、そういう民族性だからこそ、省スペースの家電製品・デジタル機器を作れるのかもしれない、とも。＜話を広げ過ぎのような。

キャラクターごとに作画監督が居た、てな話を昔どこかで見かけたような気もする。＞アメリカのアニメ制作。となると、日本のほうがキャラデザの維持に関する品質追求は、甘いというか、杜撰…なのかしら。まあ、アメリカのソレは、現在では3DCGに移行しちゃったからアレなんだけど。

日本の場合、脚本や演出の段階では、キャラ毎に担当者を用意することもある、てな話を聞いたことがあるような。たとえば、セーラームーンや、ナデシコの時に、「○○の話は△△さんで決まり」てな話があった…ような。でも、「このキャラは△△さんの作画で」てのは聞いたことがない。作画に関して、出発点・意識の持ち方からして、何かが違うのだろうか。＞日本とアメリカの制作体制。

_Linuxサーバー環境でのサイトサムネイル化:PHPで実行
_ウエブサイトの自動スクリーンショット - Papasan's Home
_SimpleAPI の仕組みについて考察してみる :: Drk7jp
_Vine Linux 3.2でwebサイトをサムネイル化。
_人力検索はてな - WEBページのサムネイル画像をサーバーサイドで動的に生成する方法

_url2bmp
_url2bmp - command line syntax
_Webページを指定したピクセルサイズで画像キャプチャーできる「url2bmp」
_phpとurl2bmpでスクリーンキャプチャサーバ

_「Firefox」で閲覧中のWebページ全体を見えない部分も含めて画像キャプチャー

ktで、自サイトのアクセスカウンタ(画像表示する、よくあるタイプのcgi)が見れないという話があって。自分の想像では、ウイルス対策ソフトが邪魔してるんじゃないかと睨んでるのだけど。さりとて設定変更の手順説明ページをメールで知らせてみても連絡がなく。たぶん、説明ページを開いても「わけわからん」「こんなのできるか」で放置されてる予感。あるいはそもそもページすら見ていない可能性も。

であれば。URLを打ち込むとWebページのスクリーンショットをとってくれる、みたいなWebサービスを利用できないかなと。が、しかし、どうもサーバ側の負荷が高い処理のようで。たかだかアクセスカウンタ見たさに利用させてもらうのも気がひける。もっと別の手はないものか。

アクセス解析cgiの類を導入したほうがいいだろうか。と言ってもこれ以上サービス代金を払うのも避けたいのだろうし。無料のソレでは、広告表示が必要になったり等、アレがナニだし。…Webサーバのアクセスログをそのまま渡してくれるサービスがあれば色々できるんだろうけどなぁ。OCNさん、そういうサービスを提供してくれませんか。…アクセスログが欲しかったら、もっと高いサービスに契約してくれ、とか言ってきそう。

むむ。ということは。天皇さんにそういうことを言わせるために、わざと発言した可能性も！ 恐るべし、米長邦雄氏…。＜ホントかよ。

_(via はてなダイアリー - TOTORO(トトロ)の自堕落日記)
む。そうか。技術を使えばどうにかなるのかも。低年齢の子供には、必ず携帯を持たせて、子供に何かあったら、その携帯を使って親に連絡しつつ対処する。とか。でも、子供は携帯とかすぐになくしちゃうか。だったらある時期までは子供の体内に直接機器を埋め込んで…。冗談はさておき、通信機器の普及と社会的な取り決めによって解決できるところもありそうな気がしてきた。けど、そもそも子供の面倒を社会全体で見るという風潮が希薄な現代なので社会的取り決めを構築すること自体が実現不可能な気も。

ロボットが街をウロウロしていて子供の面倒を見てくれる、てな社会ならいいのに。人間が子供の面倒を見るより、ロボットが面倒見てくれるほうが、安心な場面も多いような予感。

ということで幼女のパンツ交換機能を実装してるAIBOかASIMOを社会的意思でもって所望。＜なんでそーなるの！（欽ちゃん風に。

_監督の作品に対するコメント を読み返してみたり。…設定した目標は妥当だし、狙いも見事成功してるように思う。まさに“ふもと”に居る自分には、背伸び具合も適切だった。アレより難しくされるとついていけませぬ。＜ヘタレ。…そのうちアニメも、シューティングゲームや格闘ゲームみたいになるのかな。そうなったら、とても自分にはついていけないなぁ。…と、そのへんの感覚が、監督さんには判ってたんだろうと自分は想像しているのですが。

微妙に関係ありそうな、なさそうな。