Atlas.jsブログ

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

Atlas.jsの名前の由来

どうも、こんばんはsteelydylanです。
Atlas.jsのロゴをRUBINメンバの一人がつくってくれました!!
どうですか??かっこいいでしょう??

Atlasの名前の由来

世界中のみんながこれを使って、プログラミングして、頭の中で地図を作れば、
それは1つの世界地図(Atlas)となる。
そういうコンセプトから名前をつけました。
ですからロゴマークを惑星のマークにしました。
今日は忙しいので以上にさせていただきます。


プログラミングの基礎的な解説〜if文〜

ドーモ。視聴者=サン。moltomheadです。前回はOGSに参加いただきありがとうございました。
計6時間あったセミナーも始まってからはあっという間に終わってしまいました。グループでいっしょに様々なゲームのアイディア出すのは楽しかったですし、参加した方も楽しんでいただけたのなら幸いです。

さて、セミナーを行って思ったのですが、if文やクラスなど、プログラミングが未経験な方にとっては分からない部分が多いと感じました。そこで、前回やったブロック崩しの解説をひとまず置いて、今回からはプログラミングの基本的な部分を説明したいと思います。Atlas.jsはjavascriptという言語で作られているので、解説もjavascriptにあわせたいと思います。

最初はif文について解説したいと思います。OGSではここがわからなかった人もいるかと思います。
if文は「もし〜だったら」という構造を表すためのものです。以下のように書きます。

var a = 10;
var b = 5;
if(a > b){        //もしaがbより大きければ、
    a = a+ b;   //aにaとbを足したものを入れる
}
else{               //そうでなければ、
    b = a + b;  //bにaとbを足したものを入れる
}

if文は指定された条件(上の場合a >b)が正しければその直後の中身を、違っていればelseの後の中身を実行します。上の例の場合、aに10、bに5が入っているので条件 a > bは正しい、つまりその直後の中身 a = a+ b; を行います。なお、ここではelseの部分を書いていますが、省略することも可能です。

最後にif文を利用したプログラムをatlas-editorに載せたのでぜひ見てみてください。
if文を利用したサンプル
今回はここまでにしたいと思います。ありがとうございました。


Atlasエディタでtmlib.jsを使ってみた

tmlib.jsが使えるぞ!!


みなさん。こんにちはsteelydylanです。
tmlib.jsをAtlasエディタで読み込んでプログラミングしてみましょう

http://rawgithub.com/phi-jp/tmlib.js/0.2.0/build/tmlib.js
と入力して、下の画像のようにtmlib.jsを読み込んでください。
読み込めたら、もうコーディング開始です。


さっそくコーディング開始!!

tmlib.jsはcanvasのidを
tm.display.CanvasApp("#app");
このように明記しなければ、canvasを使えないみたいなので、
まずはcanvasエレメントを次のように追加するところからはじめました。

  // canvasエレメント生成
  var field = document.createElement("canvas");
  field.id = "app";
  var Body = document.getElementsByTagName("body").item(0);
  Body.appendChild(field); 

あとは,tmlib.jsからサンプルコードを直接コピーしてはりつけ!!
コードは以下のようになります

   /*
	https://github.com/phi-jp/tmlib.js/
     からフォークしました
 */

tm.main(function() {
// canvasエレメント生成
 var field = document.createElement("canvas");
 field.id = "app";
 var Body = document.getElementsByTagName("body").item(0);
 Body.appendChild(field); 
  // アプリケーション作成
  var app = tm.display.CanvasApp("#app");
  app.resizeWindow(); // 画面サイズに合わせる
  app.fitWindow();    // リサイズ対応
  app.background = "rgba(0, 0, 0, 1)";  // 背景色をセット

   // 星スプライト
  var star = tm.display.Shape(64, 64);
  star.canvas.setColorStyle("white", "yellow").fillStar(32, 32, 32, 5);
  app.currentScene.addChild(star);    // シーンに追加

  // 更新
  app.currentScene.update = function(app) {
                    // マウス位置 or タッチ位置に移動
      star.x = app.pointing.x;
      star.y = app.pointing.y;
                    // クリック or タッチ中は回転させる
      if (app.pointing.getPointing() == true) { star.rotation += 15; }
  };

  // 実行
  app.run();
});

実行結果

実行結果は下にサンプルを貼っておきますね!!
参考にしてください
http://atlas-editor.ap01.aws.af.cm/user/steelydylan/5367263b8997a4664d000019


OGSセミナー開催しました

OGSセミナーが開催されました!

こんにちはXipher(サイファー)です.

多くの方々にお越しいただき非常に盛り上がるセミナーとなりました.

畳の上でプログラミング,と一風変わった様子ですが,とても良い環境でした.

参加者は4グループに分かれ,各グループ毎にこちらで用意したゲームを改造するというもので,様々な改造案が出ました!

皆さん実装のために色々考え,そして会話が沢山なされました!どんどん改造案が実装へと向かっていく様子は、とても素晴らしいものでした.

これからに向かって

RUBINはみなさんの第一歩を応援しています.

このOGSもプログラミングの第一歩となることを期待しています!


Atlas エディタを使ってゲーム開発をしよう!!

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

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

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




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




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


エントリーリスト

カテゴリーリスト

Facebook

Twitter

おすすめの本