Atlas.jsブログ

Webブラウザで動作する、教育用JavaScriptゲームエンジン、Atlas.jsに関する知識共有ブログです。

選択されているタグ : Atlasエディタ

タグを絞り込む : OGS

forkをしてみよう


 こんにちは。moltomheadです。
 今までのブログでAtlas.jsの機能をひと通り紹介していきました。なのでこのブログを見ればAtlas.jsを使ってゲームを作ることができます。ただ、やっぱり一から作るのは少し難しいと思う人もいるかもしれません。そこで、まずは他の人が作ったものをもらって、それを改良しながら、ゲームを作る練習するという方法があります。他の人からプログラムのコピーして編集できることをforkといいますが、Atlas-editorにはこのforkできる機能があるので、それを使ってみましょう。

 まずはAtlas-editorを開いて自分のアカウントでログインしてみてください。ログインしたらページの上部にランキングボタンがあります。それをクリックしましょう。



すると、今までAtlas-editorを使って作られたゲームの一覧がランキングで表示されていますので、その中から好きなものを選択します。



後は自分のコードを保存するときのように保存のボタンを押してください。これで自分のアカウントに選択したゲームのプログラムがコピーされました。後はこれを自分なりに編集していくだけです。

 ではこちらでもforkして他の人のゲームを少し変更してみましょう。
前回のブログfindChildを使ってみようで紹介していたAcchord_alt04さんのゲームをforkして変更してみます。このゲームではボールが壁に当たると、ボールが消えるようになっていますが、ボールを消す代わりに、壁が倒れるようにしてみます。
ボールが消える処理をしているのは30行目あたりの

if (sprite && this.hitTest(sprite)) {
      sprite.remove();
}

の部分です。これを次のように変更します。

if (sprite && this.hitTest(sprite)) {
      this.rotateBy(Math.PI/2,40);
}

sprite.remove()を壁を回転させるthis.rotateBy()に変更しただけです。ちなみにif文にある条件sprit && this.hitTest(sprit)はspriteが存在し、かつspriteが壁と当たってるかという意味です。

実行結果は次のようになります。
forkしたゲーム

 処理を少し変えるだけでも見た目的にはすごく変わったと感じませんか?こうやってforkをしていきながら少しづつ練習をしていくことがプログラミング上達の道だと思います。みなさんも是非活用してみてください。


Atlas.jsの機能〜マップ作成〜


こんにちは。moltomheadです。今回はマップを簡単に作ることができるMapクラスを利用したいと思います。

Mapクラス

Mapクラスはその名の通りマップを作成することができるクラスです。一つの画像に沢山の部品が存在し、部品を組み合わせてマップなどを作ることができる画像のことをマップチップと言います。このマップチップを使ってマップを作成していきます。マップチップがない場合はAtlasエディタに素材があるので、それを利用しましょう。

var map = new Map("./images/map.png",16,16);//使用するマップ、縦の大きさ、横の大きさ

縦、横の大きさの指定はスプライトと同じように行ってください。上の画像の例では、16(横)*16px(縦)で30*16等分のマップチップになっています。
mapを定義し終えたら、後は配列にデータ番号を書き込みます。配列とは複数の値を格納できる場所だと考えてください。このように書きます。

map.drawData = [//草原のパーツは0,砂地のパーツは1といった具合に番号を指定することでマップを好きな場所に設置することが可能
      	[0,0,0,0,0,0,0,0,0,0],
      	[0,0,0,0,0,0,0,0,0,0],
      	[0,0,1,1,1,1,1,1,0,0],
      	[0,0,1,1,1,1,1,1,0,0],
      	[0,0,1,1,1,1,1,1,0,0],
      	[0,0,1,1,1,1,1,1,0,0],
      	[0,0,1,1,1,1,1,1,0,0],
      	[0,0,1,1,1,1,1,1,0,0],
     	[0,0,0,0,0,0,0,0,0,0],
      	[0,0,0,0,0,0,0,0,0,0],
	];

また、このマップには当たり判定をつけることができます。
次のように書くことで、マップの番号が1であればtrueを、0であればfalseを返します。

map.hitData = [
      	[0,0,0,0,0,0,0,0,0,0],
      	[0,0,0,0,0,0,0,0,0,0],
      	[0,0,1,1,1,1,1,1,0,0],
      	[0,0,1,1,1,1,1,1,0,0],
      	[0,0,1,1,1,1,1,1,0,0],
      	[0,0,1,1,1,1,1,1,0,0],
      	[0,0,1,1,1,1,1,1,0,0],
      	[0,0,1,1,1,1,1,1,0,0],
     	[0,0,0,0,0,0,0,0,0,0],
      	[0,0,0,0,0,0,0,0,0,0],
     ];

map.touchStart = function(pos){
      if(map.intersect(pos.x,pos.y)){
         	alert("あたっています");
      }
 }

最後にmapもaddChildに入れることを忘れないようにしましょう。
マップのサンプルを作成しました
マップ作成のサンプル
サンプルでは、マップ上の赤い丸がクリックした位置に移動するようになっています。しかし、砂地のマップではmap.hitDataを使い、移動しないようにしています。


Atlas.jsの機能〜スプライト〜


こんにちは。moltomheadです。
今回はスプライトの機能について説明していきます。スプライトとは画面内で画像を操作できるオブジェクトのことです。Atlasエディタの下の欄にある「素材提供」の中の戦闘機がスプライトに入ります。これを操作してみましょう。

Spriteクラス

スプライトを利用したい場合はSpriteクラスを使います。基本的なことはCircleクラスやBoxクラスと変わりませんが、Spriteクラスの特徴として、画像を利用すること、frameプロパティが存在することです。画像を利用するのは当たり前ですが、frameプロパティについてはゲームなどを作る場合に重要なのでよく確認しておいてください。なお、frameプロパティについてはこの記事を見ていただけるとよくわかると思います。
村人を作ろう
また、同様にanimateメソッドの使い方を解説しているので、こちらの記事ではanimteメソッドについては割愛させていただきます。

下準備

一個ずつやっていきましょう。まずは使いたい画像の読み込みをします。ロードをする場合はgame.load()を使います。この時、指定した画像のパスに名前をつけることができます。

game.load(["./images/char.png","image"]);//指定した画像のパスをimageという名前にして読み込む

後は読み込んだ画像を使ってスプライトを作りましょう。設定できるプロパティは以下のとおりです。

var sprite = new Sprite("image",x,y);//縦:x、横:yの大きさで画像imageを切り取る
sprite.rot = Math.PI;//spriteの回転量
sprite.frame = 3; //スプライト番号の指定
sprite.alpha = 0.5 //スプライトのアルファ値(透明度)の設定

setImage

Spriteクラスでは、表示している画像を別の画像に切り換える機能があります。それがsetImageメソッドです。

sprite.setImage("image2",a,b);//今の画像を新しくimage2に切り換えて縦:a、横:bの大きさにimage2を切り取る
/*もしくは*/
sprite.setImage("image2",x,y);//今の画像を新しくimage2に切り替え
sprite.setISpriteSize(a,b);//切り取りサイズを縦:a、横:bに変更

この時、座標やオブジェクトの回転量、フレーム番号などは保存されたままであることに注意してください。
利用方法の例としては、スプライトが弾にあたった時、爆発させたい時に有効です。新しく爆発用のスプライトを用意しなくてもsetImageを使うだけで爆発を表現できます。

スプライトを使ったサンプルを用意しました。
スプライトのサンプル
サンプルではアイテムをとったら戦闘機の画像を切り替えています。戦闘機がパワーアップするようなイメージです。


マウスの位置から丸を生成してみよう

暫く更新が滞っていましたXipherです.

丸を常に作ってみよう

以前作った丸が落ちるプログラムとイベントハンドラとエンターフレームを使って丸を常に作り続けてみましょう.

丸が落ちるプログラムを少し変更して,新しくソースを追加してみよう.

以前は.

initialize: function () {//initializeは初期化という意味です
            this.inherit("white",10* 2,0);//Shape.Circleの引数です
            this.speedY = 1;//Y軸の速度を指定しています
            this.setPosition(240, 0);//(500/2-半径)で中心の位置です
        },

でしたが,今回はこのCircleを生成する際に引数を使ってみたいと思います.

initialize: function (x,y) {//initializeは初期化という意味です
          //function()のカッコの中は引数と言ってこのクラスを呼び出す時に引数を入れて値を使えるようにします
            this.inherit("white",10* 2,0);//Shape.Circleの引数です
            this.speedY = 1;//Y軸の速度を指定しています
            this.setPosition(x-20, y-20);//ここで引数として受け取ったxとyを入れています
        },

変更箇所はinitialize function()のカッコの中にx,yというのが増えたところとthis.setPosition()の中です.

funcitionのカッコの中に引数の指定をすることで,このMoveCircleクラスでインスタンス化する際に,値を渡して揚げることが出来ます.今回はマウスの位置を渡すために指定しています.
setPositonでは,引数としてもらった値を自分の座標として指定しています.

また,新しく以下のソースを追加しましょう.
あまり多くはありません.

game.posx = 240;
    game.posy = 0;
    //イベントハンドラのタッチムーブでマウスカーソルの位置をgame.posxとgame.posyに格納しています
    game.touchMove = function(pos){game.posx = pos.x; game.posy = pos.y;};
    game.enterFrame = function(){//1秒間に60回常に呼び出されます
      //新しく丸を作ります。 ここでは1秒間に60個の丸が作られrます
      Circle = new MoveCircle(this.posx,this.posy);//いままでのMoveCircleクラスに引数を入れて新しくCircleを作っています
      game.addChild(Circle);
    };

新しくgame.posxとgame.posyの変数を作りました.
この2つはマウスカーソルの最後の位置を記憶するための変数です.

touchMoveはイベントハンドラでマウスが画面上で動いたときに実行されます.
今回は,マウスカーソルの位置をgame.posxとgame.posyに格納するだけです.

game.enterFrameはクラスの時と同様に常に実行され続けるものです.使い方はMoveCircleの方で習いましたね.
1秒間で60回丸を生成してそれの描画を設定しています.

これだけです!

サンプルプログラムはこちら→丸を生成してみよう!


Atlas.jsの機能〜シーン登録〜


こんにちは。moltomheadです。今回はシーンの登録についてやっていきたいと思います。
Atlas.jsにはSceneクラスというクラスがあり、それを使ってシーン(画面)の登録をすることができます。それでは順番にやっていきましょう。

ロード画面

Sceneクラスを使うこと新しく画面の作成をすることができます。下のコードではそれを使ってロード画面を設定しています。ロード画面を設定する場合はloadingSceneメソッドを使います。

/*ローディングシーンの設定*/
var scene = new Scene();//ロード用のシーンの作成
var text = new Text("ローディングシーンだよ","white",30);//ロード画面に表示する文字
text.setPosition(50,50);
scene.addChild(text);//ロードする画面にtextを追加する。
game.loadingScene(scene);//sceneをロード画面に設定

Atlas.jsは処理がとても軽いので、ロード画面を設定してもそれを確認することはできないと思います。なのであまり重宝されないかもしれませんが、容量の大きい画像などを利用する場合はロード画面を設定しておいたほうが良いでしょう。

シーンの切り替え

ロード画面でなくてもシーンを切り替えたい場合ってありますよね?例えばスタート画面とゲーム中の画面を分けたい場合などです。そんな時もSceneクラスを使うことができます。Atlas.jsではpushSceneメソッドを使ってシーンの切り替えをすることができます。

/*シーンの切り替え*/
var scene = new Scene();//新しいシーンの作成
scene.setColor("blue");//新しいシーンの色の設定
var text = new Text("シーンが変更されました","white",30);//シーンに追加する文字
text.setPosition(100,100);
scene.addChild(text);//シーンにtextを追加する
game.pushScene(scene);//sceneに画面を切り替える。

pushSceneメソッド以外ではロード画面の設定とほぼ変わりません。上のコードでは画面の作成、色の作成、画面に表示するもの(textなど)の設定、追加、そして最後に画面の切り替えを行っています。
シーンの切り替えですが、オブジェクトgameで行っているコードと似ていることが分かりますか?(game.setColorやgame.addChildなど)そうです。gameもまた、シーンの一つなんです。Atlas.jsではgameを開始時の画面に設定しているだけであり、gameもシーンの一つであることを覚えておくと、より理解が深まるでしょう。

上のコードを踏まえたサンプルを用意しました。
シーン登録のサンプル
サンプルではロード画面の設定と画面の切り替えを行っています。画面の切り替えはEnterキーを押した場合実行するようにできています。


エントリーリスト

カテゴリーリスト

Facebook

Twitter

おすすめの本