Atlas.jsブログ

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

Atlasエディタの見た目を変更中です

以前のAtlas Editorはお固い感じのデザインでしたが、今回はやさしいデザインでサイトを作り直すことにしました。
CSSの勉強も兼ねてこれからどんどんAtlas Editorのデザインをしていきたいと思います。


Firefoxで実行結果が表示されないバグがありましたが、それも解決しました。Firefoxユーザの方も是非Atlas Editorを使ってみてくださいね


Atlas.jsのチートシート

こんにちは。
今回は今までblogで書いてきたAtlas.jsについての使い方をまとめてみました。

クラスの作成

var クラス名 = Atlas.createClass(元になるクラス,{
	initialize: function(クラスの引数1,クラスの引数2,・・・){//初期化処理
		this.inherit(元になるクラスの継承);
		//位置の設定などを入れる
	},
	//ここに処理を書く。enterFrameやkeyDownを使うことが出来る
});

スプライトの操作

game.load([使う画像のurl,使う画像の名前]);//画像のロード
var 画像のオブジェクト名 = new Sprite(画像名,画像の縦の大きさ,画像の横の大きさ);

画像のオブジェクト名.frame//画像のフレーム番号
画像のオブジェクト名.animate([アニメーションに使いたいフレーム番号1,アニメーションに使いたいフレーム番号2,・・・],[]の動作に要するフレーム数);

シーン登録

var 新しく登録したいシーンのオブジェクト = new Scene();
シーン登録用のオブジェクト.setImage("変更したい背景画像");//背景画像を設定する
game.pushScene(新しく登録したいシーンのオブジェクト);//シーンの登録

音関係

sprite.getSound("音楽素材の名前");
sprite.soundClonePlay();/*多重再生の場合に使用*/
sprite.soundLoopPlay();/*ループ再生の場合に使用*/
sprite.soundReplay();/*最初から再生する場合に使用*/
sprite.soundStop();/*サウンドを停止したい時使用*/
sprite.soundPlay();/*再生に使用*/
sprite.soundPause();/*サウンドの一時停止に使用*/
sprite.soundGetCount();/*サウンドの現在の再生時間の取得*/
sprite.soundSetCount();/*サウンドの再生時間の指定*/
sprite.soundGetVolume();/*ボリュームの取得*/
sprite.soundSetVolume();/*ボリュームの設定*/
sprite.soundGetAlltime();/*サウンドの全再生時間の取得*/
sprite.soundIsPlaying();/*サウンドが現在流れているかを取得*/

共通メソッド

 var obj = new クラス名();//共通オブジェクト名
obj.x;//オブジェクトのx軸の値
obj.y;//オブジェクトのy軸の値
obj.rot//オブジェクトの回転量
obj.scale(縦の大きさ,横の大きさ);//オブジェクトの拡大
obj.scaleX = a;//オブジェクトを縦にa倍
obj.scaleY = b;//オブジェクトを横にb倍
obj.scaleBY(縦の大きさ,横の大きさ,拡大するまでに要するフレーム数);//オブジェクトをフレーム数の間に拡大
obj.rotateBy(回転量,回転に要するフレーム数);//オブジェクトをフレーム時間の間回転させる
obj.メソッド1().and().メソッド2();//メソッド1とメソッド2を同時に実行
obj.メソッド().loop();//オブジェクトの回転量メソッドをループさせる
obj.within(対象のオブジェクト,対象オブジェクトまでの距離);//対象オブジェクトが指定した範囲内ならtrue,違うならfalse
obj.intersect(指定したx座標,指定したy座標);//オブジェクトが指定した座標にいるならtrue, 違うならfalse
obj.hitTest(対象のオブジェクト);//オブジェクトが対象のオブジェクトと接していたらtrue,違うならfalse
obj.remove();//オブジェクトの削除
obj.moveTo(移動先のx座標,移動先のy座標,移動に要するフレーム数);//オブジェクトの絶対的な移動
obj.moveTo(移動先のx座標,移動先のy座標,移動に要するフレーム数);//オブジェクトの絶対的な移動

マップ作成

var マップのオブジェクト = new Map("マップの画像のurl",縦の大きさ,横の大きさ);

マップのオブジェクト.drawData= [ //マップの指定
	[マップデータの番号1,・・・・・]//1行目
	・・・・・・
	[マップデータの番号3,・・・・・]//n行目
];

どうでしょうか?プログラムを書くのに少しでも助けになればと思います。

参考サイトは以下のとおりです。
クラスの作成
スプライト(画像)の操作1
スプライト(画像)の操作2
シーン登録
音関係
外部のスクリプトを読み込む
scale,rot,rotateBy,and,loop
scaleBy,moveBy,moveTo
within,intersect,hitTest,remove
マップ作成


レイヤー機能〜Atlas.jsの機能〜


 こんにちは。 今日はAtlas.jsに新しい機能が加わりましたので、その紹介をしたいと思います。

レイヤ

 追加されたのはレイヤ機能です。レイヤとは、層、階層という意味を持っていて、Atlas.jsではSpriteクラスやShapeクラスでできるオブジェクトをグループ化して、いっしょに移動や拡大、回転などを行うことができます。グループ化させるためにはLayerクラスを使います。実際にコードを確認していきましょう。

var sprite = new Sprite("sprite",32,32);//パーツ1
sprite.setPosition(100,100);
var sprite2 = new Sprite("sprite",32,32);//パーツ2
sprite2.setPosition(200,200);
 var layer = new Layer();
 layer.addChildren(sprite,sprite2);//パーツ1,パーツ2を追加し、まとめる。
game.addChild(layer);//layerをgameに追加

使い方はgame.addChildrenと似ています。スプライトや図形などのオブジェクトを作ってから、layerを用意し、そこにaddChildrenメソッドで作ったオブジェクトを追加するだけです。これだけで追加したオブジェクトをグループ化することができます。これで、layerから移動や拡大を一緒に行うことができます。これらをgameに入れる場合はlayerをgame.addChildで追加しましょう。
今度はLayerクラス独自のメソッドを紹介します。

fitToChildrenメソッド

 layerオブジェクトを作ると、その時レイヤの縦横の大きさは下の画像のように一定の値になっています。fitToChildrenメソッドは追加したオブジェクトから、最適のレイヤの大きさにしてくれます。また、レイヤの最初の回転軸は初期のレイヤの中心に設定されていますが、fitToChildrenを使うことで、最適化したレイヤの中心を回転軸にすることができます。 例として、回転させると、レイヤに追加したオブジェクトの内、一番左上を中心として回転しますが、fitToChildren()を使うと、ちゃんとグループ化した中での中心を軸に回転させることができます。

フィット前


フィット後


leaveメソッド

 leaveメソッドを使うと、グループ化したオブジェクトを分離させることができます。ゲームなどでLayerクラスを使ってキャラを作るときに、レイヤからオブジェクトを離したいときに有効ですね。

今回はsteelydylan さんにLayerクラスのサンプルを作っていただきました。 steelydylanさんのサンプル

これを見てLayerクラスについて理解を深めてみてください。


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をしていきながら少しづつ練習をしていくことがプログラミング上達の道だと思います。みなさんも是非活用してみてください。


findChildを使ってみよう


Atlas.jsである条件にマッチするaddChildされたオブジェクトを、簡単に取得するメソッドを紹介します。
タイトルにもありますが、getChildgetChildrenです。
例えば下のコードを見てください。

sprite.touchStart = function(e){
    var target = this.parent.getChild({name:"hero"});
    if(target.intersect(e.x,e.y)){
        target.remove();
    }
}

上の処理は画面がクリックされた時に、nameというプロパティに"hero"が設定されたオブジェクトを取得し、そのオブジェクトが、マウスの一と一致していたときに、そのオブジェクトを削除するという処理です。
敵と味方で当たり判定を変えたいときなんかに重宝しそうですね。
この機能を有効活用したゲームがAtlas Editorに投稿されています。

Acchord_alt04さんのゲーム
壁をジャンプして乗り越えていくゲームです。
このゲームに以下のように処理が書かれています

var Wall = Atlas.createClass(Atlas.Shape.Box, {
  initialize: function(col, width, height) {
    this.inherit(col, width, height);
    this.setPosition(frame.width, frame.height - kGroundHeight - height);
  },
  enterFrame: function() {
    this.x -= 8;
    var sprite = this.parent.getChild({name: 'player'});
    if (sprite && this.hitTest(sprite)) {
      sprite.remove();
    }
    if (this.x < 0) {
      this.remove();
    }
  }
});

これは、壁クラスをつくって、enterFrameで主人公(ボール)との当たり判定を行って、当たっていれば、主人公を消すという作業をしています。

 var sprite = this.parent.getChild({name: 'player'});
    if (sprite && this.hitTest(sprite)) {
      sprite.remove();
    }
    if (this.x < 0) {
      this.remove();
    }

ここですね。ちなみにthis.parentというところが重要で
ここはaddChildした親オブジェクトへの参照となっています。
その親が子供の中から、条件を満たす子供を探すメソッドとしてgetChild
getChildrenをもっています。
使い方は簡単で条件の複数指定も出来ます。

例)this.getChild({kind:"person",gender:"male"});
是非試してみてください


エントリーリスト

カテゴリーリスト

Facebook

Twitter

おすすめの本