javascriptで作る簡単ブラウザゲームの作り方!(環境準備編)

みなさんはじめまして、作っちゃうおじさんと申します。

普段作っちゃうおじさんの寝床にてブラウザゲームを公開しています。

今回は、普段作っているjavascriptで作るブラウザゲーム作り方について解説します。

このページの想定として、C言語か何かプログラムに一度は触れたことがある人を対象にしています。

(もしプログラミングの方法から知りたい方はコメントに記入ください。後日記事に書きたいと思います。)

今回は、javascriptという言語を使います。ブラウザで動くプログラミング言語です。

ただ、1からゲーム制作のプログラムを組むのも労力がかかるため、ゲーム制作に必要な機能をenchant.jsというライブラリをから利用することで簡単にゲーム制作を行います。

enchant.jsライブラリの使い方

このページから最新版をダウンロードしてください。

赤丸のところをクリックしていけばダウンロードができると思います。

ダウンロードしたデータにサンプルプログラムがあるので、これを参考にしましょう。

examplesフォルダにサンプルプログラムがあります。

これらのサンプルプログラムを見ながら、プログラムをいじることで、ゲーム制作に必要なプログラムの書き方は理解できると思います。

試しにbegineerフォルダ内のhellobearフォルダをクリックしましょう。

index.htmlをクリックすると、プログラムが起動します。すると、クマが右に動く画面を見ることができます。

これらのサンプルプログラムと

これで作業環境は整いました。次にプログラムを描くためのエディタについて話します。

エディタのインストール

javascriptはメモ帳などのテキストエディタがあれば作成可能です。

C言語などと違って、コンパイルがありません。ブラウザがプログラムを上から順に解読することで機能させることができます。

なので、この段階でもうプログラムを開始してもよいのですが、windows標準のメモ帳だと何かと不便なので以下の優秀なテキストエディタを紹介します。

・terapad

シンプルで使い勝手抜群です。

自動インデント機能や、タグごとに色付けされたり、エンコードをデフォルトのShift-Jisから国際標準のUTF-8に変更する際などに役立ちます。

・NotePad++

{ }内を省略して表示できる機能が便利。私は現在これを使ってjavascriptを書いています。

ブラウザゲーム制作に必要な最低限の構成

最後に、サンプルプログラムのhellobearを使ってenchantjsを用いたプログラムの構成についてお話します。

以下の四点を組み合わせることでブラウザゲームが完成します。

・ゲームを表示させるゲームページ(index.html)

・ゲームの動作を書くプログラムページ(main.js)

・各種プログラムをライブラリ(enchant.js)

・素材(chara1.pngなどの画像・音データ)

各データの関係についてですが、

index.htmlにて、プログラムであるmain.jsとライブラリのenchant.jsを読み込ませて、

main.jsにて必要な画像・音を読み込ませます。

以上で基本的な環境設定は終わりました。enchant.jsのプログラムの書き方はまた説明します。

(おまけ)index.htmlのコード内容

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク