Tag: enchant.js

編集中

JavaScriptでプログラミングの感覚を養おう

プログラムも最近は、パズルのように機能が書かれたピースをマウスなどでドラッグ＆ドロップし、条件を変えて組み合わせて作成出来たりしますので、キーボードから沢山の英単語を入力するような従来のプログラミングに違和感がある時代かもしれません。

ゲーム作成に便利な機能が手軽に使える「enchant.js」があります。2020年時点では目新しさもありませんが、JavaScript自体は最近では無くてはならないプログラム言語の一つで、大変簡単にそれを試せる環境がてにはいります。JavaScriptとenchant.jsで絵でキャラクターを動かしたりしてみることで、プログラミングを体験してみましょう。

今回は日本製のゲーム開発フレームワーク「enchant.js」を使ってみますが、
ドットインストールのサンプルなども大いに参考にさせてもらいます。余裕のある方は、ドットインストールの講習を一通り閲覧してみましょう。
https://dotinstall.com/lessons/basic_enchant_js_v2

なお、以前に日本語の解説で分かりやすく掲載されていたWEBサイトが無くなりました。配布（ダウンロード）は、以下になります。
https://github.com/wise9/enchant.js/

このページのちょうど真ん中くらいにDownloadという項目があり、「Download Zip file」というリンクがあります。
このリンクで「enchant.js-builds-master.zip」というファイルがダウンロード出来ます。

早速、ドットインストールのサンプルを動かしてみます。

先程ダウンロードしたzipを展開します。

[展開したフォルダ] -- enchant.min.js
  +[images]--chara1.png
  +[examples
     +[beginner]
        +[hellobear] -- index.html

enchant.min.js、chara1.png、index.htmlの３つのファイルを、「test01」フォルダを作り、そこへコピーします。

コピーしたファイルに合うように以下の index.htmlを修正してください。
このindex.htmlをこれから共通で使う予定です。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <script type="text/javascript" src="../../../build/enchant.js"></script>
    <script type="text/javascript" src="main.js"></script>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
</body>
</html>




main.jsのサンプルその１ - hello worldの表示 

enchant();
 
window.onload = function() {
    console.log('hello world');
};

これは、Chromeのコンソール画面に「hello world」を表示します。

JavaSriptのプログラムを実行してこの「hello world」を確認して下さい。






main.jsのサンプルその2 - くまの表示

ここからが実際に「enchant.js」使った処理です。

enchant();

フレームワークなどを使う際には、最初に、htmlで

<script type="text/javascript" src="../../../build/enchant.js"></script>

等のように表示した際に、enchant.js本体が読み込まれるようにファイルを指定してから最初に行わなければならない前準備を行う為に「enchant();」などとして初期化を行う事になります。

window.onload = function() {
};

は、HTML内容がブラウザに読み込まれた後に実行するという意味となります。
一見当たり前のようですが、画像やsrcでファイルを指定していて読み込むファイルの数やサイズが大きくなると、上記のようにタイミングを管理しないと画面が全て表示される前にプログラムを実行する場合があり、その場合、プログラムの内容によってはエラーとなります。

   var core = new Core(320, 320);

ゲームの基本となる枠組みをパソコン内に作成する（メモリ内）。
これから事務処理を始めるので、折りたたみテーブルを出して設置し、鉛筆とメモ帳を出して、椅子に座って待機しているような状況。作業テーブルは「core」という名前にしました。
テーブルの大きさを横320、縦320にする。

   core.preload('chara1.png');

coreテーブルに倉庫から、過去の帳簿を持ってきて下さいと指示、または倉庫に取りに行く。

   core.onload = function() {
   }

テーブルに帳簿が届いて、テーブルに置かれたら次の処理を行いますよ。

       var bear = new Sprite(32, 32);
       bear.image = core.assets['chara1.png'];
       bear.x = 0;
       bear.y = 0;
       
       core.rootScene.addChild(bear);

帳簿は処理しやすいように何ページか分をひとまとめにすることとします。
実際に今さっき持ってきた帳簿を実際に使うことにします。
置く位置を左隅にして置くことにしますよ。
では、実際にひとまとめ分を机のさっき言った位置に事にします。

   core.start();

処理の手順は全て言ったので、これからが本番、実際に言った内容を実行して下さい。


クマのキャラクタを表示するプログラム全体 

enchant();
 
/*
 
Core
- rootScene
-- Sprite (bear)
 
*/
 
window.onload = function() {
 
    var core = new Core(320, 320);
    core.preload('chara1.png');
    core.onload = function() {
    
        var bear = new Sprite(32, 32);
        bear.image = core.assets['chara1.png'];
        bear.x = 0;
        bear.y = 0;
        
        core.rootScene.addChild(bear);
    
    }
    core.start();
 
};