[HTML5でゲームづくり]フラッピーバード04(評価)

前回までで一通り動くようになりましたが、改善するべき点があるので、どうするべきかを考えていきます。

①スペースキーが正常に動作しない
ブラウザにもよりますが、ボタンを押したとカーソルが離れていないと、スペースキーでそのボタンが押されてしまう。
改善策：他のキーを割り当てる。
　　　　スペースキーが押された時はボタンを押した時の動作をさせないようにする。

②Canvas上の文字が見づらい
改善策：文字の後ろに白い四角を描画する。

③筒とあたってもGameOverしない
現状では筒の左側と円の中心の当たり判定しか行っていない。
改善策：当たり判定の方法を考えなおす。

④地面衝突でのGameOver未実装(2016/7/14追記)
改善策：実装する。(or仕様にする)

これらの改善策は気が向いた時に改善し、新しいページに載せる予定(未定)です。


<<前(実装)

[HTML5でゲームづくり]フラッピーバード03(実装)

前回作ったコードをこのページに埋め込みます。

※reset+start  : リセットしその後はじめからスタート
※stop/restart : 一時停止と再開
※Canvasをクリックするかスペースキーを押すとジャンプします。
　　ただし、スペースキーを使うと正常に動作しないブラウザもあります。



<<前(制作)　次(評価)>>

[HTML5でゲームづくり]フラッピーバード02(制作)

前回決定した設計に従ってコードを書いていきます。

作っているときに気づいたことだがスペースキーでジャンプさせたほうがPCでは操作しやすかったのでその機能も追加した。

<script> //グローバル変数の用意 var py,vy,co,t,ts,st,po; var bh=30;bw=5;g=0.5; var wall; wall = new Array(6); for(x=0;x<6;x++){ wall[x] = new Array(2); } window.onload = function(){ //最初に行う処理 reset();ts=5; } function reset(){ //ゲームをリセットする処理 vy=0;py=150;t=0;po=0; for(i=0;i<6;i++){ j=randN(1,6); wall[i][0]=j; wall[i][1]=8-j; } resetc(); } function resetc(){ //canvasを描画し直す処理 var canvas = document.getElementById('canp'); if ( ! canvas || ! canvas.getContext ) { return false; } var ctx = canvas.getContext('2d'); ctx.clearRect(0,0,canvas.width,canvas.height); drawObj(); ctx.strokeStyle = 'rgb(0,0,0)'; ctx.strokeRect(0, 0, canvas.width, canvas.height); }function drawObj(){ //Canvasに筒や丸(鳥)を描く var canvas = document.getElementById('canp'); if ( ! canvas || ! canvas.getContext ) { return false; } var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.fillStyle = 'rgb(200,0,0)'; ctx.arc(50, py, 5, 0, Math.PI*2, false); ctx.fill(); ctx.strokeStyle = 'rgb(0,100,0)'; for(i=0;i<6;i++){ if(i*100-t<-50){ ctx.strokeRect(i*100-t+600, 0, bw, wall[i][0]*bh); ctx.strokeRect(i*100-t+600, canvas.height, bw, -wall[i][1]*bh); }else{ ctx.strokeRect(i*100-t, 0, bw, wall[i][0]*bh); ctx.strokeRect(i*100-t, canvas.height, bw, -wall[i][1]*bh); } } ctx.font = "20px 'MYMBOL'"; ctx.fillStyle = 'rgb(0, 150, 150)'; ctx.fillText("Point:"+po,5,30); }function drawGO(){ //GameOverをcanvasに描く var canvas = document.getElementById('canp'); if ( ! canvas || ! canvas.getContext ) { return false; } var ctx = canvas.getContext('2d'); ctx.font = "50px 'MYMBOL'"; ctx.fillStyle = 'rgb(250, 150, 0)'; ctx.fillText("GAME-OVER",100,150); }function countdown(n){ //ゲーム開始前のカウントダウンの数を描画する。 var canvas = document.getElementById('canp'); if ( ! canvas || ! canvas.getContext ) { return false; } var ctx = canvas.getContext('2d'); ctx.font = "50px 'MYMBOL'"; ctx.fillStyle = 'rgb(250, 150, 0)'; ctx.fillText(n,225,150); } function loop(n){ //処理の中心となる部分 if(n==0){ if(ts!=5){ reset(); } st=0;ts=3; setTimeout("loop(1)",30); }else{ if(ts>0){ resetc(); countdown(ts); ts--; setTimeout("loop(1)",1000); }else{ t++; t=t%600; movep(); check(); resetc(); if(st==0){ setTimeout("loop(1)",30); }else if(st==2){ drawGO(); } } } }function jumpy(){ //上向きの速度を増やす vy-=15; }function movep(){ //現在の速度や位置に合わせて丸(鳥)を動かす vy+=g; py=parseInt(py+vy); if(py<0){ py=0;vy=0; }else if(py>300){ py=300;vy=0; } }function stopstart(){ //一時停止と再開の処理 if(st==0){ st=1; }else if(st==1){ st=0;loop(1); } }function check(){ //当たり判定と画面外の筒のを作り直す for(i=0;i<6;i++){ if(i*100-t==-50){ j=randN(1,6); wall[i][0]=j; wall[i][1]=8-j; }else if(i*100-t==50){ if(wall[i][0]*bh>py){ st=2; }else if(300-wall[i][1]*bh<py){ st=2; }else{ po++; } }else if(i*100-t+600==50){ if(wall[i][0]*bh>py){ st=2; }else if(300-wall[i][1]*bh<py){ st=2; }else{ po++; } } } } function randN(min,max){ //指定された最小値から最大値の中から整数をランダムで生み出す var a; var i; for(;;){ a=(Math.random()*(max+1))%(max+1); if(min<=a&&a<=max+1){ for(i=min;i<a;i++){ ; }i--; return i; } } } document.onkeydown = function (e){ //キーボードの変化を取得する // InternetExplorer 用 f=e; if (!e) f = window.event; f=f.keyCode; // window.alert("e="+e); if(f==32)jumpy(); if(e!=null){ e.preventDefault(); e.stopPropagation(); }else{ event.returnValue = false; event.cancelBubble = true; } }; </script> <canvas id="canp" width="500" height="300" onClick="jumpy()"></canvas> <br> <input type="button" value="reset+start" onClick="loop(0)"> <input type="button" value="stop/restart" onClick="stopstart()">

実際に動かせるものはものは次回に公開します。

<<前(設計)　次(実装)>>

[HTML5でゲームづくり]フラッピーバード01(設計)

タップして上下から伸びる管の間を通り抜けるゲームですが、今回はどんなデバイスでもと遊べるように、HTML5で作りたいと思います。

HTMLを使ってゲームを作るときは、imgタグを動かすことでゲームを作っていく方法や、canvasを使って作っていく方法などがありますが、今回はcanvasを使う方法で作りたいと思います。

設計は上の図のようにし、Canvasが押された時に速度をプラスします。各配列が管の長さ情報を表し、時間の経過とともに各配列と対応する管が黄緑の向きに移動するようにします。また、赤い丸は鳥にあたる部分ですが、それの上下方向の速度と座標情報を付けておきます。

次(制作)>>

[録画サーバー10]運用経過

録画サーバーを運用し始めてから１ヶ月以上経つのでどのような不具合が出てきたかを書いていきます。

①PX-W3PEのドライバがエラーを出し録画できなくなる。
開始一週間後くらいになりました。再起動で治り、再発はありません。

②RaspberryにつけているWiFiアダプタのGW300Sが２日程度で停止する。
こちらも再起動で治りますが、何度やっても５日以上持ちません。なのでWiFi経由で視聴するときのみRaspberryを起動しています。

③突然録画できなくなる
最近(6月中旬)なりました。ある番組の途中で録画が止まり、続く番組も撮れていませんでした。しかし、時間を開けてから録画してみると録画出来ました。また、ドライバなどがエラーを出した痕跡はありませんでした。同じ番組がレコーダーでは撮れていたので、受信レベルの低下は考えにくいです。

<<前　次>>

[録画サーバー09]遠隔視聴編

このままでは本体からしか視聴できないのでスマホや他のPCからも見れるようにします。ただし、家のLAN内のみです。

ここで発生した問題は２つあり、
ひとつ目はWifiアダプタのGW300Sのせいでブルースクリーンになってしまう問題です。これは一度しか起こっていないので詳しい原因は不明ですが、安定性を重視したいのでなんとかしなければならない問題です。
ふたつ目はWindowsをセキュリティソフト無しで使い続けるという問題です。

これらの問題を解決するため以下の方法を検討してみました。
①仮想マシンにWifiアダプタを繋ぎ、サーバーにする。
これはPentium n3700にVt-dがないので通信速度が遅くなり、実用に耐えうるものではありませんでした。
②Wifi子機を買い、有線接続をする。
子機を買うコストとWindowsのセキュリティーソフトなしの問題がそのままなので不採用。
③RaspberryPiと有線接続する。
今回はこの方法を採用した。

どのようになっているかは下の通りである。
WiFi- -GW300S-Raspberry--(有線LAN)--録画サーバ
録画サーバにあるエンコード済みフォルダをLAN内共有設定して、Raspberryの/var/www/hoge/にsambaでマウントする。また、Raspberryにはルータ機能を入れていないので録画サーバは直接外とつながることはありません。

このようにするとWiFiに接続できるデバイスはRaspberryにブラウザでアクセスするだけで録画したものを見ることができます。


<<前　続き>>

[録画サーバー08]エンコード自動化編

前回エンコードの手段が決まったので、今回はそれを自動で行うようにします。

EDCBで設定すれば録画後自動で開始することは可能なのですが、このマシンは非力なのでエンコードが録画の妨げとなりそうだったので、私は録画をしないであろう午前9:00からエンコードを開始するようにしたいと思いました。そこで自分で下記のような動作をするプログラムを書くことにしました。

①9:00を過ぎてから動作を始める(Sleepと時間取得の繰り返し)
②まだエンコードされていないファイルを探す(指定した録画・エンコードフォルダの全ての階層をチェック)
③録画フォルダ側に新しいフォルダがあればエンコード側にも同名のフォルダを作る
④HandbrakeのCUI版をコマンドで実行しエンコード
⑤番組内容などを記録したファイルをエンコード側フォルダーにコピー

今のところ録画データを削除する機能はつけていません。なぜなら、エンコードに失敗してしまう可能せもあるからです。なので録画可能容量は定期的に確認します。


<<前　続き>>

[録画サーバー07]エンコード編

前回までで自動録画ができるようになりましたが、そのままだとファイルサイズが大きいのでエンコードをして圧縮します。

そのままのデータ(mpeg2ts)では1時間で4GB以上のサイズです。レコーダー(2012年のDiga)の場合はAVC-HD(h264)で15倍録画をすると1時間で0.7GB程なのでこれを基準にし、さらにレコーダーよりも高画質になることを目標にします。
フリーソフトの中から今回はAviutilとHandbrakeを試してみました。
また、pentium n3700にはQSVと呼ばれるハードウェアエンコーダーがありエンコード時間が短くなると思われるのでそれも使ってみました。
さらに、圧縮規格はAVC-HD(h264)の後継であるHEVC(h265)も検討します。HEVCはAVC-HDと比べ約半分のファイルサイズとなると言われていますが、再生機器が普及していないことやデコード・エンコードが遅いというデメリットもあります。ただし、アプリケーションを使うことでWindows8などのOSでのサポートがない場合でも再生は可能です。 また、pentium n3700等のBraswellではHEVCのQSVエンコードはできませんが、SkylakeではQSVエンコードができるようになります。

1分だけ録画したmpeg2tsファイル(102MB)を圧縮し、画質エンコード時間、ファイルサイズを比較していきたいと思います。ただし、1分の録画なのでファイルサイズの目安は12MB、エンコード時間の目安は2分程度とします。ただし、優先順位は'サイズ>画質>時間'としていきたいと思います。

①Aviutil+QSV(h264)
そのままの画質(1080i)でエンコードするとサイズが20MBになり、時間は4分程度。画質は(劣化の度合いが)普通だった。しかし、遅すぎることから常用はできないと思った。

②Aviutil+ソフトウェアエンコード(h264)
QSVよりも遅くなると思われるので行わなかった。

③Aviutil+ソフトウェアエンコード(h265)
②よりさらに遅くなると思われるので行わなかった。

④Handbrake+QSV(h264)
そのままの画質(1080i)の時、サイズが60MBで時間は16秒だった。
1080i→720pにしてエンコードするとサイズが25MBになった。時間は30秒程度。画質は良くなかった。
更にクォリティーを20→25(数が大きいほど低画質低容量)にすると、サイズが18MBで時間は30秒だった。この時サイズの面は良く画質は動きの速いシーンで悪化が顕著だった。

⑤Handbrake+ソフトウェアエンコード(h264)
④の結果から、そのままではサイズが大きそうなので、1080i→720pでクォリティーを20→25にしてエンコードするとサイズが13MBになった。時間は50秒程度。画質は(劣化の度合いが)普通だった。

⑥Handbrake+ソフトウェアエンコード(h265)
そのままの画質(1080i)の時、サイズが18MBだったので、確かによく圧縮できていると思った。時間は3分30秒程度。画質は良かった。
ただし、この時に速度をVeryFast→UltraFastにしておかないとエンコード時間が10分以上かかってしまいます。

上記の結果を踏まえると、Handbrakeのほうがエンコード速度が圧倒的に速かったのでHandbrakeを使うことにした。
また、QSVは速度はありますが画質が良くなかったのでやめます。
残りは④と⑥ですが、たしかに速度は大切ですが、録画サーバーは月に500円以上の電気代がかかりますが、最近は同じような値段で番組を見放題のサービスがあるので、そのようなサービスよりも画質が良いということは重要だと思うので、⑥のHandbrake+H265ソフトウェアエンコードを使おうと思います。

最終的には細かくHandbrakeの設定をいじり、
Detelecine:custom
Deinterlace:fast
x265Preset:Ultrafast
Quality:20
とするのがファイルサイズ、エンコード時間、画質のバランスが良いのではないかと思いました。

因みに、同じ1分の動画でも実写をエンコードするとエンコード時間が3分〜4分で容量が20MB程なのに対し、アニメーションではエンコード時間は2分程度で容量は10MB程だった。

[追記 2017/01/28]
Pentium-n3700(TDP 6W)の代わりに i5-6500(TDP 65W)を使ったところ、エンコード時間を約1/4にすることができたが、やはりワットパフォーマンスはn3700が上のようだ。


<<前　続き>>

[録画サーバー06]PX-W3PEを使う(Windows)

WindowsでPX-W3PEを使うには、Wikiを参考にしました。

下記のWikiにある手順のとおりに、ドライバーとTV-testを導入しますが、TV-Rockに関しては使えるものがなかったので、録画はEDCBを使います。
http://www22.atwiki.jp/px-w3pe/pages/1.html

TV-testを導入した時外付けICカードリーダーがうまく認識せず、B-CASが使えなかったので、上記のWikiを参考にPX-W3PEのカードリーダーを使えるようにしました。

EDCBに関してはじょうきのWikiだけでなく下記のサイトも参考にしました。
http://aviutl.info/epgdatacap_bon/

これでひとまず視聴・録画ができるところまで来ました。


<<前　続き>>

[録画サーバー05]OS変更編(DreamSparkを利用してWindowsを入手)

前回までlinuxでなんとかしようとしましたが出来なさそうなので、他の方法を考えていると学生ならばDreamSpark(Microsoftの学生・教育機関向けサービス)を利用すればいくつかのMicrosoft製品を使えると分かったのでWindowsをOSに使うことにしました。

調べてみるとサーバーに使えそうなOSは、WindowsEmbedded8.1IndustryProかWindosServer2012でした。しかし、WindowsServerはセキュリティソフトを使わずに運用するのは危険そうなので、今回はWindowsEmbedded8.1IndustryProをサーバー機能無しで使うことにしました。

まずDreamSparkのサイトから学校のメールアドレスを使って登録し、DLして調べながらUSBでのインストールディスクを作り、その後サイトに戻りプロダクトキーを取得してインストールします。
*追記:2016秋にDreamSparkはMicrosoftImagineに名前を変えました。

実はこの時SanDiskの120GBのSSDを5000円で購入し、そこにWindowsをいれてあります。また、3TBのHDDはubuntuの部分とデータの部分を別パーティションにして、データ部分はNTFSでフォーマットしておきます。するとWindowsではデータの部分のみが使えますし、HDDだけでもubuntuが起動します。(あまり意味がないかもしれませんが)

ドライバ関係のインストールですが、Windowsの方では特に問題はありませんでした。ネットで調べてドライバを入れるだけでした。


<<前　続き>>

[録画サーバー04]Linux用ドライバー導入編(PLEX PX-W3PE)失敗

次にPX-W3PEのLinuxドライバを入れるのですが、結論から言えば挫折しました。

まずPX-W3PEにはLinux用のドライバがRED-HAT系のもしかありません。よって現在のubuntu環境では、動作しません。
仕方がないのでRED-HAT系も使えばなれるだろうとCentOSを使うことにしました。しかし、CentOS7.0はUSBでのインストールに難があり(私は光学ドライブを持っていないので)インストールできませんでした。そこでCentOS6.x系を使おうと思ったのですが、こちらはpentium n3700のグラフィックに対応していないのか表示できませんでした。ただし、CentOS6.x系で運用している人(価格.comのn3700mのレビュー)もいました。なので、出来るかもしれませんが、自分にとって慣れないRED-HAT系OSということもあり、諦めました。
次に考えた方法は、ubuntuでCentOS7.0の仮想マシンを動かし、PCIeのPX-W3PEを動かす方法でしたが、n3700はVT-dに対応していないためできませんでした。

とういうことで私の環境でPX-W3PEをLinuxで使うことは出来なさそうです。

ここからの解決策は
・マザーボードをCeleron J1900/J1800の載ったものにする(9000円程度)
・OSをWindows系にする(15000円程度)
・中古のPT3を買う(20000円程度)
・PT4の発売を待つ(発売時期不明)
・追記:ApolloLake系のCPUならばVT-d対応なので、それを買う(おそらく9000円〜)

どのようにしたかの詳細は次回にしますが、結論から言うとWindowsにしました。


<<前　続き>>

[録画サーバー03]Linux用ドライバー導入編(PLANEX KATANA GW-300S)

ルーターとPCがある部屋は(光回線とアンテナ線の関係で)別なので有線LANではつなげられないのでWiFiを使います。最初はbuffaloの小さなWifiアダプタを使っていましたが、通信が不安定で時々切れるので、もう少し感度のいいものに変更します。
調べてみると"PLANEX KATANA GW-300S"が安くて感度が良さそうで且つLinuxドライバがあるということなので購入しました。

ところが、buffaloのアダプタは挿せば使えたのですが、KATANAは使えませんでした。しかし、ここまでは想定内です。「公式サイトからドライバを落としてinstall.shを実行すればいいOK」と思っていたからです。しかしながら、こいつを実行してもエラーが出てインストールできません。調べてみると公式Linux用ドライバは使えないとわかりました。

そこで下記のサイトを(順に)参考にしてインストールします。
http://nodemand.hatenablog.com/entry/2015/03/14/020510
http://nodemand.hatenablog.com/entry/2015/03/20/005328
http://nodemand.hatenablog.com/entry/2015/03/20/142404
私の環境ではコンパイル時にエラーが出ましたが、C言語の知識で対応出来ました。
※文字列比較の関数が使えないというエラーだったので、ASCIIコードで大文字小文字の区別をしないようにした文字列比較関数作り、コードを変更

最後にインストールに成功したら、install.shのある層とその下をtarで閉じて今後他のdebian系Linuxで使えるようにします。



<<前　続き>>

[録画サーバー02]OS(linux)導入編

ハードは揃ったので今度はOSをインストールしていきます。

安さを求めるのでLinuxを使おうと思います。

私はdebian系のLinuxしか使ったことがないのでその系統にします。

最初の候補はubuntu14.04LTSでした。ところが、LiveUSBを作ってbootすると画面がおかしく使い物になりませんでした。調べたところpentium n3700などのBraswell系の内蔵グラフィックは15.x以降にしか対応していないらしいです。

仕方がないのでubuntu15.10にしました。しかし、LiveUSBをを作ってbootしようとするとうまく行きませんでした。(原因はわかっていません。私のミスかもしれません。)

ubuntuはダメなのかと思いdebian7.0に切り替えましたが、うまく行きませんでした。

流石におかしいと思い、"ASRock n3700m"のbiosを確認してみるとグラフィックがPCIeになっていました。これをCPUのものに変更し、ubuntu15.10,debian7.0を試しましたがまたもやうまく行きませんでした。

もうダメかと思いましたがダメ元でubuntu15.04日本語版をLiveUSBから起動するとうまくいきました。もうどこが悪くて今までうまく行かなかったのかわからないですが、
ubuntu15.04日本語版であればインストールできるとわかりました。

さて、ubuntu15.04はサポート切れなのでアップデートしてubuntu15.10にしました。こちらは成功しました。
ここまで１週間くらいかかりました。



<<前　続き>>

[録画サーバー01]ハードウェア編

今年(2016)の春に暇ができたので録画サーバーを立てることにしました。
ということでハードウェアから選んでいきます。

今回のポイントは、省エネと安さです。
(できればコンパクトも)

(1)CPU+MB
省エネと安さ重視と言っても、録画に失敗しない程度の能力も必要です。
なので今回は4コアのatom系CPUを使うことにしました。
候補はpentium n3700 か celeron n3150 です。
性能を調べるとn3700とn3150はほぼ変わらない性能だったので、n3150でminiITXマザーボードのものを買おうと思ったのですが、プラス1000円くらいでn3700のmicroATXマザーボードのものが買えそうでした。なのでどちらにするか悩みましたが、こんかいはmicroATXのほうが拡張性が高いと自分を説得して"ASRock n3700m"を買いました。

(2)メモリ
あまり容量は多くなくても大丈夫なのですが デュアルチャンネルでないと再生時にコマ落ちすると聞いたので２枚にすることにしました。次に容量ですが、最初は2GB+2GBの4GBにしようと思ったのですが、4GB+4GBにすれば仮想マシンも動かせるようになるのではかと考え、最終的には4GB+4GBの8GBになりました。（実際のメモリ使用量は多くて3GBほどでしたが...）
メーカーは取り敢えず永久保証がつくところにしたので"CFD W3U1600HQ-4G"を買いました。

(3)ケース
何でも良かったのですが加工が悪くて怪我をするのは嫌だったのでそのような話を聞かない"IN-WIN IW-EM048"にしました。

(4)電源
サーバーとして使うので効率がよく、故障しにくいものが良いと思いましたが、高くても壊れてしまうかもしれないので、80PlusGoldの中で安かったEnermax　ERX430AWTに三年間保証を付けました。

(5)記憶領域
3TBのHDDが安くなり2TBのものよりお得感があるので3TBのもの。
耐久性や静音性などからWDのGreen(Blue)にしました。

(6)チューナー
当初の予定ではPT3を使う予定でしたが、調べてみると生産終了で売り切れとわかりました。なので今回は"Plex PX-W3PE"にしました。(これのせいであとで大問題が起こりました...)

(7)その他
アンテナ線とか分配器とかです。


合計で５万円くらいでした。この値段だとレコーダーが買えそうですが、拡張性などを考えれば個人的には安いのかなと思っています。


　続き>>

はじめに

今のところ(2016年6月)このブログはlinux,プログラミング,電子工作などの科学技術系統のことについて書こうと思います。