これは、マイナー言語 Advent Calendar 2014の記事であり、拙作記事「Flappy Birdを作る」シリーズ3作目でもあります。かつてのMacintoshに無償同梱されていたHyperCardを使ってFlappy Bird風ゲームを作りながら、スクリプト言語HyperTalkを紹介します。

HyperCard(HyperTalk)とは

HyperCardは"ハイパーテキストを実現した最初の商用ソフトウェア"です(HyperCard(Wikipedia))。HyperTalkはその上で動いたスクリプト言語です。

コンピューターの歴史上におけるHyperCardの存在意義、立ち位置についてはこの記事をどうぞ。実際の使用感について、あえて雑なたとえで説明すると、

PowerPoint + ペイントツール + スクリプト言語(HyperTalk)

といった感じです。PowerPointにおいてのスライドのように、1画面ごとの「カード」の連なりが1ファイル(「スタック」と呼ばれます)を構成しています。カードにはペイントツールで絵を描けますし、文字を表示する「フィールド」やクリックしたら別のカードに飛ばせる「ボタン」を配置することもできます。さらに、HyperTalkを使ってボタンに別のカードに遷移する以外の振る舞いを与えることもできます。

ゲーム開発環境としてのHyperCard

Wikipediaでも紹介されていますが、Cyan社のゲーム『MYST』はHyperCardで作られました。『MYST』は3Dグラフィックで作られた無人島を探索するアドベンチャーゲームです。発表当時の一般的なパソコンではリアルタイム・レンダリング不能な高精細な3D世界を、場面場面の止め絵を遷移させる手法で表現していました。Cyan社は80年代から同様の手法で『The Manhole』、『Cosmic Osmo and the Worlds Beyond the Mackerel』、『Spelunx』といった子供向けのアドベンチャーゲームを発表していました。これら作品群の、白黒ドットパターンを駆使したグラフィック表現には眼を見張るものがあります。(以下の動画だと、『Spelunx』が鮮明でわかりやすいと思います。)

場面遷移によるゲームブック的なアドベンチャーゲームは、HyperCardではスクリプトなしで制作できます。カードに場面場面の絵を描き、クリック可能な箇所に透明なボタンを配置します。ボタンにはほかのカードへ遷移をマウス操作のみで設定できます。

次に、Flappy Birdのような2Dゲームを作ることを考えてみます。アドベンチャーゲームとちがって、飛んだり跳ねたりするキャラクターが必要です。スプライトの代わりのゲームオブジェクトとして、ボタンが使用できます。ボタンには32x32ピクセルのアイコンを設定できます。アイコンはスクリプトで変更可能で、アニメーションさせることができます。スコアなどの表示にはフィールドが利用できます。カードに描いた絵をゲームの背景として利用できます。さらに、複数カード間でボタン・フィールド・背景を共有できる、「バックグラウンド」という概念も存在します。

Flappy Birdを作る

本題に入ります。Flappy Birdゲームの構成の仕方については、拙作記事(Sprite KitでFlappy Birdを作る)をご参考ください。今回はHyperCardなので、鳥の代わりにスタックのアイコンを飛ばせてみます。以下のような仕上がりになりました:

ソース

ゲーム全体のスクリプトです。右下の「Play」ボタン内に仕込みます。クリックしたらゲームを開始し、ゲームオーバーになったら停止します。

on mouseUp
  -- initialization
  put 0 into vy
  put 1.5 into ay
  put -10 into impact
  put -8 into pillar_vx
  put 0 into count
  put false into mouse_down
  put 16 into interval
  put 5 into pmax
  put 2 into w
  put false into game_over
  repeat with i = 2 to pmax
    hide btn i
    set rect of btn i to 0,0,0,0
  end repeat
  put 0 into card field 1
  set loc of btn "stack" to 100,10

  repeat
    -- pillar
    if game_over is not true then
      if count mod interval is 0 then
        repeat with i = 2 to pmax
          if visible of btn i is false then
            show btn i
            if random(10) > 5 then
              set rect of btn i to 512,160,512+32,288
            else
              set rect of btn i to 512,0,512+32,128
            end if
            exit repeat
          end if
        end repeat
      end if
      repeat with i = 2 to pmax
        if visible of btn i is true then
          if item 1 of loc of btn i < -32 then
            hide btn i
            put card field 1 + 1 into card field 1
            play "boing" "a"
          else
            get loc of btn i
            put item 1 of it + pillar_vx into item 1 of it
            set loc of btn i to it
          end if
        end if
      end repeat
    end if

    -- user input
    if game_over is not true then
      if the mouse is down then
        if mouse_down is not true then
          put true into mouse_down
          put impact into vy
        end if
      else
        put false into mouse_down
      end if
    end if

    -- gravity
    put vy + ay into vy
    get loc of btn "stack"
    put item 2 of it + trunc(vy) into item 2 of it
    set loc of btn "stack" to it

    -- collision
    repeat with i = 1 to pmax
      put left of btn "stack" into l
      put top of btn "stack" into t
      put right of btn "stack" into r
      put bottom of btn "stack" into b
      repeat with j = 1 to 4
        if j is 1 then
          get l&","&t
        else if j is 2 then
          get r&","&t
        else if j is 3 then
          get r&","&b
        else if j is 4 then
          get l&","&b
        end if
        if it is within rect of btn i then
          if game_over then
            if i is 1 then
              exit mouseUp
            end if
          else
            play "boing"
            put true into game_over
            put 0 into vy
          end if
        end if
      end repeat
    end repeat

    wait w
    put (count + 1) mod 360 into count
  end repeat
end mouseUp

舞台・登場人物

今回はカード1枚のみを使用しました。画面下部のパターンで塗ってあるところが地面です。今回は、前進を表現する地面のスクロールは省略しました。その他、以下の部品を用意しました。

名前	種類	番号	役割
-	ボタン	1	地面の衝突判定用
-	ボタン	2	柱
-	ボタン	3	柱
-	ボタン	4	柱
-	ボタン	5	柱
"Play"	ボタン	6	ゲーム開始ボタン
"stack"	ボタン	7	鳥
-	フィールド	1	スコア表示

ボタンやフィールドは、新しく作られたものほど番号が大きくなります。番号が大きいほど前面に表示されるので、鳥は最大番号にしました。地面の衝突判定用の1番のボタンは透明です。2〜5の柱のボタンには土管の絵を割り当てたいですが、32x32ピクセル以上の画像は表示できないので(※)、妥協策としてただの四角いボタンにしました。

※ResEditというユーティリティを用いてスタックにPICTリソースを埋め込み、ボタンに貼り付けて表示する方法も裏ワザ的に存在します。(参考: HyperCardのスピードアップ)

シナリオ

ゲームループの概要をBASIC風に書くと、以下のようになります:

10 初期化
20 ループ開始
30 柱を作る
40 柱を動かす
50 柱が画面外に行ったら+1点
60 マウスクリックされたら鳥を跳ね上げる
70 鳥に重力をかける
80 衝突判定。ぶつかっていたらループを抜ける
90 20に戻る

処理の一部をかいつまんで説明します。

鳥に重力をかける

下記が鳥に重力を与える箇所です。HyperTalkの文の区切りは改行です。

    -- gravity
    put vy + ay into vy
    get loc of btn "stack"
    put item 2 of it + trunc(vy) into item 2 of it
    set loc of btn "stack" to it

1行目

"--"はコメント行を意味します。

2行目

HyperTalkは英語に近い文法と言われています。変数への代入には=演算子ではなく、put〜intoを使います。vyは鳥のY方向速度、ayはY方向重力加速度です。put vy + ay into vyで毎フレームの重力加速度加算をしています。日本語で書くと、vy+ayをvyに入れろといったところでしょうか。

3行目

さらに英語らしい要素として"it"があります。get loc of btn "stack"は何をしているのでしょうか。"loc"はボタンのプロパティである"location"の省略形、"btn"は"button"の省略形で、略さずに書けばget the location of button "stack"となります。"stack"という名前のボタンの位置を得よといったところですが、「得て」どうするのでしょうか。この文は、得た値を暗黙的に"it"という変数に代入します。続く2行で、このitを使ってボタンの変位を行います。

4,5行目

ボタンの位置(location)は、X座標とY座標のカンマ区切りデータで表されます。カンマ区切りデータは「アイテムリスト」と呼ばれ、各要素には"item"キーワードでアクセスできます。3行目で「得た」ボタンの位置情報はX座標,Y座標形式になっているので、item 2 of itでY座標を取り出せます。これにY方向速度を加算してさらにitに入れなおしています。座標は整数である必要があるのでtrunc()でキャストしています。5行目の"set"キーワードで、ボタンの位置を変更しています。

衝突判定

HyperCardには衝突判定に使える"is within"キーワードがあります。これは、2次元の点が矩形領域に入っているかどうかを判定します。ボタンのプロパティ"location"はボタン矩形領域の中央の座標です。鳥の中央の点だけで判定すると、鳥が壁にめり込んでしまってイマイチなので、ボタンの四つ角について判定処理を行います。

障害物(地面、柱)との衝突判定部分部分は以下です。

    repeat with i = 1 to pmax
      put left of btn "stack" into l
      put top of btn "stack" into t
      put right of btn "stack" into r
      put bottom of btn "stack" into b
      repeat with j = 1 to 4
        if j is 1 then
          get l&","&t
        else if j is 2 then
          get r&","&t
        else if j is 3 then
          get r&","&b
        else if j is 4 then
          get l&","&b
        end if
        if it is within rect of btn i then
          if game_over then
            if i is 1 then
              exit mouseUp
            end if
          else
            play "boing"
            put true into game_over
            put 0 into vy
          end if
        end if
      end repeat
    end repeat

あらかじめ鳥のボタンの四つ角の座標を変数に入れておき、repeatループで各障害物との判定を行います。

      put left of btn "stack" into l
      put top of btn "stack" into t
      put right of btn "stack" into r
      put bottom of btn "stack" into b

get l&","&tは、座標のカンマ区切りデータを作って"it"変数に代入しています。衝突を検知したら、"play"で音を鳴らしてゲームオーバー状態にします。"boing"はデフォルトで使用できるサウンドリソースです。第2引数に音階を与えてメロディを鳴らすことも可能です。このゲームでは点数が入る際にも使用しています:

play "boing" "a"

これは「A」の音、「ラ」でボインを鳴らします。

おわりに

やってみたら、わりとさくっとFlappy Birdが作れました。みなさんも、直観的にインタラクティブなコンテンツの創作ができるHyperCardでゲームなりなんなり作ってみましょう！実はまだAppleのサイトでHyperCardが入手できますから、古い実機かエミュレーターで動かすことができますよ！

・・・という話をするつもりでしたが、AppleサイトからHyperCard 2.2Lite-Jのリンクが消えていました。

HyperCard 2.2 Lite-Jをダウンロードしたいのですが・・・
現在でもダウンロードできるのでしょうか？

7 年位前まではダウンロード可能だった様ですが、今ではダウンロード出来なくなっていますね。

HyperCard(HyperTalk)でFlappy Birdを作る