こんばんは moltomheadです。
前回はボールの作成をしました。今度は何が必要だと思います？そう、バーです。今回はバーの作成について解説していきます。
まずはバーらしい形をしたものを表示しましょう。今回は長方形を使いますが、あなたがバーだと思ったものならなんでもいいです。三角形でも円でも自由に使ってみましょう。後は最初に表示する位置を決めましょう。分からなかったら前回のボールの作成の記事を見てください
ブロック崩しを作ってみよう〜ボールを作る〜
コードはこんな感じでしたね。

var bar = new Shape.Box("blue",100,20);
bar.setPosition(200,400);

ボールを作った時はボールは勝手に動くようにプログラミングしていましたが、今回は自分で動かせるように、キーを押したときにバーが左右に動くようにしてみましょう。キー入力に対応させる場合はkeyDownを使います。

  bar.keyDown = function(key){ 
     if(key.right==1)//右キーを押した場合
          this.x+=10;
      if(key.left==1)//左キーを押した場合
          this.x-=10;
  }

enterFrameの時の記述と少し似ていますね。keyDownはどのキーを押したかを返してくれる機能を持っています。その情報は引数keyが持っていて、上のようにkey.rightは右キーを押した場合は1を、押してない場合は0を返してくれます。これを使って右キーを押した場合は、右方向に、左キーを押した場合は左方向に移動させています。
今回は比較的簡単な部類なのですぐにできたと思います。できていない方もサンプルのコードを載せますのでぜひ見てください。
バーを動かすサンプル
今後解説するとは思いますが、もっとできるぞという人は、それぞれ解説したボールとバーを組み合わせてボールをバーで打ち返すプログラムを作ってみたらどうでしょう。
今回は短いですがここまでです。次回はブロック崩しの要、ブロックを作っていこうと思います。ありがとうございました。

こんにちは。moltomheadです。OGSセミナーが終わってから10日ほど経ちました。もうみなさん一流のプログラマになれていますか？まだなれていない？そんな人も大丈夫です。今回から順番にゲーム作りの解説をしていくので、これを見れば簡単にゲームが作成できます。

今回は途中だったブロック崩しのボールを作るコードについて解説していきます。クラスがよくわからないという人のためにも今回はクラスを使わずに作ってみようと思います。
まずボールを表示してみましょう。円を画面に表示するコードは確かこんなかんじでしたね。

var ball = new Shape.Circle("white",20);//円を表示する。指定しているのは円の色と半径

これに自分でボールのスピードや位置を決めていきます。位置を決める機能はAtlas.jsの中にあるのでそれを使いましょう。

ball.setPosition(230,230);//それぞれ円のx軸、y軸の位置を決める
ball.speedX = game.getRand(5,10);//ボールのx軸方向のスピード
ball.speedY = game.getRand(5,10);//ボールのy軸方向のスピード

game.getRand();とは指定した2つの間からランダムで数値をとることができます。今回はこれでボールのスピードをランダムに決めています。
最後に当たり判定を作りましょう。本来は前回説明したwhileなどのループの中に入れたりする必要がありますが、Atlas.jsではenterFrameを使うことで余分な記述を省くことができます。enterFrameと当たり判定はこのように書きます。

ball.enterFrame = function(){//ループ処理
     	ball.x = ball.x + ball.speedX;//ボールのx方向の移動
      	ball.y = ball.y + ball.speedY;//ボールのy方向の移動
      	if(ball.x < 0 || ball.x > 460){//ボールがx方向に画面外から出たら
         	ball.speedX = -ball.speedX;//ボールの方向を反転する
         }
      	if(ball.y < 0 || ball.y > 460){//ボールがy方向に画面外から出たら
         	ball.speedY = -ball.speedY;//ボールの方向を反転する
      	}    
 }

if文の中ではそれぞれボールの移動とボールが画面外に出そうになったかどうかの判定をしています。ボールの移動はループ中にボールの持つスピードをボールの座標に足しているので、ボールが動いているように見えます。当たり判定については、atlas-editorではデフォルトで画面の大きさが500×500なのでボールがその座標を超えないかを見ています。もし超えたとしたら、ボールのスピードにマイナスをつけてやることで、反転しているかのように見せています。ちなみにif文の中にある||は'または'という意味です。
最後にgame.addChild(ball); も忘れずに書きましょう。これをしないとボールが画面に現れません。
完成したコードを下に置いておきます。
ボールが跳ね返るサンプル
できましたか？これらのコードを理解できるようになればあなたも立派なプログラマです。分からない人も今後、継続的に解説を行っていきますので、それをみながらやってみてください。
今回はここまでで。ありがとうございました。

atlas.jsでゲーム開発がらくらくできちゃう

はじめまして!! しぉみんです。
テストとレポートが明けてやっと解放されました今日この頃です。
今回私は, この Atlas エディタと atlas.js を利用してゲーム制作を行いました。 まだ atlas.js を学んでから 2, 3 週間しか経っていませんがなんとかゲームらしい作品ができました。これが今回制作したゲームです。

bomb HEY! 仕分けゲーム
bomb HEY! 仕分けゲーム

どこかで見たことがあるような気がするかもしれませんがたぶん見なかったことなかったことにしましょう。赤いボムと黒いボムをそれぞれの色の領域に仕分けしていくゲームです。この言語と開発環境で作成しました。Atlas エディタ
クリックとタッチに対応しています。全体的なグラフィックは未完成ですがゲームのシステム自体はほぼ完成です。ちなみに放っておくと無限増殖するので注意です。ソースコードのコメントには私の苦労と葛藤が記録されていますのでぜひ見ないでそっとしておいてくださいね。

つぎはwebページ制作のほうに取り掛かりたいと思います。
ゴールデンウィークはとてもとても天気が良くてレポート日和になりそうです。orz
ではまた今度ﾉｼ

どうも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とはなんぞや？と思う方もいるかもしれませんが、それを含めて細かいことはクラスと同様、今度説明したいと思います。では今回はここまで。