ブログでミニRPGを動かす
Processingのコードをブログ上で実行するテスト。
ship of EYLN -ゲーム作りの冒険- で公開している、360行でイチから作るRPGのコードを解像度半分にして貼り付けてみました。
はてなブログでProcessingのコードを貼り付ける方法についてははてなブログで Processing.js を実行する方法 - 知に至る病とTips : Processingで書いた作品をはてなブログに貼る方法 ― CDN / Dropboxの利用 - [séns]を参考にさせていただきました(ありがとうございます)。
見たままモードのHTMLの方だとうまくいかず、上記リンクの通り、Markdownモードだとうまくいきました。
ようするにこんな感じで書けばOK。
<script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.1/processing.min.js"></script> <div> <script type="text/processing"> void setup() { size(400, 300); noStroke(); background(255); } void draw() { fill(255, 8); rect(0, 0, width, height); fill(255, 128, 64); ellipse(mouseX, mouseY, 50, 50); } </script> <canvas></canvas> </div>
あと、動かしてないときも重いと忍びないので、下記のようにマウスカーソルがゲーム描画エリア外のときは描画ループを止めるようにしてあります。
void mouseOut() { noLoop(); } void mouseOver() { loop(); }
ところで、↑のプログラムコードは、はてなブログのMarkdownモードで↓のように書けばProcessingのシンタックスでハイライトされるんですね。なるほど。
```processing 各種コード ```