Atlas.jsブログ

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

ブロック崩し

どうもmoltomheadです。
明日(というより今日)開かれるOGS(Oneday Game Seminar)で使用されるブロック崩しを作成しました。
そのことについて何回かに分けて触れたいと思います。
まずはバーで跳ね返す、ボールのクラスについて解説したいと思います。
ソースコードを見ながら、実際に確認してみてください。
ブロック崩し

Ball = Atlas.createClass(Atlas.Shape.Circle,{//ボールを作成する
  		initialize: function(col,radius){
     		this.inherit(col,radius);
          	 this.setPosition(250,200);//真ん中に配置
      		this.dirX = game.getRand(3,4);//左右の方向の移動量
      		this.dirY = game.getRand(4,6);//上下の方向の移動量
     	}, 
     	enterFrame: function(){
     		this.x += this.dirX;//左右の方向へthis.dirX分だけ移動させる
    		this.y += this.dirY;//上下の方向へthis.dirY分だけ移動させる
    		if(this.x > 480 || this.x < 0)//ボールが画面の右側か左側を超えた場合
    			this.dirX = -this.dirX;//ボールの左右の移動量を反転させる(跳ね返る)
              if(this.y > 480){//ボールが画面の下へ行ってしまったとき
                 this.dirX = 0;//
              	this.dirY = 0;//ボールの移動を止める
                 game.addChild(gameover);//ゲームオーバーを表示
              }
              if(this.y < 40)//ボールが画面の上側へ行ってしまったとき
                   this.dirY = -this.dirY;//ボールの上下の移動量を反転させる
          	 if(this.hitTest(ber))//ボールがバーに当たったとき
         	   	 this.dirY = -this.dirY;//跳ね返る
               
    	}	
  	});

クラスの難しい部分はまた今度説明するとして、ボールのクラスでは座標、移動量、壁とバーとの接触判定の設定をしています。
座標は、画面の大きさが(500,500)に対して真ん中に来るように設定しています。
次に移動量ですが、それぞれをランダムで決めています。game.getRand(n,m)はnからmまでのランダムな値を返します。
最後に壁とバーとの接触判定です。ボールが画面の座標を超えてしまった場合、上下左右の移動量を反転させることによって、ボールが跳ね返ったようにみせています。
また、壁とバーの接触判定、ボールの移動はinitialize内ではなくenterFrame内に記述されています。enterFrame内に処理を記述すると、わざわざループ用の命令を書かなくても、ループ処理をさせることができます。ではinitializeとはなんぞや?と思う方もいるかもしれませんが、それを含めて細かいことはクラスと同様、今度説明したいと思います。では今回はここまで。


Atlasエディタにスクリプトを読み込む機能をつけました

enchant.jsやtmlib.jsもつかえます

こんにちは。steelydylanです。
僕がみんなにこのAtlasブログを始めるぞ。と促しておきながらもう、書くことが見当たらなくなってきてしまいましたw
みんな話したい話題をとっちゃうんだよねぇ
そこで、今日はAtlas Editorに外部スクリプトを読み込ませる機能を追加しました。
結構、めんどくさかったです。
これなら、Atlas.jsだけではなく、enchant.js
tmlib.jsも使えます。
下が、enchant.jsの実行例です。
Atlas Editor | enchant.js読み込み
個人的にはAtlas.jsでゲームを作って頂きたいです。


外部スクリプトの読み込み方

下の、手順をみればわかると思います。
「その他の設定」>>「ソースコードの追加」>>
「URLの打ち込み」>>「追加」です!!
あとは、上のヘッダーにある、「リロードボタン」を押してください!!


この外部スクリプト読み込み機能を使えば、Atlas.jsのプラグインを読み込むことも出来ます。
次は、Atlas.jsのダンジョン自動生成用プラグインを読み込んだ例です。
Atlas Editor | ダンジョン自動生成
ダンジョンが自動で生成されたはずです.
enchant.jsもおすすめの外部スクリプトととして、AtlasEditorにURLが書いていますので、使ってみてはどうでしょう??


OGSが行われます

カルポートでOGS(Oneday Game Seminar)が行われます。プログラムについて学びたいけど何をしていいか分からない方、このOGSでゲーム制作を通して、楽しくプログラムについて学んでみませんか?

OGSではAtlas.jsを使ってゲームの制作を行います。Atlas.jsとはゲームライブラリのことで、あまりプログラミングの知識を持っていなくても簡単にゲームを作ることができます。当日では、このAtlas.jsに関するクイズに答えたり、Atlas.jsを使って、元々作ってあるゲーム(ボム兵のゲーム、カーゲーム)の改造、改良をしていきます。

開催日は5/3(土)10:00〜16:20で、場所はカルポート9階の第一和室です。ちなみに第一和室はこんな場所です。ついでにかるぽーとの地図も出しておきます。



畳にパソコンって少し新鮮でしょ?こんな環境でパソコンなんて使えるのか?って思う方もいると思いますが、大丈夫。当日は机が置かれ、プロジェクタもセットされているので準備は万全です。お茶も出します。
 


OGSの参加については以下のURLから登録することができます。
OGS on everevo

私は参加する人たちのサポートにまわることになっているので、当日、わからないことがあればどんどん質問してください。OGSでお会いできることを楽しみにしています。


丸を動かしてみよう

丸を表示してみよう!

Atlas.js Editorを開きましょう.

ソース内の8,9行目を消します.この部分は右画面上に表示されているAtlas.jsの文字を表示するためのものです.

var text = new Text("Atlas.js","white",30);//textの内容を決めています
text.setPosition(20,20);//textの場所を決めています

次に以下の文を先ほど消したところに挿入し,9行目のカッコ内を変更します.

var maru = new Shape.Circle("white",15);//白色 半径15の円を指定しています
game.addChild(maru);//text→maruに変更

全体としてはこうなります.正しく書けたらリロードボタンを押しましょう.

Atlas();
window.onload = function(){
	var game = new App();
	game.setQuality(500,500);
	game.setSize(500,500);
	game.centerize();
	game.setColor("black");
	var maru = new Shape.Circle("white",15);//NEW!!
	game.addChild(maru);//NEW!!
	game.start();
};

動かすための命令を書いてみよう!

このままでは、丸を動かすことは出来ません.動かすためにはその命令が必要なのです!

以下のように記述しましょう.

var maru = new Shape.Circle("white",15);
//ここから
maru.touchStart = function(pos){
  this.setPosition(pos.x,pos.y);//丸の場所を動かしています
};
//ここまでを新しく追加
game.addChild(maru);

ここで少し解説を入れます.
以下の文はイベントリスナーと言って、特定の動作(入力)が行われると呼び出される関数です.
ここではmaruの中に,「クリックした"時"どのような動作をするか」の命令を記述しています.また,posにはマウスがクリックされた時の座標が含まれているので,pos.xにクリックした時のx座標,pos.yにクリックした時のy座標がそれぞれ格納されています.
pos.xとpos.yを入れ替えたりするとクリックした時の丸の位置が変わります.

maru.touchStart = function(pos){//イベントリスナー
  this.setPosition(pos.x,pos.y);//丸の場所を動かしています
};

他にも「クリックしている時」,「クリックが終わった時」,「キーボードのキーが押された時」などがあります.

これで丸を動かすことが出来るようになりました.
今回は丸の作り方とクリックした時にその場所に動かす事をしました.

特にイベントリスナーは今後プログラムを作成するにあたって非常に重要なものとなるので、覚えておくといいでしょう.

こちらが実行例になります。
Atlas Editor


Atlas.js導入方法

下記のようなhtmlファイルを用意するだけです!!

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="Atlas.js"></script>
<script>
<!--ここに処理をかこう-->
</script>
</head>
<body>
</body>
</html>

エントリーリスト

カテゴリーリスト

Facebook

Twitter

おすすめの本