ゲーム制作

ゲーム制作初心者がゲーム制作過程を書き留めるためのブログです。

一旦 enchant.jsのチュートリアルに変更

前回の開発方法を一旦止めて、

code.9leap

http://code.9leap.net

チュートリアルをやって行くことにしました。

 

まずはcode.9leapに新規登録しログインしました。

すると右側にサンプルプロジェクトに初めてのenchant.jsがあるのでそれのSTEP0からやっていきます。

STEP 0

まずはサンプルプロジェクトの初めてのenchant.jsのSTEP0をフォークしてみます。

f:id:gamebarton:20190703105058p:plain

赤丸のForkをクリックするとこSTEP 0:HTML入門のプロジェクトが立ち上がります。

次にプロジェクトが立ち上がったら

f:id:gamebarton:20190703112239p:plain

赤丸の部分に書いてあるように右上の青いRunボタンで実行してみてください。すると左の窓に実行されたプログラムの内容が表示されると思います。

main.jsをindex.htmlに変えると実行されたプログラムのHTMLが表示されるので、試しに文字などを変えてもう一度Runを押すと実行されたプログラムの文字が変わっていると思います。

終了したいときにはRunの右の方にあるFinishを押すと終了します。

次のステップからは上の画像の赤丸のTips:プログラミングを始めようの部分が他の指示に代わっていくので、その指示を実行しながら進めていきます。

 

つまづいた所

STEP1 課題3 

hello.text='Hello enchant.js';を

game.rootScene.addChild(hello); // ラベルを表示する

の下に追加する。

STEP4 課題1

this.y++;を追加してもマスターしましたと出なかった。this.y--;にするとクマが斜め上に向かっていてマスターしましたと出た。しかし再度やってみるとthis.y++;追加でマスターしたと出た。

STEP 8 課題2 未解決

for(i=0;i<20;i++)を入力しても課題が進まない。

 

同じ要領でenchant.jsサンプル (基礎編)もやってしまいます。

 

スタート enchant.js準備

記念すべき第一作目の前に、何で開発をしていくのかというと、

「カンタンにゲームやアプリを開発できる HTML5 + JavaScript フレームワークです。」と公式ページに書かれていたので、enchant.jsというフレームワークを使うことにしました。

・エディタ準備

まず、enchant.jsを使用してゲーム開発をしていくのに必要なエディタをインストールしておきます。

メモ帳を使ってもよいと思うのですが、開発をしていくうえでコード見づらいと不便だと思うので、私はエディタに Sublime Text を使っていこうと思います。

・enchant.jsの導入

導入については

https://www.atmarkit.co.jp/ait/articles/1302/06/news029.html

のページを参考に導入します。

導入でつまずいたところ

・enchant.js本体の場所

 enchant.js-builds-0.8.3-b

 ┗build(ここの中にありました。)

・ゲーム画面の開き方

 自分が作ったindex.htmlまでのパスをブラウザのURLに張り付け実行する。

 パスのコピー方法 [Shift]キーを押しながら右クリックしパスのコピーを押す。

 コピーしたパスに""がついている場合は外す。

サイト通りに作ってみたところうまく表示されました

f:id:gamebarton:20190701191359p:plain

次回はこのクマさんに動きをつけていこうと思います。