見出し画像

Pyxel（ブラウザ版）でJavaScriptの機能をいろいろ使う

frenchbread

レトロゲームエンジンPyxelで作った作品をWeb版で公開する際、ゲームデータのセーブ・ロードをどうするか？という疑問から、先日「Pyodideがjsモジュールをサポートしているので、ローカルストレージが使えることに気づいた」という記事を投稿しました。

javascriptを使えるということは、他にもいろいろなことができそうです。
たとえば以下は「アラートを出す」「ファイルをダウンロードする」というサンプルです。

このサンプルソースのコードを載せておきます。
わかりやすくするために、単一のHTMLファイルにしてPyxelのコードを直接書き込んでいます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pyxel x JavaScript Sample</title>
    <script src="https://cdn.jsdelivr.net/gh/kitao/pyxel/wasm/pyxel.js"></script>
  </head>
  <body>
    <pyxel-run
      script="
        import pyxel
        from js import window, Blob, URL, document

        def update():
            if pyxel.btnp(pyxel.MOUSE_BUTTON_LEFT):
                data = ['Hello, Pyxel!']
                blob = Blob.new(data, {'type': 'text/plain'})
                blob_url = URL.createObjectURL(blob)
                a = document.createElement('a')
                a.href = blob_url
                a.download = 'hello_pyxel.txt'
                document.body.appendChild(a)
                a.click()
                document.body.removeChild(a)
                URL.revokeObjectURL(blob_url)

        def draw():
            pyxel.text(36,57,'Tap to donwload file',7)
        
        pyxel.init(160, 120)
        window.alert('おめでとう！Pyxelが起動しました')
        pyxel.run(update, draw)
      "
    ></pyxel-run>
  </body>
</html>

ダウンロードはJavaScript的に少しテクニカルな処理をしていますが、「if pyxel.btnp(pyxel.MOUSE_BUTTON_LEFT)」以下の10行ほどの部分で実現しています。

そのほかにも、たとえば

  • location.reload() を使ってリセット機能を実装する

  • URLパラメータを読み取る

といった小技は使えそうです。

もちろん、あんまりやりすぎるとPyxelで制作する意義自体が薄れそうなので、機能上どうしてもPyxel単体ではできないところを補う、くらいの感覚が良さそうですね。

この記事が気に入ったらサポートをしてみませんか？