こんばんは、steelydylanです。
実はAtlas.jsではフォントの読み込みができるのはご存知でしたか？？
TTF形式のフォントを読み込んで、テキストクラスのオブジェクトで表示できちゃいます。

1.まずは実行結果をみてみよう

ちょっと怖めのフォントが表示されてますよね！！
では、このフォントを導入してみましょう！！

導入方法

まず、フォントをgame.loadでよみこみます。
読み込み方は他のpng画像や音声ファイルと同じで、
game.load(["フォントのURL","フォントにつけたい名前"]);です。
そして、
テキストクラスの引数の４番目にフォントにつけた名前を渡してあげます。
例えば、game.loadで、onryouという名前をつけているとすれば、
下のようにテキストオブジェクトを生成できます。
var text = new Text("ホラーハウスへようこそ","red",30,"onryou");
下にコード例を示します。

Atlas();
window.onload = function(){
	var game = new App();
  	game.load(["https://dl.dropboxusercontent.com/u/24487013/onryou.TTF","onryou"]);
  	/*http://www.ankokukoubou.com/font/onryou.htmより*/
	game.setQuality(500,500);
	game.setSize(500,500);
	game.centerize();
	game.setColor("black");
	var text = new Text("ホラーハウスへようこそ","red",30,"onryou");
	text.setPosition(20,20);
	game.addChildren(text);
	game.start();
};

参考までに今回作ったサンプルをAtlas Editorに公開しておきます
http://atlas-editor.ap01.aws.af.cm/user/steelydylan/536b7a7822eba9c719000013

こんにちは。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); も忘れずに書きましょう。これをしないとボールが画面に現れません。
完成したコードを下に置いておきます。
ボールが跳ね返るサンプル
できましたか？これらのコードを理解できるようになればあなたも立派なプログラマです。分からない人も今後、継続的に解説を行っていきますので、それをみながらやってみてください。
今回はここまでで。ありがとうございました。

どうもmoltomheadです。
前回、if文、whilte文についての解説を行いました。おそらくこれらとAtlas.jsを使えば、ほとんどのプログラムがかけると思います。ただ、Atlas.jsでは関数を記述している部分があるのですが、詳しく説明していなかったので、今回は関数について解説したいと思います。
関数とは与えられた入力を使って、なんらかの処理を行い、その結果を返す仕組みです。
実際に書く場合はこのようにします。

//定義する場合
fucntion 関数名(引数1[,引数2[,...]]){
    関数内で実行される処理
    [return 戻り値;]
}
//使う場合
関数名(自分が入力したい引数);

関数は上のようにfunctionとして定義をし、利用することができます。
引数は入力値を受け取るための変数です。関数で使われる処理に必要な値をここで受け取ることができます。引数は省略が可能なので、書かなくても大丈夫です。
そして、戻り値は関数が処理を行った結果を返す役割を持ちます。通常はreturn命令の後に書きます。戻り値は引数と同様、省略が可能です。

サンプルとして四角を作る関数を作ってみました。確認してみてください。
四角を作る関数のサンプル
関数の良いところは同じようなものを作る場合、コードを何回も書かなくてもすむという点です。例えば、もしサンプルのように四角を2つ作る場合、普通は関数の中身の処理を２回書く必要がありますが、関数を使えばその無駄を省くことができます。
後は中身を知らなくても、機能かわかっていればそれを使うことができるという点です。サンプルの場合、これがもし四角を作る関数ということが分かっていれば、その中の処理を知らなくても、利用することが可能です。

ところで、Atlas.jsを使ったことのある方は知らないうちにですが、関数の機能を使っているます。ただし、関数ではなく、メソッドとしてですが。
メソッドとはクラス内で使う関数だと思ってください。クラス内のデータを操作するのがメソッドです。
Atlas.jsの中にこのようなコードを見かけた人がいると思います。

box.setPosition(100,100);

もうお気づきかもしれませんが、setPositionも関数のように記述されているのが分かると思います。ここではsetPositonというメソッドが作られていて、自分が物体の置きたい位置を入力するだけでその操作を実行可能にしています。本来であれば、座標を変更するためにかなり長い記述をしなければなりませんが、Atlas.jsを使うことでそれを一文だけで記述することができます。このようにAtlas.jsでは私たちがあまりプログラムについて知らなくても多くの機能を提供しています。もしAtlas.jsに自分の使いたい機能がなかったら、自分で作ってみるのもいいかもしれません。
今回はここまでにしたいと思います。ありがとうございました。

繰り返し処理（ループ処理）

こんばんは, しぉみんです。
今回は if 文の次にプログラミングで重要な while 文について解説していきます。
while 文とは繰り返し処理でありよくループ処理と呼ばれます。
繰り返し処理とは括弧に囲まれた処理を何回か繰り返すという処理です。
何回繰り返すかやどの条件を満たしたら繰り返しを終了するかなどを指定することが出来ます。
では以下が1から100を足した答えを出力する while 文を使ったプログラムです。

var Goukei = 0; //合計を保存する変数
var i = 1;           //足される数

while(i <= 10){      //繰り返し部分 この処理が10回繰り返される。
Goukei = Goukei + i;   //Goukei に足す数と足される数の和を代入する。
i++;
}

//結果
55

皆さんわかりますか？ while 文の仕組みはこのようになっています。

while (終了条件) { }

「{}」この括弧の中に繰り返したい処理を書きます。終了条件が満たされるまではこの処理はずっと繰り返されます。上のプログラムの場合は 「Goukei + i を Goukei に代入して i を +1 せよ」という命令を 10 回繰り返せという意味になります。この処理が終わったときの Goukei の値は1から10を足した値である55になっています。このプログラムのリンクを貼っときます。終了条件の数字を変えていろいろ試してみてください。
while文を使ったプログラム
今までに if 文と while 文を勉強しました。実はこの2つだけでほとんどのプログラム処理を書くことが出来ます。プログラミングではそのほかにも様々な命令がありますがそれは大抵プログラムを簡単に書くための便利な命令です。またプログラミングではこの2つの命令をどう組み立てていくかということを考えるのが8割です。なのでこの命令をマスターすればあなたはもう立派なプログラマーです。では今日はこれまでにしたいと思います。よいプログラミングライフをノシ

丸を動かしてみよう2

丸を動かしてみようではクリックしたところに丸が動きました．今度は自動で動く丸を作ってみましょう．

クラスを作ろう

クラスを作る前にクラスの説明をします．

クラスとはある物体のひな形にようなものです．例えば，"服クラス"があったとします，この"服クラス"には以下の

色，形，大きさ

が含まれているとします．しかし，このままでは服ではありません，あくまでひな形です．

では服を作りましょう．
"服クラス"には
色，形，材質，大きさがそれぞれあるので，

色:赤，形:パーカー，大きさ:150-160cmの人向け

と，それぞれ入れることで赤色の150-160cmの人向けのパーカーが出来上がりました．

このように，クラスはあくまでもひな形のようなもので，実物ではありません．実物にするには，実際の情報を持ったものにする必要があります．
この実際に情報を持ったものをインスタンスと言います．

さらに！クラスはこの物体を動かしたりすることが出来ます，これをメソッドといいます．
メソッドはクラス自体にあるものなので，当然インスタンスにも引き継がれます．

服では着ることが出来る！というようなイメージです．
クラスとインスタンスは以下のイメージです．

クラスを作ろう　リターンズ

実際に作ってみよう．

ここでは， Shape.Circle classを元にあたらしいMoveCircle classを作ることにします．

Atlas();
window.onload = function(){
    var game = new App();
    game.setQuality(500,500);
    game.setSize(500,500);
    game.fps = 60;
    game.centerize();
    game.setColor("#000000");
    //class宣言部
    //サークルclass作成
    //クラスは必ず大文字から始めます
    MoveCircle = Atlas.createClass(Atlas.Shape.Circle,{
        initialize: function () {//initializeは初期化という意味です
            this.inherit("white",10* 2,0);//Shape.Circleの引数です
            this.speedY = 1;//Y軸の速度を指定しています
            this.setPosition(240, 0);//(500/2-半径）で中心の位置です
        },
         //以下のenterFrameでは、1fps毎に実行されること内容です
        enterFrame : function(){
            this.y += this.speedY;//Y軸の速度をY軸に足しています
            this.speedY += 0.1;//速度を徐々にアップさせています
            if(this.y > 550){//もし、画面外に到達したら
                this.remove();//消える
            }
        }
    });
  
    var Circle = new MoveCircle();
    game.addChild(Circle);
    game.start();
};

各ソースの意味はすでにソースコード内のコメントに記述してあります．

ここで大事なのは，

MoveCircle = Atlas.createClass(Atlas.Shape.Circle,{
  initialize: function () {

この文です．ここからクラスを作ります．
initializeは初期化という意味です，ここに記述されている事はクラスをインスタンスにするときに一番最初に実行されます．コンストラクタとも言います．

enterFrame : function(){

enterFrameでは，このクラスが常にどのような行動をするかを決めています．
詳しく説明すると，1fps毎に毎回実行される関数ということです．60fpsではおおよそ0.013秒に1回実行されると思ってください．

そして最後に.

var Circle = new MoveCircle();

の一文でクラスがインスタンスになります．この時にinitializeに記述したコンストラクタが実行されています．

これで丸が中央から落ちてきて，画面外に行くと消えるプログラムが完成しました．
プログラミングの時は早足で駆けましたが，クラスとはこういうものだ，ということを覚えておくとオブジェクト志向というものが見えてくると思います．

speedX等を追加して丸が右や左に動くようにしてみるといいかもしれませんね！

ここ←にこのプログラムのソースコードを置いておきます．