ゲーム製作初心者の俺がマルチプラットフォームなゲーム作ってみるスレ

Check Tweet

1 ：VIPにかわりましてGEPPERがお送りします ：2012/02/26(日) 16:19:05.01 ID:HfR9U3Sco

内容はスレタイ通り

2 ：VIPにかわりましてGEPPERがお送りします ：2012/02/26(日) 16:22:25.91 ID:HfR9U3Sco

>>1の情報

男 25歳 社畜

よろしく

3 ：VIPにかわりましてGEPPERがお送りします ：2012/02/26(日) 16:25:49.09 ID:HfR9U3Sco

規制で剰りにも暇だからゲーム作ろうと思い立ったが吉日
早速作ろうとGEPへスレ立てしました

一人で出来るとこまでやるが、一人でやってると心が折れそうなんで頑張れと応援よろしく

色々調べて参考書籍ポチッたりしてます
プログラム未経験です

4 ：VIPにかわりましてGEPPERがお送りします ：2012/02/26(日) 16:29:14.13 ID:HfR9U3Sco

事前に調べた結果、マルチプラットフォームではJavascriptが相性良さそうなんで使用言語はJavascriptです

ライブラリにenchant.jsを使おうと思います

enchant.jsの参考書籍をポチりました
来週中には届きそうです

5 ：VIPにかわりましてGEPPERがお送りします ：2012/02/26(日) 16:34:25.63 ID:HfR9U3Sco

マルチプラットフォームと言う事で敢えてOSはWindowsでは無く、Linuxを選びます
ディストリビューションはUbuntu派生のxubuntuです

xubuntuを「LiveCDの部屋」からダウンロードし、DVDへ焼きます
DVDへはWindows7でフリーソフト「ImageBurn」を使って焼き込みました

ここまでサクサク進行しました

6 ：VIPにかわりましてGEPPERがお送りします ：2012/02/26(日) 16:35:58.69 ID:HfR9U3Sco

xubuntuをインストールする前にWindows7のリカバリディスクを作成します
この後、リカバリディスクを作っておいて良かったと安堵することになる

7 ：VIPにかわりましてGEPPERがお送りします(静岡県) ：2012/02/26(日) 16:38:08.62 ID:pR2nifuVo

がんばれ

8 ：VIPにかわりましてGEPPERがお送りします ：2012/02/26(日) 16:38:32.29 ID:HfR9U3Sco

WindowsがプリインストールされてるPCではインストールディスクは付属してません
プリインストールなPCを使ってる人は必ずリカバリディスクを作成しておくか、付属していたリカバリディスクを大切に保管しておきましょう
自作ＰＣやってる人にとっては常識ですね

9 ：VIPにかわりましてGEPPERがお送りします ：2012/02/26(日) 16:45:24.45 ID:HfR9U3Sco

>>7
あんがと

リカバリディスクを作成したらOD(光学)ドライブへ先ほど焼いたxubuntuの入ったディスクをぶち込んで再起動します

少し経つとxubuntuの読み込み画面が表示されますが、表示され無い人は、再び再起動してBIOS(バイオス)を出し、ブートの順番を変えてODドライブを一番上にしましょう
CDやらDVD、BD、Blu-rayなどと書いてあるのがそれです
中にはブートドライブを選択して起動させるPCもありますが、詳しくは「BIOS DVD ブート」などとググって調べてください

10 ：VIPにかわりましてGEPPERがお送りします ：2012/02/26(日) 16:49:29.75 ID:HfR9U3Sco

xubuntuが表示されたら言語に日本語を選択します

そして進んでいくと試用するかインストールするか聞かれるので試用の方を選択します

するとxubuntuの起動画面が表示されますので待ちます

11 ：VIPにかわりましてGEPPERがお送りします ：2012/02/26(日) 16:55:03.92 ID:HfR9U3Sco

xubuntuが表示されると見たことも無い画面ですね
そしてODドライブからの起動なんで重いですね、気にしないことです

取りあえず右上の方を見て、ネットワークに関するアイコンを左クリックします
そしてネットワークの設定をしておきましょう
ネットワークはxubuntuをインストールする時、MP3やらのコーデックインストールやアップデートインストールに必要です

12 ：VIPにかわりましてGEPPERがお送りします ：2012/02/26(日) 17:00:56.39 ID:HfR9U3Sco

そして今度は左上を見てアイコンをクリックします
これはWindowsで言うスタートメニューみたいなものでアプリケーションメニューと言います

その中から「GParted」と言うソフトを選択します
これはパーティションを編集する為のツールです

GPartedを起動し、パーティション情報が読み込まれるとWindowsやらリカバリーやらと書いてありますが、これはWindowsに関係あるパーティションです
誤って削除するとWindowsが起動出来なくなります

13 ：VIPにかわりましてGEPPERがお送りします ：2012/02/26(日) 17:08:00.87 ID:HfR9U3Sco

Windows以外に「D」や「ストレージ」「ボリューム」と書いてあるものがあると思います
これを右クリックしてフォーマット→ext4と選択しましょう

※このフォーマット作業をするとDドライブの中のデータが全部消えます
消したくないデータがあるなら、ファイルマネージャからUSBメモリなどへバックアップしましょう
xubuntuデスクトップに並んでる白いアイコンが各パーティションドライブへのショートカットです

ext4を選択したら上部にあるチェックマークを左クリックして実行します

14 ：VIPにかわりましてGEPPERがお送りします ：2012/02/26(日) 17:15:14.03 ID:HfR9U3Sco

長々語っていたけれど面倒になってきたぞ・・・
まぁ取りあえず「xubuntu インストール」とか「Ubuntu インストール」とかで、ググれば分かります

パーティション操作だけは注意が必要です
おいらはこれをミスってWindows関係を削除してWindows軌道不能に陥りました

リカバリディスクはこんな時に使うので必ず作成しましょう

15 ：VIPにかわりましてGEPPERがお送りします ：2012/02/26(日) 17:24:50.12 ID:HfR9U3Sco

パーティションには「物理パーティション」と「拡張パーティション」があります

物理パーティションは一つのHDDに４つまでしか作れません

物理パーティション
物理パーティション
物理パーティション
物理パーティション

拡張パーティションも物理パーティションの１つですが、拡張パーティションの中には「論理パーティション」と呼ばれるものをいくつも作れます

物理パーティション
物理パーティション
物理パーティション
拡張パーティション┬論理パーティション
　　　　　　　　　├論理パーティション
　　　　　　　　　└論理パーティション

論理パーティションを活用することで多くのパーティションを扱えるのです

WindowsプリインストールＰＣの場合、物理パーティションが既に３つ作られている場合があります
この３つのどれを削除してもWindowsは起動不能になるんです

16 ：VIPにかわりましてGEPPERがお送りします ：2012/02/26(日) 17:29:25.77 ID:HfR9U3Sco

そこへ４つめにxubuntuをインストールするとストレージドライブを作れなくなります
なので拡張パーティションを作成し、論理パーティションを２つ置いて、片方はxubuntuインストール、もう片方はストレージドライブ用にしましょう

物理パーティション（Windows用１）
物理パーティション（Windows用２）
物理パーティション（Windows用３）
拡張パーティション┬論理パーティション（xubuntu用）
　　　　　　　　　　└論理パーティション（ストレージドライブ用）

ちなみにxubuntu用は40ＧＢもあれば十分です

おいらはこれが理解できずにストレージドライブ用を作成しようとしてWindows用の一部を削除し、Windows起動不能に陥りました
誤って削除した場合はリカバリディスクでWindowsをリカバリして下さい

17 ：VIPにかわりましてGEPPERがお送りします ：2012/02/26(日) 18:29:24.75 ID:FAaZGNGEo

おまいらのググるパワーを信じ、Xubuntuのインストールが済んだとして話を進めます

取りあえずXubuntuでやることはセキュリティです
実はWindowsと違ってユーザー数の少ないLinuxではそれほどウィルスは出回っていません
しかし一応ということもあるんでアンチウィルスソフトを入れます

その前にxubuntuの様々な設定をする為のrootと言う機能を使う為にrootパスワードを設定しなければなりません
rootパスワードとインストール時に作成したログインパスワードは違いますので注意が必要です
インストールして直ぐの状態ではrootパスワードが設定されていないので設定する必要があるのです

マウスポインタを画面下部に移動するとランチャが表示されます
その中の真っ黒いアイコン、ターミナルエミュレータを左クリックしてください

ハッカーっぽい画面が出ます

その画面で下記のコマンドを実行してください

sudo su -

そうするとパスワードを求められるので、ここではログインパスワードを入力してください
※linuxのターミナルではパスワード入力時に画面へ何も表示されません　ご入力に注意
※入力が上手くいかないときはNumlk(NamLock)キーを押してください

root@foo:~#と表示されますので今度は下記のコマンドを実行します
（fooとはプログラム業界でなんちゃらと言う名称が決まってないときに使う文字列。日本ではhogehogeと表記されることが多い
今回の場合、fooにはユーザーネームが表示される　例：ユーザーネームtarouの場合はroot@tarou:~#）

passwd

ここで入力するのはrootパスワードに設定したい文字列です
再確認の為にもう一度入力します

18 ：VIPにかわりましてGEPPERがお送りします ：2012/02/26(日) 18:54:30.94 ID:FAaZGNGEo

最後に下記のコマンドを実行してください

exit

root状態からログオフしてhogehoge@foo:~$と表示されます

rootパスワードを設定したら、いよいよセキュリティソフトをインストールします

ターミナルエミュレータを起動して下記のコマンドを実行します

sudo apt-get install clamtk

sudoとは管理者権限でsudo以降のコマンドを実行すると言う意味です
管理者権限とはrootの事です
似たようなコマンドにsuと言うコマンドがありますが、suは管理者としてログインすると言うコマンドです
sudoの場合、コマンド実行が終了したら管理者から自動ログオフしますが、suはexitを実行しない限り管理者としてログオフされません
管理者としてログインした状態で席を離れたり、su状態でウィルスに晒されると大変危険なので可能な限りsudoを使いましょう

apt-getとはソフトウェアのインストールやアンインストール、アップデート等を行うコマンドです

installはapt-getのオプションコマンドで、install以降のパッケージをインストールするコマンドです

つまり管理者として以降のコマンドを実行（sudo） ソフトウェアを（apt-get） インストールする（install） ClamTKを（clamtk） と言う意味になります

アプリケーションメニューからアクセサリ→ウィルススキャナ（これがClamTKです）を選択します
ClamTKを起動できたら上部の拡張メニュー→スケジュールと進み選択します
ここでは自動スキャンの実行と、シグネクチャ（ウィルスパターンファイル）の自動更新を設定できます
シグネクチャ更新は自動スキャンの少し前に設定しておくと良いでしょう

19 ：VIPにかわりましてGEPPERがお送りします ：2012/02/26(日) 19:02:03.93 ID:FAaZGNGEo

Linuxの凄いところはターミナルエミュレータでソフトウェアをインストールすると必要なものを全て自動でダウンロードしてくれるところです
実はClamTKはそもそもターミナルエミュレータだけで操作するCUIソフトウェアです
それを「ClamAV」と言います

今回指定したClamTKはClamAVをGUI操作（マウスとかで操作）出来る様にするフロントエンドなんです
LinuxはClamTKと言うフロントエンドの大本となるClamAVが必要と自動判断してダウンロードしインストールしてくれました
この辺りはWindowsよりも便利ですね

20 ：VIPにかわりましてGEPPERがお送りします ：2012/02/26(日) 20:30:48.08 ID:FAaZGNGEo

この辺りで実際のおいらの作業と追いつきました

Xubuntuの日本語入力は「ibus-Anthy」です
ibusがインプットメソッド、Anthyが変換エンジンですが、このAnthyが結構アホです

なのでLinux版Google日本語入力である「Mozc（もずく）」をインストールします

sudo add-apt-repository ppa:ikoinoba/ppa && sudo apt-get update && sudo apt-get install -y mozc-server+dict ibus-mozc

新しいコマンドが出てきました

add-apt-repositoryとは、リポジトリという試用版ソフトウェアを利用するのに必要なデータを受信するコマンドです

&&とは続けてコマンドを入力する為のコマンドです

updateはapt-getのオプションコマンドでソフトウェアをアップデートするためのコマンドです
実はLinuxはアップデートのコマンドを実行することでインストールされているソフトウェア全てを自動的にアップデート出来ます
これもWindowsよりも優れた面の一つです
OSがソフトウェアのアップデートまで管理してくれます

もしmozc-dictが見つからないと言われた場合はsudo apt-get install ibus-mazcとコマンドを実行してください

21 ：VIPにかわりましてGEPPERがお送りします ：2012/02/26(日) 20:43:24.88 ID:FAaZGNGEo

そして右上にある[ｉ]というアイコンを左クリックします

その中の設定を選択します
インプットメソッドタブを選択し、インプットメソッドタブのすぐ下にあるインプットメソッドの選択を左クリックします
その中から日本語にカーソルを合わせ、Mozcを選択したら、追加をします
変換エンジンの一覧のAnthyの下にMozcが追加されたなら、Mozcへカーソルを合わせ、↑ボタンを押しAnthyより上にします

Mozcが表示されない場合は[i]アイコンを左クリックし再起動して、いてください

Mozcを一番上にしたならばアプリケーションメニューからログアウトを選択しXubuntuを再起動して下さい

再起動したならばアプリケーションメニュー→アクセサリ→Leafpadを起動します（Leafpadはメモ帳みたいなものです）
Leafpadでバージョンと入力し、変換候補に「Mozc+dict〜」と表示されれば成功です

22 ：VIPにかわりましてGEPPERがお送りします ：2012/02/26(日) 20:52:26.25 ID:FAaZGNGEo

続いて今回の開発言語はJavascriptなのでブラウザをダウンロードしてみます
デフォルトでFirefoxが入ってますが、もうひとつの人気ブラウザであるChromeをインストールしてみましょう

Linux版のChromeは「Chromium」です
いつものようにターミナルエミュレータからコマンドを入力してみましょう

sudo apt-get install chromium-browser

これで勝手にインストールされます

23 ：VIPにかわりましてGEPPERがお送りします ：2012/02/26(日) 21:05:27.24 ID:FAaZGNGEo

開発言語はJavascriptなので特に何かしらインストールするコンパイラとかはありませんが、テキストエディタくらいは良いものを入れたいです
自分もWindowsで入れてましたが今回は「gvim」を入れてみます

sudo apt-get install vim-gnome

gvimはかなり操作方法を覚えるのが面倒なテキストエディタです
ただ使いこなせば手放せなくなります

24 ：VIPにかわりましてGEPPERがお送りします [sage]：2012/02/26(日) 21:25:36.32 ID:wn0crQC+o

enchant.jsでマルチプラットフォームなゲームを作るスレかと思ったらubuntu入門講座スレだったでござる
勉強になった
>>1がんがれ

25 ：VIPにかわりましてGEPPERがお送りします ：2012/02/26(日) 21:31:22.85 ID:FAaZGNGEo

何故、今回Xubuntuを選んだかといえばWindows7より軽いからだね
元になったUbuntuの方が情報は多く扱いやすけどWindows7とそこまで変わらない重さだからさ
どうせ別のOS入れるなら軽いのを入れてみようと思った

さてゲーム作るのに活用したいソフトウェアはまだまだある
その一つがアウトラインプロセッサだ
ツリー形式で段落を入れ替えたりできる便利なやつ

今回はターミナルを使わずにアプリケーションメニュー→Ubuntuソフトウェアセンターと選択する
Ubuntuソフトウェアセンターが起動したら検索欄へ「アウトラインプロセッサ」と入力する
すると「gjots2 jotter」がヒットするのでインストールをクリック
パスワードを入力してインストールします

Ubuntu系にはソフトウェアセンターが整備されていてターミナルを使わなくても実はソフトウェアのインストールが出来たりする

これで粗方のOS関係の整備は終了です

26 ：VIPにかわりましてGEPPERがお送りします ：2012/02/26(日) 21:33:50.28 ID:FAaZGNGEo

>>24
ごめんなさいｗｗｗｗｗｗｗｗｗｗ

いや１からおいらの進行を全部書こうと思ってさ
enchant.jsは参考書籍がまだ手元にない状態でどうしようもないのが実情

今週の週刊アスキーに講座が載ってたからそれで一先ず勉強しようと思います

27 ：VIPにかわりましてGEPPERがお送りします ：2012/02/26(日) 22:07:38.62 ID:FAaZGNGEo

取り敢えず週アス3/6号を確認
104頁の講座をやってみる

ttp://jsdo.it/

このサイトでJavascriptを公開できたりするらしい
ここでゲームを公開しようかね

28 ：VIPにかわりましてGEPPERがお送りします ：2012/02/26(日) 23:03:45.12 ID:FAaZGNGEo

今日は週アスで勉強してそのまま落ちます
明日からはまた仕事だ・・・orz

29 ：VIPにかわりましてGEPPERがお送りします [sage]：2012/02/26(日) 23:58:49.41 ID:wn0crQC+o

あー、オレも週アス見て「ゼロから始める(ry」買ったクチだはw

30 ：VIPにかわりましてGEPPERがお送りします ：2012/02/27(月) 01:00:23.15 ID:sKxvbngno

>>29
実は起きてたりwww

先週から調べ始めたら今週の週アスが非常にタイムリーでした
当初、あらゆる環境にランタイムを提供しているJAVAか、互換エンジンの多いNScripterで開発しようかと考えましたが、
調べている内にenchant.jsを知りJavascriptにしようと決めました

ゼロから始めるenchant.jsもポチりましたが、iOSなどの挙動も知りたかったのでiOSに関するHTML5の参考書籍を既に購入済みです
AndroidのHTML5に関する書籍も購入済みです

HTMLやCSSは学生時代に多少遊んでたのでズブの素人って訳ではありません
マークアップ言語の経験は多少あるが、プログラミング言語の経験はゼロってのがおいらです

プログラムを学ぶならCやJAVAから始めるのが筋でしょうが、まぁ所詮暇つぶしの遊びなのでwww

31 ：VIPにかわりましてGEPPERがお送りします ：2012/02/27(月) 10:45:03.04 ID:OAl0DcSso

enchant.jsの挙動を手持ちのAndroidで複数ブラウザを使い試してみました
テストに使ったゲームはライブラリ付属の横スクロール熊のサンプルです

最も処理が軽快なのが標準ブラウザ
十字パットの反応が一番良かった

次いでFirefox
唯一サウンド（WAVEファイル）を鳴らすことが出来た

そして一番処理重なのが意外にもOpera
独自エンジンの為なのか十字パットの反応も悪い

標準ブラウザはWebKitベースなのでエンジェルブラウザやiOSブラウザでも同様の挙動なんじゃないかと推測しています

32 ：VIPにかわりましてGEPPERがお送りします ：2012/02/27(月) 19:15:32.14 ID:EVdIIQUJo

HTML5,CSS3の対応状況はAndroidだとどうやらFirefoxが最も積極的のようだ

今日は夜勤当直です
深夜にまた来ます

33 ：VIPにかわりましてGEPPERがお送りします ：2012/02/28(火) 01:01:21.89 ID:q+rtChvfo

今晩は

AndroidのOperaがアップデートしまして、横スクロール熊でテストしてみました
処理重なのは相変わらず、むしろ心なしか更に重くなった気がしますが、
サウンド（WAVE）に対応しました

WebGLによる3Dオブジェクト描画をサポートさせるgl.enchant.jsプラグインの
テストをAndroidの各ブラウザでテストしました
テストに利用したサンプルは以下です
ttp://tmlife-storage.googlecode.com/svn/trunk/gl-enchant-js/tips/guide/step04.html


標準ブラウザ（WebKit）では動作しませんでした
Firefoxでは処理重ですが何とか動作するようです
そして何故か意外にもOperaが最も軽快に動くと言う結果になりました

2Dでは苦戦しているOperaが3Dでは高スコアを出すと言うイミフな動作
もしかしたらコーディングによってスコアが全く変わってしまうのかも知れません
もう少し詳しく調べてみます

34 ：VIPにかわりましてGEPPERがお送りします [sage]：2012/02/28(火) 01:30:41.38 ID:OOyqobhUo

iPofTouchのSafariでアクセスしたらWebGL初期化出来ねーよって怒られて動作しなかった報告

35 ：VIPにかわりましてGEPPERがお送りします ：2012/02/28(火) 01:51:25.91 ID:6yr83+ruo

>>34
あざーすっ
やはりWebKitはWebGL未対応みたいですね

Operaの動作を別コーディングでテストしてみます
今回はCOLLADA形式をy読み込むコーディングです
ttp://tsuyobi.heteml.jp/html/javascript/enchantjs/webgl/hatyune/

WebKitである標準ブラウザはやっぱり動きません
Firefoxは処理重ながら動作可能
そして何故かOperaはサクサクですｗｗ

じゃあ今度は各ブラウザのJavascriptベンチを取ってみます
利用したサンプルは以下です
http://www.4gamer.net/specials/enchant/bench/
※３Dっぽいけど２Dみたいです

結果は２Dだったので標準ブラウザが最も高いスコアをはじき出すという結果でした
時点でFirefox、そしてOperaの順でスコアが高いです
２Dゲームを作るのならばWebKitに最適化するのが良いかもしれませんね

36 ：VIPにかわりましてGEPPERがお送りします ：2012/02/28(火) 01:59:48.69 ID:6yr83+ruo

ベンチマークしまくったらAndroidが熱で落ちましたｗｗｗｗｗｗ
この辺りも考えなきゃいけないですね
避けゲーの様な多数のオブジェクトを表示するゲームを作ってる製作者さんは熱との戦いでもあるわけですね

37 ：VIPにかわりましてGEPPERがお送りします ：2012/02/28(火) 02:12:56.77 ID:6yr83+ruo

幸いなことにiOSにもOperaがありますから、２DはWebKit、３DはOperaとユーザーさんに選択して貰う必要がありそうです

まぁこの辺りはまだ自分みたいな低レベルなゲーム製作者が考えても仕方ない範疇ですが
そこまでスペック要求するゲームは作らない（作れない）ですしね

38 ：VIPにかわりましてGEPPERがお送りします ：2012/02/28(火) 02:20:52.31 ID:6yr83+ruo

取り敢えず何から始めようか？と考えました

んで今週の週刊アスキーに掲載されてる熊サンプルを改造していくことから始めようかな？なんて考えてます
最終的な目標はVOCALOIDを題材にした何らかのゲームが出来たら良いななんて思ってます
MMDモデルも多彩なのでWebGLとか使えるようになったらカッコイイだろうなぁ何て妄想も・・・ｗｗ

39 ：VIPにかわりましてGEPPERがお送りします ：2012/02/28(火) 02:45:05.72 ID:6yr83+ruo

しかし手元に参考書籍が無いとアレですね、何も出来ないｗｗ
プログラムのプの字も分からない自分ですから、頭の中にあるゲームの想定する挙動を考え調べていますが、
専門用語が分からないですorz

今ぶつかってる難題が、ゲームサイズが大きくなると初期のロードに時間がかかってしまいますが、
enchant.jsの初期状態だとゲーム全体を読み込んでしまいロードに時間がかかる
そこでデータを小分けし、要所要所で必要なデータを読み込むにはどうしたら良いのだろう？と言うものです

そして可能ならばゲームプレイ中にバックグラウンドで小分けデータを読み込ませ、ユーザーにストレスを与えない
そんな方法はないものかと考え調べています

画像のプレロードまでは行き着きましたが、小分けして読み込ませたいのは画像だけでは無いので云々悩んでます

そしてどうやらJavascriptのマルチスレッドは試用段階であり、環境により対応もまちまちみたいだとも調べて知りました
つまりこれはバックグラウンドでの読み込みは事実上現状では困難だとオイラは勝手に判断した次第です

40 ：VIPにかわりましてGEPPERがお送りします ：2012/02/28(火) 03:03:38.31 ID:6yr83+ruo

データを小分けするという方法の想定は自分の中にはあります
想定であって正しい解なのかはわかりませんが

基本的にHTMLやCSSは上から読み込まれます（レンダリングエンジンにもよりますが、例えばSONY TabletはWebページの中でも重い部類である画像を後から読み込む）
ですからデータを小分けするには 以下の方法で出来るんじゃないかと考えているのです

<script type="text/javascript" src="../../enchant.js"></script>
　　<script type="text/javascript" src="../../plugins/nineleap.enchant.js"></script>
　　<script type="text/javascript" src="../../plugins/ui.enchant.js"></script>
　　<script type="text/javascript" src="foo_game_1.js"></script>
　　<script type="text/javascript" src="foo_game_2.js"></script>
　　<script type="text/javascript" src="foo_game_3.js"></script>

HTMLへこのように記述することによりfoo_game_1.jsの処理が終了した後にfoo_game_2.jsが自動的にロードされ、
foo_game_2.jsの処理が終了すればfoo_game_3.jsが自動ロードと言う風に動作するのでは無いかと推測してるんです

これは参考書籍が届いた後に横スクロール熊を改造し、GAME OVER表示後、自動的に別ゲームが起動する様に改造する事で
テストしてみたいと考えています

41 ：VIPにかわりましてGEPPERがお送りします ：2012/02/28(火) 03:04:52.05 ID:6yr83+ruo

さて今晩はこれで終了です
おやすみなさいまた明日

42 ：VIPにかわりましてGEPPERがお送りします ：2012/02/28(火) 04:05:02.49 ID:9B64/e/vo

当直交代の上司が来ないです・・・orz
まぁいつものこといつものこと(´･ω･`)

まぁ既に解ってるとは思いますが、このスレはおいらのチラ裏な日記帳ですwww
プログラム関係無い独り言も多いです

明日は以前から欲しかったトラックボールが届きますよ！
xubuntuで動くだろうか？

上司来るまで様々な人のenchant.jsで遊びつつ来たら仕事を上がろうと思います
ではでは

43 ：VIPにかわりましてGEPPERがお送りします ：2012/02/28(火) 14:48:51.09 ID:aRE9GQkwo

トラックボール届いたよ(・∀・)!!
KensingtonのSlimBlade
Xubuntuでドライバインストールしないでも使えました

本はまだです

44 ：VIPにかわりましてGEPPERがお送りします(長屋) [sage]：2012/02/28(火) 17:10:37.37 ID:NoL/iMUIo

iPhone4S
Opera
>>35の下のURL

重過ぎ泣いた

45 ：VIPにかわりましてGEPPERがお送りします ：2012/02/28(火) 20:21:38.22 ID:aRE9GQkwo

>>44
やっぱりOperaは重いですか
ありがとうございます

事実上Operaは３D専用になりそうですね
しかし逆に言えば３DはOperaに縛られちゃうんでWebKitやFirefoxももっと頑張ってほしいものです

重い重いと言われがちですがGekko（Firefox]noレンダリングエンジン）のバランスの良さは評価できますね

46 ：VIPにかわりましてGEPPERがお送りします ：2012/02/28(火) 22:01:04.39 ID:aRE9GQkwo

週アス3/6の講座を勉強中です

勉強中と言うかコーディング中です
コーディングした後、コードを読んでじっくり考えようと思います

47 ：VIPにかわりましてGEPPERがお送りします ：2012/02/28(火) 23:14:28.14 ID:aRE9GQkwo

週アス3/6の講座は変数名の解説とか無いんでわかりにくいですねぇ

48 ：VIPにかわりましてGEPPERがお送りします ：2012/02/29(水) 01:29:55.42 ID:llZm/XIqo

ただ打ち込んでも理解しにくいというのがわかりました
今回打ち込んだものを公開しようと考えましたが自分自身が全く理解していないので公開を控えます
参考書籍が届き、理解したら公開します

ソースコードを読んで何となくは何が書いてあるかは分かるんですがJavascriptの法則性というか、記述ルールがよく解っていないんです

週アス3/6号を持ってる方は105頁のソースコードを見てみて下さい

Part1はそのままなので理解出来ますよね
window.onload = function() {はこれなんでしょうね？
=の場合、その変数に代入すると言う意味で合ったはずですから、window.onloadへfunction()を代入すると言う理解で良いんでしょうか？
そして{の意味が全く解らない・・・出現頻度から考えてそのコードの終了を表すんでしょうか？
;の出現頻度も高いですが｛との違いが気になるところです

varは何を表すんだろう？

labelやbearは明らかに変数で、{bear = new Sprite(32, 32);でbearに切り抜き解像度を指定しているんだと考えてます
Part2でbear.image = game.assets['hogehoge'];とbear変数に画像を与えていますよねコレ
そしてbear.frame = fooで先ほどのnew Spriteから指定した解像度のフレーム分を抜き取っているのだと思います
つまりbear.frame = 0では指定した画像の横0〜32解像度内、縦0〜32解像度内を抜き取り、
bear.frame = 1では指定した画像の横33〜64の解像度内、縦0〜32の解像度内を抜き取ると言う意味になるのだと
数字で画像を指定と言う解説文はそう言う意味なんだと思います

49 ：VIPにかわりましてGEPPERがお送りします ：2012/02/29(水) 01:35:33.26 ID:llZm/XIqo

自分はプログラム未経験ですしenchant.jsに興味があってもプログラムは敷居が高そうでちょっと・・・と思ってる人も結構多いと思います
だから初心者の自分が参考書籍で勉強して初心者の言葉でenchant.jsを解説していこうと考えています

参考書籍が届いたら先ずはenchant.jsに付属しているサンプルの読み取り理解からしていきましょうね

それでは今日はこの辺で落ちます

50 ：VIPにかわりましてGEPPERがお送りします [sage]：2012/02/29(水) 02:53:46.40 ID:E2JQ0wU9o

オレもJavaScriptはあんましキチンと理解してないんだけど、window.onload = は
「ブラウザのウインドウに文書が読み込まれたら=のあとに書いてある事やってね」って意味らしい
でそのやる事が function() 、「関数」ってやつなんだけど要は命令たくさん繋げて作った機能のコトね
で、その関数の中身を続けて書く訳だけど何しろ長くなるんで一行に詰め込むとエライ事になる
そこで何行かに分けて書く時にどこからどこまでがその関数の中身なのか判る様に { と } で挟む訳よ
だからfunction()のすぐ後に{があるっしょ？
で、何行かに渡って命令が書いてあって、その後にちゃんと}で閉じてるっしょ？
そこまでがこの関数の中身ってコトで、コレがonload時に実行されるってワケ
因みに ; は一つの命令の終わりを示す区切りの記号ね
varは「変数使うよー、細かいコトは善きにはからえ」って意味で、変数宣言とかいうやつ
変数にはいろんなタイプ(型)があって数とか文字とか型によって入れられるモノが違う
本当は変数使う宣言するときに型を指定するのがお作法なんだけど、どうせ宣言と同時に中身放り込むんだから
中身見りゃどんな型か判るっしょ？ってときに使うのがvarってことらしい
んで今回のbearみたいに画面に表示するキャラクタとかは「スプライトオブジェクト」なので
「オブジェクト型」の変数に入るコトになる
つまり「bearって変数を宣言してnewで新しく生成した横32x縦32のスプライトオブジェクトを代入するよ、
型は代入する中身に合わせてオブジェクト型ね」という意味になるワケ
で、オブジェクト型の変数には「横32x縦32のスプライト」って情報だけじゃなくて、
そのスプライトで使う画像は？画面上で表示するときの横位置は？縦位置は？アニメするなら今何フレーム目？
といった情報も「パラメータ」ってやつに入れるコトが出来る
Part2のbear.image = game.assets['hogehoge'];てのがまさにそれ
bearのあとに「.(ピリオド)」でパラメータ名(スプライトに使う画像なら「image」)を繋げて書くと代入出来る
bear.frameとかもおんなじね

51 ：VIPにかわりましてGEPPERがお送りします ：2012/02/29(水) 08:59:42.88 ID:cBZ/K98Oo

>>50
ありがとうございます

なるほど何となく理解出来ました

enchant.jsライブラリが呼び出されている環境下でfunction()はenchant.jsのfunction()であって、Javascript標準ライブラリのfunction()とは中身が違うんですかね？

まぁこの辺もゼロから〜が届けば解ることだとは思いますが

それにしてもこう言う今までにやった事無いものをやってると楽しいですねぇ(´∀｀)
パズルを解くみたいな感覚です
しかもこのパズルを解けばゲーム作れるわけですから尚更ですね

更に言えばenchant.jsのメインユーザーは自分より10コくらいは年下の学生達ですからオッサンとしては負けられませんねwww
どっちが面白いの作るか勝負ですよ勝負www

52 ：VIPにかわりましてGEPPERがお送りします ：2012/02/29(水) 09:15:21.14 ID:8BCw9FQlo

どんなゲームを作るかは決まってるの？

53 ：VIPにかわりましてGEPPERがお送りします ：2012/02/29(水) 10:31:22.62 ID:cBZ/K98Oo

>>52
ええ、決まってますよ
どんな挙動をさせたいか？まで決まって居るんで後はしっかりJavascriptを勉強するだけです
そこが一番の難関ではあるんですがねwww

54 ：VIPにかわりましてGEPPERがお送りします ：2012/02/29(水) 19:34:10.69 ID:9+5nRLLPo

enchant.js付属のサンプルのソースコードを読んでみたわけです

解ったことは週アスの凄さでしたｗｗ
当初、週アスのコードとサンプルコードを見比べて勉強しようと思ったわけです
でもあまりにも違いすぎて参考になりませんねコレｗｗｗｗｗｗ

早く届けゼロからはじめる〜

55 ：VIPにかわりましてGEPPERがお送りします ：2012/03/01(木) 18:42:24.36 ID:fgq3p0pzo

配送通知すら来ないんですが・・・
TSUTAYAで買ったんですけどね
3〜12日以内に配送開始らしいんです
もう一週間近く経ちますね
12日をフルに使うつもりなのでしょうか？

本屋へ行く度にJavascriptの本を買ってしまいそうになる・・・
我慢我慢(´Д｀；)

56 ：VIPにかわりましてGEPPERがお送りします(東京都) [sage]：2012/03/01(木) 23:38:37.83 ID:sZkJnwvto

>>50
流石にこれは違うと思うので指摘、ちょっと長いので3レスに分けてw

自分も専門ではないので結構間違いは結構あると思う。そこは他の人が指摘してくれると嬉しい
先に言っとくと殆ど「JavaScript本格入門」という本からの受け売りです。
さらに十分に理解できてるとは言えない、いい加減な知識での受け売りですw
本を読んだ方が100倍いいですw

57 ：VIPにかわりましてGEPPERがお送りします(東京都) [sage]：2012/03/01(木) 23:39:36.38 ID:sZkJnwvto

varはメンバー変数の生成。
変数には有効範囲があり、varを付けて宣言した場合と付けない場合では
変数の使用できる有効範囲が違う。
例えばfunctionの中で宣言した変数は、varを付けていればfunctionの中でのみ有効
付けていなければfunctionの外でも有効。

変数の「型」に関しては、JavaScriptは表記方法で型を認識してる。
違った型同士で計算された場合は自動的にどちらかに変換(ネスト)されるか、またはエラーをはく

数値型 ・・・ 数字。入力時に数字を打ち込むと数値型になる
文字列型・・・文字列。入力時に""または''で囲むとストリングス型になる
ブーリアン型・・・trueとfalseの2つしか値が無い。""や''なしでtrueまたはfalseと書けばブーリアン型になる
配列型・・・データ集合体。new演算子でarrayオブジェクトのインスタンスを生成するか(後述)、[]で囲んでルール通りに記述すれば配列になる
オブジェクト型・・・データの集合体。{}で囲んでルール通りに記述すればオブジェクト型になる。
function型・・・実行できるプログラム要素を持つもの。function(){}で囲んでルール通りに記述すれば関数型となる。
特殊型・・・値が設定されていないなど

ちょっと特殊なのがfunction型とオブジェクト型
function型というのは呼び出された際に登録されたプログラムを実行し、実行した結果を返す。
例えば、
testFunc = function(){return 5;};
hoge = testFunc();
この場合、returnは値を出力する命令なのでhogeには5という数字が代入される。
function型の変数を呼び出す(実行する)場合は()を付ける。
この()は投げ値というのに使います。投げ値についてはあとでちょっとだけ書きます

あとfunctionの書き方には2種類ある。上記のような書き方以外にこういう書き方も出来る。
function testFunc(){return 5;}
この場合、最後の;はいらない

function型の変数は単体で実行できる(こっちの使用方法の方がメジャー)
たとえばfunction型の変数hogeがあった場合、
hoge();
と書かくと、格納されたプログラムが実行される。

58 ：VIPにかわりましてGEPPERがお送りします(東京都) [sage]：2012/03/01(木) 23:40:27.14 ID:sZkJnwvto

次にオブジェクト型について説明
オブジェクト型は複数の変数を格納しておける大きな箱みたいなもの。
オブジェクト型に格納された変数も型があり、例えばオブジェクト型の中にオブジェクト型を格納するなんてことも可能
もちろんfunction型も格納できるよ
オブジェクト型の格納されたデータにアクセスするには.(ドット)を使う
だからオブジェクト型のhogeって変数の中にあるuryaって変数(プロパティと呼ぶ)にアクセスする際は
hoge.urya
と記述する。

でwindow.onloadって何よって話だけど
これはブラウザ自体が最初から持っているオブジェクト型の変数windowのonloadプロパティをいじっている
function型の値を代入してやると、ブラウザの読み込み終了後に自動的に実行される。

bear.image = game.assets['hogehoge'];
についてだけどまず、assets[]は配列型の変数。
配列の中でも連想配列という少し特殊な配列。
これはただ、bearオブジェクトのimageプロパティにゲームオブジェクトのassets['hogehoge']プロパティに格納された
値を代入しなさいとそれだけです。

newはnew演算子という演算子(+-=なんかと同じ)。
指定したオブジェクト型変数のコピー(インスタンスという)を作る。
例えば弾幕シューティングゲームを作る際、画面上にある弾は全てがそれぞれに
・自分のY座標
・自分のX座標
・自分の進む方向
・自分のスピード
・自分の当たり判定
なんていう情報(変数)を持っている。
なのでまず元の設計図となる弾というオブジェクトを作ってそれをコピーして100個のオブジェクトで弾を管理する
といった場合に使用する

bear = new Sprite(32, 32);
Spriteという設計図をもとにインスタンス生成してbearに代入している。
32,32という数値があるけど、これは投げ値
オブジェクトにはnew演算子でインスタンスが生成される際に指定されたfunction(コンストラクタという)を実行する機能があり、
そのfunctionに値を投げてる。
もとのコードが分からないので何とも言えないけど、32*32のスプライトを作ってってことじゃないだろうか

new演算子はすっごい難しい。自分がプログラム半分挫折してるのはコイツのせい。
オブジェクトだけでプログラムを構築していく方法をオブジェクト指向といい、
これが理解できればJAVAやC#なんかも出来るようになるかも？

以上。長々とごめんなさい

59 ：VIPにかわりましてGEPPERがお送りします ：2012/03/02(金) 13:09:55.24 ID:IncFq0RCo

>>56-58
いえいえ、2chとは違って流れも遅いですしプログラムコーディング解説は長文になるのも仕方ないですよ
ありがとうございます

何となくは理解出来ました
varの用法はしっかりと理解させて頂きました

取り敢えずアナタの解説で察したことは「最適化なんて最初は無視だ！後からやれば良いんだおｗｗｗｗｗｗ」ですねｗｗ
これHTMLでも同じなんです、取り敢えずは汚いコードでも先ずは考えたデザインを表示するんです
new演算子が難しいのは察しました。例えば100個のコピーから100個全体の相互関係を意識し100個を個別に処理させるわけですから大変です。

難しいのならば、自分は初心者ですしnew演算子なんて使わないで100の変数を用意しちゃいますｗｗ
無駄に糞長いコードのなるでしょうが最適化は動くものを公開した後にゆっくりやれば良いのですｗｗ
プレイヤーにとってソースコードがどうなってるかなんて興味の範疇外ですからね
ゲームの見た目さえ変わっていなければ最適化したコードを後からこっそり更新してやれば良いのですｗｗｗｗｗｗ

いやはやプログラムは難しい、参考書籍が無いので尚更です。
まだまだ迷惑かけると思いますが今後もよろしくおねがいします。