トップページ

このブログについて

全記事一覧(新着順)

テーマ別記事案内

短期間ゲーム制作講座


スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

数当てゲームLevel1『ウィンドウを表示する(ゲームの雛型を作る)』

今回の本題の前に、気づいたことがあります。

jsdo.itの画面の、こちらです。

StartCoding.png
お わ か り い た だ け た だ ろ う か ?

左上のStartCodingからまっさらなプロジェクトが作成できたのでした。



正確にはまっさらではないですが。
以上、報告でした。


では、tmlib.jsの製作者様のブログのチュートリアルから、お勉強していきましょう。

  リンク:tmlib.js で今流行のフラットデザインを使ったタッチゲームを作ろう
      Step00 ゲームのひな形を作ろう


続きを読む
このエントリーをはてなブックマークに追加
関連記事
スポンサーサイト

数当てゲームを作ります!【構想編】

今回から、ようやく!
準備編を脱出してゲームを作るぞーってとこにとりかかります。

(実際にはHTML5とJavaScriptに対して何ぞや?
 を学んで記事を書く予定なのでまた戻るのですが)

まずは要件を確認。

  リンク:プログラミング/初心者向け/チュートリアル/段階的学習/数当てゲーム

以下、引用です----------

Level 1
ウィンドウを表示する

Level 2
ランダムに1~10までの数字を一つ発生させ、表示する

Level 3
数字を入力して、その数字を表示する

Level 4
Level2の数字とLevel3の数字を比べて
入力された数よりも大きかったらBig。小さかったらSmall。同じならHitと表示させる。

Level 5
Level2の数字を隠し、Level3~Level4を3回繰り返させる。
もし、途中で正解したらそこでゲームを終わりにする。

----------引用ここまで

Level1はテンプレートの時点で満たしてしまっていますね。
しかしせっかくなので何をしているのかコードを理解するところからはじめましょう。

tmlib.js製作者様のブログで15パズルのチュートリアルをされています。
そこでゲームの雛型を作っている回があるので、そこから学ぶことにします。
(ちなみに、「じゃあもう15パズルから挑戦しろよ」というツッコミは受け付けません)

  リンク:tmlib.js で今流行のフラットデザインを使ったタッチゲームを作ろう
       Step00 ゲームのひな形を作ろう


API Documentationのページもリンクしておきます。
これはtmlib.jsでできることが書いてあるページです。

  APIとは:IT用語辞典から引用
  あるコンピュータプログラム(ソフトウェア)の機能や管理するデータなどを、
  外部の他のプログラムから呼び出して利用するための手順やデータ形式などを定めた規約のこと。
  個々の開発者はAPIに従って機能を呼び出す短いプログラムを記述するだけで、
  自分でプログラミングすることなくその機能を利用したソフトウェアを作成することができる。


サンプルにもリンク貼っておきます。
tmlib.js 怒濤の 100 サンプル!! – Graphics(HTML5 Canvas) 編
tmlib.js Example


Level2、ここからすでに未知なる領域です。
ランダムに数値を取得&表示しなくてはいけません。
 →tm.util.Random.randint( min, max );
  tm.app.Label()
  このへんがそれっぽいです。


Level3、今度は入力です。
 →テキストボックスでいけば良いかな?
  テキストボックスのサンプルを探すところから。


Level4、判定。これは簡単そうです。


Level5、ゲームらしい感じ。
終わらせるということは、タイトルとリトライ画面も必要ですかね。


Level2の入力以外はサンプルもあることですし
いけそうな気がします。
 →入力のサンプルっぽいの見つけました。
  Forked from: phi's template - tmlib.js 0.1.7 View Diff (15) Canvas上でテキスト入力
  Forked from: phi's Canvas上でテキスト入力 - tmlib.js 0.1.7 View Diff (165) forked: Canvas上でテキスト入力(htmlに記述不要)

 ぱっとさわってみて動かなかったので、まだできるかわかりませんが……
 多分できると信じて、進んでいきましょう。


次回はLevel1をこなします。


最後に、名状し難い画面設計の図。

数当てゲームのイメージ図


関連記事

Fork(フォーク)とは何ぞや【jsdo.it】

はい、ググりました。

  リンク:Wikipediaのフォーク (ソフトウェア開発)の項目

  引用:ソフトウェア開発におけるフォークとは、
     あるソフトウェアパッケージのソースコードから分岐して、
     別の独立したソフトウェアを開発することである。

とあります。
なんとなくわかる、ような?
でもだからそのフォークのやり方が分からないってばよ。

と思い、もうちょっと調べました。
それでもわからないのでうんうん悩む。
tmlib.jsへ戻って見つめる。すると……

  リンク:tmlib.jsの公式ページ:udage

ここの『jsdo.it で始めてみよう』にご注目ください。
jsdo.itって、なんでしょう?
ググってみましょう。

  リンク:jsdo.itの公式ページ

jsdo.it は、ブラウザ上でJavaScript, HTML5, CSSを書き、共有するサービスです。(引用)
これだ!
ここのForkという機能を使えという意味だったのですね。

  引用:投稿されたコードをもとに、自分なりのアレンジを加えて
     新しい作品をつくることを「フォーク」といいます。
     たとえば、ある人が書いたコードに別の人がデザインを加えたり。
     クリエイター同士のコラボレーションを推奨しています。

なるほど、これがフォーク!

あ、でもこれログインが必要みたいです。
なるべく書籍購入や会員登録は避けて通りたい……
(このブログを見てゲームを作りたいと思った方の敷居を高くしないため)

と思いきや、会員登録は必要ないようです
YahooなりGoogleなりTwitterなり、その他もろもろの
いずれかのIDを所持していれば、それで認証されるそうです。

会員登録なんていらんかったんや!

※申し訳ありません、上記は間違いです。
 よく見たらログインすると会員登録したことになるようです。
 やめたければ退会申請をしないといけません。
 だいぶ↓の方に会員登録なしでプログラミングできる方法を書きますので
 どうしても嫌な方はそちらを行ってください。

「forkして使ってね♪」と書いてあることですし、
いざログインしましょう。

『jsdo.it で始めてみよう』からForkの部分のリンクで飛び、
Forkボタンを押すとログインを求められます。
ここは各サービスで違うでしょうから割合。

ログインできたらいざテンプレートちゃんとご対面!

templateちゃん
※画面はFireFoxです、IEだとまたちょっと表示が違うかもしれません

うーん、なんぞこれ。

とりあえずFinish Editingで終了、ブログに埋め込むボタンで↓に埋め込んでみした。


うーん、なんぞこれ(2回目

Editでいじればそれに応じて変わるっぽいです。
ふむふむ、じゃあここでいじって作っていけば良いのかな?

あ、でもブログに埋め込むの隣の隣の隣、Downloadボタンがあります。
押したらコードがダウンロードできました。

それならば、会員登録しなくてもダウンロードすれば
学習することはできますね。

私は皆さまにお見せするため会員登録しっぱなしでいきます。
ここでいじればみんなで共有できるメリットがありますが、
お好みで良いと思います。


ではでは、次回はついに!数当てゲームにとりかかりましょう!


関連記事

とりあえず動かしてみる

ではでは、tmlib.js の公式ページからお勉強していきます。
(ちなみにtmlib.jsには書籍が無いようなので図書館は無しになりました)

  リンク:tmlib.jsの公式ページ
  (ある程度ブラウザに横幅がないと表示がおかしくなるようです)

tmlib.js の使い方(引用)
tmlib.js を script タグで読み込むだけです. これだけで tmlib.js の全ての機能が使えるようになります.

わーい簡単!
とりあえず、サンプルのコードの一部を引用。

  <script src="http://rawgithub.com/phi-jp/tmlib.js/0.2.0/build/tmlib.js"></script>
  <script>
    // TODO: ここにコードを書いていく
    tm.main(function() {
    alert("tmlib.js バッチリ読み込まれてるよ!!");
  });
  </script>

動かすとこんなものが表示されました。

tmlibjsのHalloWorld的な


試したい方は、下記の手順でテストできます(Windowsの場合)。

  ①ファイルの拡張子を表示状態にする
  ②メモ帳ファイルを新規作成
  ③拡張子を.htmlにする(ファイル名はなんでもいいです、index推奨なのかな?)
  ④右クリックの『プログラムから開く』よりメモ帳で開く
  ⑤tmlib.jsの公式ページのusageからtmlib.js の使い方のコードをコピペする
  ⑥保存する。このとき『名前を付けて保存』から『文字コード』を『UTF-8』に指定して保存する
  ⑦ダブルクリックでテスト開始(設定を弄ったりしていなければIEで起動します)
   ※もし起動しなければ④と同じく『プログラムから開く』でWebブラウザを指定すればOKです
   ※IEだと警告が出るかもです。許可後に表示されます。

どうですか?
「tmlib.js バッチリ読み込まれてるよ!!」というメッセージが表示されましたか?
もし出ないという方はもう一度挑戦後、コメントにて状況を教えてください。一緒に考えます。

コードの内容は、今回は『とりあえず動かす』がテーマなので今はわからなくて良いと思っております。
近いうちに、そもそもHTML5とJavaScriptって何ぞや?を勉強して記事にする予定です。

何はともあれ。

やったープログラミングできたよー!

※ほかの言語で言う最初のプログラミング、『Hello World』と同じに違いないと思い感動中※


調子に乗ってそのまま次の『図形を表示してみよう』をやってみましょう。

<script src="http://rawgithub.com/phi-jp/tmlib.js/0.2.0/build/tmlib.js"></script>
<script>
  // TODO: ここにコードを書いていく
  tm.main(function() {
    // アプリケーションクラスを生成
    var app = tm.display.CanvasApp("#world");
    // スターを生成してシーンに追加
    var star = tm.display.StarShape().addChildTo(app.currentScene);
    // 位置をセット
    star.setPosition(150, 75);
    // 更新処理を登録
    star.update = function() {
      // 回転
      this.rotation += 8;
  };
  // 実行
  app.run();
  });
</script>
<canvas id="world"></canvas>

実行したのが↓です。表示に時間がかかるかもしれません。



これも先程と同様の手順でテストできます。
さらに star.setPosition(150, 75); の数値や this.rotation += 8; の数値をいじると
星の位置や回転の速さが変わります。入力は半角にしてください。
※極端な数値は入れないようにしてください!

わーすごい、コードも短くて素敵!
というか標準で星の図形が表示できるんですね、本当すごい。

さらに調子に乗って一番下の『jsdo.it で始めてみよう』をやってみましょう。

やってみましょう。

やってみ……

このテンプレートを Fork して使えばすぐにゲームプログラミングを始めることができます. (引用)


Forkってなんぞ!?

次回に続きます。



関連記事

ライブラリ、君に決めた!【tmlib.js】

今日はさっそくHTML5、JavaScriptについて勉強しよう!と思い、
勉強といえば本、そうだ図書館へ行こう!
という考えに至ったのですが、残念月曜日は図書館あいてなかったです。

いや、本屋でも良いんですけどね。
このブログは何もないところから誰でも(パソコンとネット環境があれば)ゲームを作れる的な
コンセプトなので、できるだけ費用はかからないに越したことはないのです。

もちろん本は所持してる方が何かと捗るんですけどね!
とりあえず、お試し的な感じで明日は図書館に行ってみます。


さて、では本日は何もしないのかというと。
いろいろググっております。

ざざざっと見てみた結果、

・実際に作られたゲームが豊富、Web講座もあるという観点から言語はHTML5+JavaScriptで良さそう
・enchant.jsやtmlib.jsなるゲームやアプリを開発できるフレームワークがあるらしい

  フレームワークとは?
  枠組み、構造、という意味で、
  効率的に開発できる土台と思っていただければ良いかと思います。
  参考:IT用語辞典のフレームワークの項目

ということがわかりました!
フレームワークがあるなら、有り難くそれを使わせてもらいましょう。

それで、enchant.jsとtmlib.jsの二つの名前が挙がりましたが、
実は先にenchant.jsを見つけて、そうしたらtmlib.jsを
オススメするページを見つけたのです。

 リンク:私がenchant.jsではなくtmlib.jsでゲームを作る5つの理由

tmlib.jsなら様々な図形の描画を標準でサポートしている!
それならこちらにしましょう。
記事の日付が2013/6/9なのでenchant.jsでも実装されている可能性は
なくもないですが、とりあえずこれでいってみましょう。

  リンク:tmlib.jsの公式ページ

なにこれ可愛い!!

公式ページを開くと可愛い鳥さん達が迎えてくれました。

これは……

みwなwぎwっwてwきwたwww

しかも口調が優しい!
これは頑張れそうな気がする!

丁寧な解説ページがあるようなので、
次回はそこを読みふけるところからはじめたいと思います。


【蛇足】なぜtmlib.jsのことを本文で『フレームワーク』と書いているのにタイトルでは『ライブラリ』なのか?

enchant.jsを紹介していた場所が『フレームワーク』と呼び、tmlib.js公式ページが『ライブラリ』と呼称していたためです。

ちなみにライブラリとは(まるまる引用:IT用語辞典のライブラリの項目

  ある特定の機能を持ったプログラムを、他のプログラムから利用できるように
  部品化し、複数のプログラム部品を一つのファイルにまとめたもの。
  ライブラリ自体は単独で実行することはできず、他のプログラムの一部として動作する。

だそうです。
うぅむ、ライブラリの方が使い方として合ってそうですね。
これからはtmlib.jsのことはライブラリと呼ぶようにします。

それでは、また次回。


関連記事

どんなゲームが作りたいのか?どのようにして作るのか?考える

いろいろです!なんかすごいのいろいろ作りたいんです!

と、ついつい欲張ってしまうのですが。
ぼんやりした目標を掲げても達成できる気がしないので、
きちっと考えておこうと思います。

●プラットフォームは?●
 出先でもちまちま遊べるもの!iPhone持ちなので、iPhoneで遊べるものが良いです。
 デバッグも布団の中でできますしね!
 さらには多くの人に遊んでもらいたい!ので、Webブラウザ上で動いて欲しいです。
  →HTML5、JavaScriptとかそこらへんを勉強すれば良いっぽい!

●どんなジャンルのゲーム?●
 最終的には収集要素のあるアドベンチャーゲームを作るのが目標です。
 まずは簡単なパズル的なものから慣れていきたいと思います。
  →初心者向けにお題を提示してくれるページを見つけました!

   プログラミング/初心者向け・チュートリアル

   こちらの段階的学習の項目を参考に、数当てゲームから行きたいと思います。


HTML5やJavaScriptなどの知識は全くないので、
先はとっても長そうです。
よろしければお付き合い下さいm(_ _)m

関連記事

ゲームの作り方!勉強ブログとは?


ブログ名:ゲームの作り方!勉強ブログ
管理人:KneeSocksCollector(ニーソックスコレクター)←最近ちょっと名乗るのが恥ずかしい
URL:http://kneesockscollector.blog.fc2.com/
RSS:http://kneesockscollector.blog.fc2.com/?xml
ツイッター:https://twitter.com/KneeSocksCollec(記事更新の際自動でつぶやきます)
完成したゲーム置き場:KneeSocksCollectionBox


ごあいさつ
当ブログ『ゲームの作り方!勉強ブログ』を閲覧してくださりありがとうございます。
ここでは私KneeSocksCollectorがゲーム作りを勉強し、その過程を報告していこうと思います。
ひとまずはブラウザ上で動くゲームの作成を目指していきます。
 (完成したもの→数当てゲーム15パズルリバーシブロック崩し

同じように、プログラミングは全くわからないけれどゲームを作ってみたい!
そんな方々にもお役にたてるコンテンツを目指しますので、どうかよろしくお願いいたします。


記事の更新について
PCとスマホ両方で遊べるゲームが作りたいのでJavaScript+tmlib.jsでゲームを制作しています。
また初心者なので目標に沿って学習するべく、ゲーム制作のwikiの初心者課題ページを参考にしています。

平日はおもに課題に沿ったゲームを作る報告記事ですが、
金曜日はCG・イラスト勉強関係、土曜日はシナリオ勉強関係
日曜日はWebプログラミングの基礎を勉強するべく記事を更新しています。


免責事項
このブログ内で記述するコードや紹介する動作などは
ほとんど私本人が実行してみた結果を載せることになる予定ですが、
万が一閲覧者様ご本人に不利益が発生しても責任を負うことはできません。
ご理解のほどお願いいたします。


ブログ内のコードやイラストの扱いについて
報告しているコード(プログラムのソース)に関しては基本的にご自由にお使い下さいというスタンスです。
コピペそのままの状態を『自分で考えて作りました!』と言われると困ったさんですが、
自分流に取り入れたりヒントにしたりで使って下さるのは大歓迎です。
一緒にゲーム制作の星を目指しましょう!

フリー素材の記事にあるイラストはお約束の範囲でご自由にお使いください。
ですが特に明記していないイラストの無断転載や利用はご遠慮下さい。
何か欲しいものがあれば私の絵で良ければリクエストいただけると頑張るかもしれません。


お願い
一応プログラマとして働いていたこともあるのですが、
実際ほぼ初心者です。あと世間の流行りとかにも疎いです。色々なことを知りません。
閲覧者様は当然知っていることでも私は知らない場合が多くあると思います。
なので勉強中に疑問がわくことも多いかと思います。
そして理解できたらブログ内で嬉しそうに報告すると思います。
そんなとき「そんなことも知らないのか」と馬鹿にしないで上げてください。
生温かい目でスルーしてくれるか、読み飛ばすかでお願いします。
※アドバイスや補足は大歓迎です。


<履歴>
2014/01/26 ブログ開設
2014/06/17 このページを少し加筆修正


関連記事

LINEスタンプ

LINEスタンプ承認されました

スポンサーリンク

このブログについて


★全記事一覧★

人気記事

人気ブログランキング



おかげ様で1位なことがあります。
ありがとうございます!

良い感じのペンタブ



Intuoscomicを使用しています 使い易いです。
替え芯やCLIP STUDIO、Pixiaなど絵を描く専用のソフトも数種付属しています。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。