トップページ

このブログについて

全記事一覧(新着順)

テーマ別記事案内

短期間ゲーム制作講座


スポンサーサイト

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

【GoogleDrive】ファイル置場として利用可能?グーグルドライブダウンロード&ゲーム利用調査記録

ちこく
いつの間にかLINEのクリエーターズマーケットがComingSoonじゃなくなってる!
まだできていないですよあわわ。





JavaScriptでゲームを制作していくにあたり、
どうしても困ったさんな問題がありました。


BGMやCGの置場がない!


リバーシの規模なら(jsdo.itさんが1MBまでなら置かせてくれるので)大丈夫でしたが、
今制作中の落ちものは厳しい……

サーバはいつか運用してみたいけど、たちまち勉強する余裕もない。


そんなわけで色々調べてみたところ、GoogleDriveというサービスで解決できそうな気配を感じました。


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

ゲーム製作時用の基本画面をつくる・スマホからのアクセスを判別して画面サイズを変更する

今後ゲームを作っていくにあたって、毎回1から作らなくても良いよう
基本画面を作成しました。


横960、縦640の横長画面です。
うちのブログ幅だとはみ出してますね(´・ω・`)
パソコンからだと固定、スマートフォンからだと
それぞれの画面サイズにフィットするようになっています。

tm.main(function()内
        if ((navigator.userAgent.indexOf('iPhone') > 0 
             && navigator.userAgent.indexOf('iPad') == -1) 
            || navigator.userAgent.indexOf('iPod') > 0 
            || navigator.userAgent.indexOf('Android') > 0) {
	        app.fitWindow();
	    }

こちらを参考にしました:スマホからのアクセスを判別して動作を切り替える

iPadやiPodのことは考えていなかったのでとりあえずフィットする方向で。


さて、ゲーム製作における段階的学習によると次は15パズルなのですが、
先に画像やテキストの読み込みをやってみたいなと思っています。
次回もよろしくお願いします。

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

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

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

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

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



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


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

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


続きを読む
このエントリーをはてなブックマークに追加

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ってなんぞ!?

次回に続きます。




LINEスタンプ

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

スポンサーリンク

このブログについて


★全記事一覧★

人気記事

人気ブログランキング



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

良い感じのペンタブ



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