プログラミング簡単にメモ帳でゲームを作る方法

プログラミングをこれから学習しようと思っている方は
どのような開発環境でプログラミングできるか
わからない方も多くいるのではないでしょうか。

これから本格的にスクールなどで勉強するにも
プログラミングのさわりの部分ぐらいは
知っておきたいものです。

メモ帳だけでも、ゲームが作れるので
その概要をメモしておきます。

サイトコンテンツ

1 メモ帳で簡単にプログラミングゲームを作るには
2 enchant jsの開発環境はメモ帳だけも簡単に可能
3 簡単にメモ帳で作れる enchant js 使い方

メモ帳で簡単にプログラミングゲームを作るには

単にwindowsなどのメモ帳でゲームを作るにはenchant js という
ゲーム用エンジンのライブラリーを使うとかなり手軽に作れます。
メモ帳でコードを書いて、それをブラウザで
動かす形をとります。
(javascriptだけでも作れますが
ライブラリを使った方が時間がかかりません)

enchant jsとはjavascriptで作られたライブラリー、
簡単に言い換えてみると「部品の集合体」みたいなものです。

javascript自体がwindowsのメモ帳でプログラミング出来るので
enchant js も同じように作る事ができます。

ゲームに特化したライブラリーで、初期化、画像処理、スプイライト処理、
マップ管理などゲームが手軽に作れるようにする
工程数を大幅に減らしてくれます。

もともと、商業で使われる画像がフリーで
組み合わせて使えますので、とりあえず
画像はそれを使い、プログラミングに集中して完成したら
差し替えるというのもありです。

他のゲーム開発ツールに比べて、余計なツールを使う
必要がないので、コードだけに集中して書きたいひとに向いているかと思います。

enchant jsの開発環境はメモ帳だけも簡単に可能

開発環境はメモ帳とブラウザになりますが
ほとんどのpc(os)にそのようなものは
最初から実装されているはずです。

ほぼ他のものをインストールしない状態でプログラミングの
練習ができるという訳です。

多くのプログラミングのフレームワークやライブラリに
言える事ですが、最初に入る障壁があるようなものほど躓きやすく。
よっぽどやる気がない場合は
その時点でやめてしまうことも。

特にプログラミング初心者の方は多いはずです。
その点ではenchant jsの開発環境は
非常にシンプルです。

以下ゲームの初期化画面を出すまでの手順を
載せておきます。

enchant jsのファイルは
cdnは以下のURLにはまだあるようです。(2020/10)
他の場所はリンク切れが多い。

https://cdn.rawgit.com/uei/enchant.js-builds/master/enchant.min.js

このファイルを自分のHPなどにアップロードするか、直接urlを指定して
読み込みます。

htmlのファイルに以下のように書くと
黒い画面の初期化までできゲームの開発環境がすぐに整います。

<script type="text/javascript" src="https://cdn.rawgit.com/uei/enchant.js-builds/master/enchant.min.js"></script>
<script type="text/javascript">
enchant();


window.onload = function() {
    var game = new Game(640,480);


    game.onload = function() {
        var scene = game.rootScene;
        scene.backgroundColor = "black";
	}

    game.start();
}
</script>

enchant();

window.onload = function() {

var game = new Game(640,480);

game.onload = function() {

var scene = game.rootScene;

scene.backgroundColor = "black";

}

game.start();

}

</script>

上のコードをhtmlに張り付けて、それをブラウザで開けば
ゲーム用の画面が出ます。
(enchant.min.jsのファイルをcdnで読み込んでいるので
オンライン状態である必要があります。)

簡単にメモ帳で作れる enchant js 使い方

enchant jsは少ない行数で、ゲームで使うような処理実行可能です。
これはjavascriptで書く多くのことを、関数に
ラッピング(一まとめ)されていることによるものです。

簡単に画像の読み込みから表示までの使い方を
掲載しておきます。

画像の読み込み

var game = new Game(640,480);
game.prelode('ファイル名');

1 2	var game = new Game(640,480); game.prelode('ファイル名');

gameクラスオブジェクトへ画像ファイルを読み込みます。
引数を複数入れると多数のファイルをよびこむ事もできます。
prelodeしたファイルを以下のスプライトクラスと結びつけます。

画像の描画 Spriteクラス

var sp = new Sprite(32,32);

1	var sp = new Sprite(32,32);

画像の読み込みからスプライトクラスと結びつけ

var sp = new Sprite(32,32);
sp.image = game.assets['ファイル名'];
game.rootScene.addChild(sp);

var sp = new Sprite(32,32);

sp.image = game.assets['ファイル名'];

game.rootScene.addChild(sp);

Spriteクラスプロパティ

freme フレームのインデックス
image Spriteの画像
rotation Spriteの回転率
scaleX SpriteのX軸方向の倍率
scaleY SpriteのY軸方向の倍率

Spriteクラスメソッド(関数)

rotate(degree) Spriteを回転

scale(x,y) Spriteを拡大縮小

上に載せたゲーム初期化に組合わせて使うと
以下のようになります。これで画像の表示までが完成。

<script type="text/javascript" src="https://cdn.rawgit.com/uei/enchant.js-builds/master/enchant.min.js"></script>
<script type="text/javascript">
enchant();


window.onload = function() {
    var game = new Game(640,480);
    game.fps = 16;
    game.prelode('ファイル名');



    game.onload = function() {
        var sp = new Sprite(32,32);
        sp.image = game.assets['ファイル名'];
        
        game.rootScene.addChild(sp);
        
        scene.backgroundColor = "black";
	}

    game.start();
}
</script>

enchant();

window.onload = function() {

var game = new Game(640,480);

game.fps = 16;

game.prelode('ファイル名');

game.onload = function() {

var sp = new Sprite(32,32);

sp.image = game.assets['ファイル名'];

game.rootScene.addChild(sp);

scene.backgroundColor = "black";

}

game.start();

}

</script>

これ以降は、スプライトにaddEventListener でイベント(動きやアニメーション)を登録したり。

タッチやキー入力をとって移動したり。

当たり判定をとったり。

シーンの移動などをいれたりしてゲームを作っていきます。

プログラミング 簡単にメモ帳でゲームを作る方法

メモ帳で簡単にプログラミング ゲームを作るには

enchant jsの開発環境はメモ帳だけも簡単に可能

簡単にメモ帳で作れる enchant js 使い方

プログラミング簡単にメモ帳でゲームを作る方法

メモ帳で簡単にプログラミングゲームを作るには