ウェブで動く IchigoJam web に、タッチで操作できるソフトキーボードを追加しました。

IchigoJam web
スマホや、タブレットでもポチポチと入力して、プログラミング体験が可能です。Bluetoothキーボードをつないで快適、フルスクリーンモードにも対応。


PCでも新設の[ key ] ボタンを押すと、お試しできます!

2020/4/30 20時が応募締切の「日本ゲーム大賞U18部門」、IchigoJamで作った作品も、IchigoJam web で動くなら応募可能になりました!

日本ゲーム大賞U18部門
18才以下、チームは5名まで、小学生でも中学生でもOK!
2020年応募要項 – 日本ゲーム大賞 U18部門」に、IchigoJam web でもOKと記載!

・Windows、Macもしくは、Webブラウザ上で動くもの
 例)*.exe, *.app, HTML5 (*.html, *.js), Flash, .jar, IchigoJam Webなど
ゲームは、アイデア!
プログラミングして過ごそう! PCN仙台オンラインIchigoJam講座とミニテクニック

時間割ガチャに「英語で学ぶ IchigoJam BASIC by PCN宮崎」を追加!
自分で学ぼう!

テレビの世界を自在に操れることに衝撃を受けたファミコン。そのファミコンのゲームをつくりたくて買ってもらおうとしたファミリーベーシック。母親が買ってきたのは、MSX。

今こそ作ってみよう、ファミコンゲーム! 分かりやすい入門記事を発見「suzukiplan/mgp-fc: ファミコンで始める ~ 6502マシン語ゲームプログラミング」。 GitHubに公開された、サンプルゲーム「COSMIC SHOOTER」「Battle Marine」もステキ! MOS6502のマシン語は「モジュール 6502」を参照。


「Kawakudari for NES」src for NESASM on GitHub
画面、操作、音、ゲームの基本的なところをまず試すために「かわくだりゲーム for IchigoJam」をファミコンへ移植! RAM容量は、IchigoJamと同じ4KB(RAM2KB、VRAM2KB)、52色カラーの背景とスプライトを絶妙に使った省メモリ設計が見事!(参考、ファミコンのグラフィックスの省メモリ化テクニックとは? | POSTD
*NES = Nintendo Entertainment System (ファミコンの英語名)


JavaScriptで作られたファミコンエミュレーター、JSNESでも、サクッと動く。(nesファイルをダウンロードして、ドロップすればOK!)

sprite_put: lda #30 ; Y sta SP_CAT + 0 lda #236 ; cat sta SP_CAT + 1 lda #0; T sta SP_CAT + 2 lda #120 ; X sta SP_CAT + 3 rts

マシン語プログラムの一部、ネコ表示(IchigoJam的にかくと LC 120,30:?CHR$(236))。ファミコン、MSX、PanCakeにはあるけど、IchigoJamにはないスプライト。4byte使って座標とキャラクター番号、左右上下反転、パレットを設定すれば表示される。 6502のコンパクトな8bitマシン語が心地よい。


細かい挙動が気になったら、ソースコードで確認もでき、あれこれデバッグするためのツールを作ったりも、自由に自在なオープンソース!(src on GitHub


手軽にファミコンカセットにする方法、模索中。

links
- suzukiplan/mgp-fc: ファミコンで始める ~ 6502マシン語ゲームプログラミング
- はじめてのマシン語 - IchigoJamではじめるArmマシン語その1(上記が難しかったらこちらや BASIC から遊びましょう)
- 高橋名人緊急参戦! 高専や技術の先生向け、トラ技ジュニア読者限定セミナー 直伝プログラミング実習(ファミリーベーシック入門の著書!)

美しいDNAの二重螺旋、赤いワイヤーフレームバージョンを作成。
夢の赤い3D世界、HTMLとJavaScriptをちょっと使うだけで、思う存分、創り放題!

DNA - 二重螺旋VR 赤いワイヤーフレーム版
作り方は簡単、A-FRAMEの wireframe 属性を true にするだけ!(src on GitHub)


そう、この世界!


ルイージマンション3で唐突に登場、バーチャルブー!まさかのバーチャルボーイ!


博士からの入電、モバイルに進化したVBをかければ


赤い世界!


バーチャルボーイ、Windows95前夜の1995年7月に発売(自宅のVB)

変なゲーム好きだった現役高専生の頃、大興奮して遊んだあの頃を思い出します。バーチャルボーイ、多くのソフトを、店頭の「ご自由にお取りください」で保護! NINTENDO LABO VR KITでもバーチャルボーイ登場。同世代の活躍、うれしいです。


映った!(名作、レッドアラーム by T&E SOFT
でも、振動板が壊れてしまっているらしく、右目のみ

あの頃の夢、Oculus Quest を使って、作ってみましょう!
ハンドトラッキングが安定し、対応ソフトが増えれば出るか、廉価版!?
29,800円など、攻めた価格で登場すれば、今年早期の1000万台普及も夢じゃない。

食べ終わったラーメン、浮いている油をくっつけて遊びました。
上下左右に傾けて同じ数字をくっつけ育てて9を作るまでのステップ数を競う、Threes!風ゲーム「MAKE9」
IchigoJamとカラー&和音拡張ボードPanCake用の2種類作りました。

きっかけは、過去アップした動画の再生回数ランキング。12,000回再生されているこのゲーム。

ゲーム中毒から抜け出す方法 / IchigoJam BASICでThrees!風を創る
一瞬映るプログラム、探すのも手間なので、リメイク!


5年前からだいぶ高速化したので、5x5へとフィールドを広げてもサクサク、VIDEO3の拡大モードで快適!
プログラムはこちら、708byteと余裕あるつくりです(RUN on IchigoJam web

10 @MAKE9:VIDEO3:CLS:Z=45:S=0:F=0 20 FORI=0TO24:LCI%5,I/5:?CHR$(Z+(RND(3)+48-Z)*(RND(5)=0)):NEXT 40 K=INKEY():IF!KCONT 50 IF K=UP D=1:GSB@UD 51 IF K=DOWN D=-1:GSB@UD 52 IF K=LEFT D=1:GSB@LR 53 IF K=RIGHT D=-1:GSB@LR 80 GOTO40 100 @UD:FORI=0TO4:FORJ=3-2*(D=1)TO4*(D=1)STEPD:N=SCR(I,J):IFN=ZGOTO120 110 LCI,J-D:M=SCR():IFM=N?CHR$(N+1):F=F+(N=56)ELSEIFM=Z?CHR$(N)ELSEGOTO120 115 LCI,J:?CHR$(Z) 120 NEXT:NEXT:GSB@NEXT:RTN 300 @LR:FORI=0TO4:FORJ=3-2*(D=1)TO4*(D=1)STEPD:N=SCR(J,I):IFN=ZGOTO320 310 LCJ-D,I:M=SCR():IFM=N?CHR$(N+1):F=F+(N=56)ELSEIFM=Z?CHR$(N)ELSEGOTO320 315 LCJ,I:?CHR$(Z) 320 NEXT:NEXT:GSB@NEXT:RTN 500 @NEXT:N=RND(25):LCN%5,N/5:IFSCR()=Z?RND(3) 510 S=S+1:LC6,2:?"STEP:";S:IF!FRTN 600 LC6,4:?"NICE NINE!"

上下移動と左右移動をひとまとめにしてプログラムをコンパクトにしています。上下も左右も合わせる方法を考えてみるのも楽しいかも。 Z=45は、ハイフン(-)のキャラクターコードです。フラグFで9ができたら600行のクリア表示へ!

IchigoJam Advent Calendar 2019 の最終日に、ステキなPanCakeを使った記事掲載!
IchigoJamでPanCakeに三毛猫を表示する - Qiita
オシャレな16色カラーがでるIchigoJam用拡張ボードPanCake、せっかくなのでMAKE9もきれいにしてみましょう!

まずはPanCakeの実験!

よく使うミニモニター、黄色と白の2本ビデオ入力線がありますが、白が優先されます。なので、黄色をPanCakeに白をIchigoJamに挿して、IchigoJamのビデオ出力を止めるとモニターにPanCakeの映像が映ります。 F8で画面表示すると、IchigoJamの画面に戻ってきます。F10のSWITCHで切り替えるという技もあり!(テレビが2つ使える場合、デュアルモニターでの開発がより便利です)

背景画像を切替えるテストプログラムとスタンプ

10 VIDEO0:WAIT120 20 FOR I=0 TO 7 30 '?"PC IMAGE ";DEC$(100+I,2) 31 ?CHR$(128,4,4,I); 32 ?CHR$(128,6,20,0,0,73); 40 WAIT30 50 NEXT

30行、テキストで送信する方法と、バイナリで送信する方法がありますが、プログラムで使うときはバイナリが便利!

PanCakeの解像度 80x45 を考慮し、MAKE9のゲーム用の表示を実験します

1000 LET[0],S/1000,S/100%10,S/10%10,S%10:FORI=0TO3:?CHR$(128,6,20,46+I*8,19,#A6+[I]);:NEXT:RTN 1100 FORI=0TO24:N=SCR(I%5,I/5):N=#9B*(N=45)+(#A6+N-ASC("0"))*(N!=45):?CHR$(128,6,20,I%5*8+2,I/5*8+3,N);:NEXT:RTN 1200 ?CHR$(128,4,4,7);:RTN

ステップ数とフィールド表示ができました。5x5フィールドがちょうどぴったり!

これらのプログラムを表示させつつ、先のIchigoJam版MAKE9をLOADして、1000行以降に追加して、プログラムを整えてできあがり!ゲーム内容は全く一緒ですが、なんだかステキなゲームに見えますね!

こちら完成版「MAKE9P for IchigoJam BASIC & PanCake」

10 @MAKE9P:VIDEO0:CLS:Z=45:S=0:F=0 20 FORI=0TO24:LCI%5,I/5:?CHR$(Z+(RND(3)+48-Z)*(RND(5)=0)):NEXT 30 GSB1000 40 K=INKEY():IF!KCONT 50 IFK=30D=1:GSB@UD 51 IFK=31D=-1:GSB@UD 52 IFK=28D=1:GSB@LR 53 IFK=29D=-1:GSB@LR 80 GOTO30 100 @UD:FORI=0TO4:FORJ=3-2*(D=1)TO4*(D=1)STEPD:N=SCR(I,J):IFN=ZGOTO120 110 LCI,J-D:M=SCR():IFM=N?CHR$(N+1):F=F+(N=56)ELSEIFM=Z?CHR$(N)ELSEGOTO120 115 LCI,J:?CHR$(Z) 120 NEXT:NEXT:GSB@NEXT:RTN 300 @LR:FORI=0TO4:FORJ=3-2*(D=1)TO4*(D=1)STEPD:N=SCR(J,I):IFN=ZGOTO320 310 LCJ-D,I:M=SCR():IFM=N?CHR$(N+1):F=F+(N=56)ELSEIFM=Z?CHR$(N)ELSEGOTO320 315 LCJ,I:?CHR$(Z) 320 NEXT:NEXT:GSB@NEXT:RTN 500 @NEXT:N=RND(25):LCN%5,N/5:IFSCR()=Z?RND(3) 510 S=S+1:LC6,2:?"STEP:";S:IF!FRTN 600 GSB1030 1000 LC0,-1:?CHR$(128,4,4,7); 1010 LET[0],S/1000,S/100%10,S/10%10,S%10:FORI=0TO3:?CHR$(128,6,20,46+I*8,19,#A6+[I]);:NEXT 1020 FORI=0TO24:N=SCR(I%5,I/5):N=#9B*(N=45)+(#A6+N-ASC("0"))*(N!=45):?CHR$(128,6,20,I%5*8+2,I/5*8+3,N);:NEXT:RTN 1030 LC0,-1:?CHR$(128,6,20,58,29,9);:FORI=0TO1:I=INKEY()=10:NEXT:RUN

LC0,-1で画面表示を一時的にOFF。IchigoJam 1.4から対応したUART9で一時的に画面表示を止めてもOK!

PanCake、シリアル信号を送るだけでNTSCカラーと、4和音がでる拡張ボード、IchigoJamだけでなくいろんなマイコンボードにつなげて楽しめます!
JavaScript、大容量4KBのBASICと共に使う「IchigoCake」もどうぞ!

links
- PanCake
- PanCake の使い方 - イチゴジャム レシピ
- fu-sen/PanCake-COMMAND: PanCake コマンド一覧 command reference (Japanese)

なぜプログラミングに興味を持ったか?それは、間違いなく任天堂、ファミコンのおかげ。
友達が持っていたファミリーベーシックに衝撃を受け、なぜか届いたMSXがプログラミングはじめのいっぽでした。
懐かしいファミコン登場時のCMセルフオマージュしたファミコンミニCM on YouTube)

久々に起動しようとしたファミコンミニ、なぜか映らないのでIchigoJam化でもしようかと分解!

高級感あるモダンで余裕ある基板づくり。リセットボタンも豪華!


メインのCPUには青い熱伝導性のものがあって、全体をヒートシンクで覆う構造。
コントラーラー2つは基板へのコネクターでつながっています。このコネクター入手したい!(発見、1個50円即納10個パック
(参考、「ミニファミコン」で大きなコントローラーも使えるように改造してみました(ウェブ情報実験室) - Engadget 日本版


分解してつないだらなぜか普通に映るようになったので、元通りに戻すことに。


スーパーマリオブラザーズ4-2では壁もぐり。
昔のブラウン管のテレビ、モノによって端がどこまで映るか違ったんです。


大好きなゲーム、バルーンファイトのゲームC、バルーントリップ!
ふわふわする操作感でぎりぎりを避けていくのが気持ちいい。


「ふうせんたびゲーム」 操作はスペースキーのみ! RUN on IchigoJam web
せっかくなので記念にバルーントリップ風ゲームをIchigoJamで!
ゲームの構造は、かわくだりゲームと一緒です。いろいろ改造して遊んでみましょう!

10 CLS:CLT:Y=150:V=0 20 LC 31,Y/10:?CHR$(253); 30 LC 31,Y/10-1:?"O"; 40 R=5-TICK()/300%4 50 IF !RND(R) LC0,RND(22):?"*"; 60 WAIT 5 70 SCROLL 1 80 IF SCR(31,Y/10) GOTO150 90 IF SCR(31,Y/10-1) GOTO150 100 Y=Y+V:V=V+1 110 IF Y>220 GOTO150 120 IF Y<10 Y=10:V=10 130 IF INKEY()=32 V=V-10 140 GOTO 20 150 ?:?"GAMEOVER":?TICK()/60

何か壊れたらラッキー!
楽しく分解、もしかしたら修理できちゃうかも!?
だめでもOK、何かに再利用できて二度おいしい!

links
- 分解してグルーガンで再構築するジャンクアートは大人もOK - バラバラにして作って遊ぼう!ジャンクREメイクショップ - Hana道場 x ハードオフ

1985年、ベーマガの発行元でもある、電波新聞社から発売されたゲーム「デーモンクリスタル」が、Nintendo Switchで復刻! 敵を倒し、謎を解き、アイテムでパワーアップしつつ、鍵を取り、次のフロアへ。現代のゲームシステムにも脈々と受け継がれています。

暗闇から探し出す感じをIchigoJamのゲームにしてみました。
音を頼りに、すばやく宝箱を探す「たからさがしゲーム」

プログラムはシンプルに短く!

10 X=15:Y=15:CLT 20 A=RND(32):B=RND(22) 30 CLS:LC X,Y:?CHR$(251) 40 K=INKEY():IF K=0 CONT 50 X=X-(K=28)+(K=29) 60 Y=Y-(K=30)+(K=31) 70 P=ABS(X-A)+ABS(Y-B)+1 80 BEEP P,3:IF P>1 GOTO 30 90 LC X,Y:?CHR$(246),TICK()

カーソル上下左右で移動、移動するたびに近いほどに高くなる音を頼りに探しましょう。
見つけたらタイムが1/60秒カウンターの値で表示されます。

100 PLAY"O4L32CEG"

このように、クリア時の音をつけると画面がなくても遊べます!

慣れてきたら上級編。ランダムに宝箱の位置が移ってしまうシカケ

65 IF RND(10)=0 GOTO20

2人で対戦できるように改造してみるとか、楽しいかも?

IchigoJam ver 1.3 beta 5、INPUT時、RENUM時のバグを修正したアップデート
IchigoJam 1.3b05.zip

links
- The Demon Crystal
- YMCAT(迎霧狼慢)さんのツイート: "【デーモンクリスタル秘話】
> - 1981年ベーマガ創刊号掲載のゲームがマルチプラットフォームで復刻! IchigoJam版エイリアンフィールド、改造の手引き

ベーマガ再創刊号と共に復活「エイリアンフィールド 3671/ Alien Field 3671
こちらのゲーム、1981年のベーマガ創刊号に掲載されたゲームの一つ。
ドットイート型のアクションゲーム。
対応環境は、PC-8001。


なんとPC-8001用のカセットテープ、X68000のエミュレーター用5インチフロッピー付き!
カセットのA面にはデータ、B面には音源が入っているそうだが、読み出し機器手に入れなきゃ。


ベーマガ創刊号に掲載された原作「エイリアンフィールド」は、
ベーマガ再創刊号にリニューアルして再掲載&豪華復刻版も同時発売!
エイリアンフィールド 3671/ Alien Field 3671
for Windows (STEAM) / PC-8001 (カセットテープ or 打ち込み) / IchigoJam (打ち込み)


こちらPC-8001用エイリアンフィールド。STEAMのWindowsアプリとして動く!


「これからマイコンをはじめよう・・・と考えているきみに・・・」
当時の広告、東芝EX-80A(参考、マイコンEX-80 たけのこのタイタン/ウェブリブログ
コンピューターにはロマンあり!


エイリアンフィールド for IchigoJam
4ファイル分使う大作、打ち込みました!原作のドキドキ感がいい感じ!

バグを2つ発見
- エイリアンにまとめて当たると残機が一気に減ったり、マイナスになって終わらない
- 2機目から初期パワーが0になってしまう

自分で直しちゃうのがベーマガ流!こちら修正プログラム例です

'file 3 400 IF P==0 THEN O=1:RETURN 410 IF A>0 C=C+100:A=A-1 'file 2 420 IF O==1 AND L==1 THEN LRUN 0,200 430 IF O==1 AND L<>1 THEN LC L,22:?" ":L=L-1:A=20:P=50:O=0:GOTO 810


リマスタリングされて豪華になったエイリアンフィールドで遊ぶと、効果音を付けたくなりました。

'file2 50 PLAY"L16<CR4CR4CR4G4":WAIT120 420 IF O==1 AND L==1 THEN PLAY"L8AFDC4":LRUN 0,200 430 IF O==1 AND L<>1 THEN LC L,22:?" ":L=L-1:A=20:P=50:O=0:PLAY"G16C8":WAIT60:GOTO 810 805 PLAY"L16<CRCEG8":WAIT60 'file3 30 IF S=43 C=C+10:BEEP4 40 IF S=246 P=P+100:PLAY"L32<CEG" 410 IF A>0 C=C+100:A=A-1:PLAY"L32CGA" 620 PLAY"L32<FECEF":RTN

ファイル2が容量不足になるので、200-250行の4方向しか移動できないキー操作をこのように節約!

200 X=BTN(29)-BTN(28):Y=0:IF!XY=BTN(31)-BTN(30)


こちら、プレイ動画

ステージが上がるごとに速くしたり、敵を増やしたり、強くしたり、点数増やしたりするのもおもしろそう。 目指せ、IchigoJam版、単独販売!


ベーマガ再創刊号のHSP版、GitHubに発見!
コロン区切りで、BASICに似た言語 HSP で動く、エイリアンフィールド!
作者さんによる、GitHubにあるよ情報元に、発見mizukami/alienfieldBM
Windowsなら、こちらとHSPとダウンロードし、すぐ動かせる!改造できる!


パッケージ版、裏話トークDVDも付いてます!
エイリアンフィールド 3671/ Alien Field 3671


家電のケンちゃん主催、どんなものにもサインするよ会、多数持ち込まれる懐かしいベーマガ!
小学校2020年からのプログラミング必修化、ベーマガ世代のこども世代が、ど真ん中!
世代を超えて盛り上げる、新世代ベーマガ伝説の幕開けです!

links
- 『ベーマガ』&『エイリアンフィールド』復刻! 大橋編集長×水上氏×市川氏インタビュー 前編 - IGCC
- 『ベーマガ』&『エイリアンフィールド』復刻記念!大橋編集長×水上氏×市川氏 特別インタビュー 中編 - IGCC
- 『ベーマガ』&『エイリアンフィールド』復刻記念! 大橋編集長×水上氏×市川氏 特別インタビュー 後編 - IGCC

MS、Adobeと共にオープンデータ推進を発表した、SAP社とHana道場コラボで、経営とデータを学ぶワークショップ「ERPsimセッション」鯖江で開催!

ERPとは、Enterprise Resources Planning(企業資源計画)の略。多様化・複雑化する社会、データを活かした素早い判断が重要。


講師・サポートは、遠路東京から駆けつけてくれたSAPジャパンのみなさん!


SAPはドイツ本社、グローバルで売上約3兆円、全従業員は1万人に迫る勢い。SAPジャパン社長は福田さん! 企業をいい感じにするソフトを提供する会社です。


会社にはいろんな役割があります。ゲームで一通りやってみるっていいですね!
シミュレーション=ゲーム=学習。


参加者全員ノートパソコンを使ってERPsimにログイン、市場価格や、売れ行きなどいろいろデータを見ながら発注したり、値段を決めたり、最終利益額を争うシミュレーション。


1日が1分で進むシミュレーション20分で1ラウンド、ラウンド終了ごとに成績発表して作戦会議し3ラウンド。優勝は学生団体withチーム! 優勝賞品は、ダブル鯖江ご当地IchigoJam「MeganeJam」セット!

状況把握に手間取り、良い成績が残せなかったものの、コンピューターを使ったシリアスボードゲーム的に楽しみました。 学生はもちろん、企業研修にも良さそうですね。

もっとシンプルに商売の基本を遊びで学ぶ、こどもERP GAMEをIchigoJamでつくってみました。
所持金100円でスタート。商品は1種類、1つ原価10円。
販売価格を決め、宣伝し、売上で再度仕入れて12ターン終了後の利益を競うシミュレーション。


12ターン終わって73円の利益、という成績でした。

ERP GAME on IchigoJam のプログラムはこちら

1 'ERP GAME 10 G=100:S=0:P=10:R=50:T=1:E=12 20 CLS:LC0,5:?"ERP GAME":?:?"TURN:";T;"/";E:? 30 ?"NEDAN:";P:?"ZAIKO:";S:?"MONEY:";G:? 40 ?"1:NEDUKE":?"2:SHIIRE":?"3:SENDEN":?"0:NEXT":INPUT N 50 IF N=1 INPUT"P YEN:",P:IF P>100 P=100 60 IF N=2 INPUT"GENKA 10YEN N:",M:IF M*10<=G G=G-M*10:S=S+M 70 IF N=3 INPUT"KOKOKU YEN:",M:IF M<=G R=R+M:G=G-M 80 IF N!=0 GOTO 20 90 A=(15-P)*R/50+RND(R/10) 100 IF A<0 A=0 ELSEIF A>S A=S 110 ?"SALES ";A:WAIT30:?"URIAGE ";A*P;"YEN":WAIT60 120 G=G+A*P:S=S-A 130 IF T<E T=T+1:GOTO 20 140 ?:?"RIEKI ";G-100;"YEN"

コアは、90行の売れる個数を決めるアルゴリズム。
価格Pと知名度Rでベースが決まり、知名度Rを上限にしたランダムで売れる数を決めています。

アルゴリズムから乱数を排除したり強めたり、推移をグラフ化したり、自動発注化したり、商品増やしたり、倉庫代を徴収したり、あれこれ改造して遊んだり、遊んでもらったりしてみましょう。

IchigoSodaを使ったり、スマホ対応して、みんなで遊べるゲームにしたり、1ターンをリアルな1日とし、毎日ちょこちょこ遊ぶゲームにするのも楽しそう。

SAPのみなさん、楽しい時間、ありがとうございました!!

links
- SAPのERPが凄かった。リアルタイム経営シミュレーション体感セミナー開催しました | きらきら星のつぶやき☆
- SAPのERPが凄かった②!体感型ビジネスコンペディション開催! | きらきら星のつぶやき☆

4Kや8K、映像の進化は画面解像度だけでなく、時間解像度も進化してました。
通常、秒間60回、60Hzで更新される画面、なんと4倍の240Hzにも達しています。(実験では480Hzも!)

レースゲームなど、動きが激しいアクションゲームでのフレームレートはとても大事。
処理が重たいゲームで30fps(frame per second、秒間更新回数)なものは、操作の遅れが最大33ミリ秒(1秒/30)発生し、見た目にもカクカクぎこちなく見えて幻滅です。

初代ファミコンも60fps(正確には59.97fps?)のなめらかなでクイックな反応が楽しい。ゲームによっては敵が多く出すぎて「処理落ち」と呼ばれるフレームレートの低下も当時でも、よく知られた現象でした。

そんな重要な要素、フレームレートが4倍にもなった世界、ゲームに限らず未来を感じます。ブラウザ上でも手軽に実験できそうなので、JS用かんたんゲームフレーム「sg-game.js」を作って、その実現の時を待つことにしました。

サンプルアプリ「FPSChecker」は、その環境でのリフレッシュレートを表示しながら、ぐるぐる色を自身の角度を色相としながら回る円、タップまたはクリックするほどに回転周波数が変わります。 10Hzにしたときに残像で見える円の数、通常の環境では6ですが、12コ、14コ、24コと増えるはず。(480Hz環境なら48コ!)


FPSChecker」(スクリーンショットは60fps環境を模したもの)

IO-DATA製24.5インチ240Hz対応モニター「KH2500V-ZX2」を買って試してみます!
(「EX-LDGC251UTB」と同じ仕様のパッケージ違い)

今回、新設した正方形ゲーム用シンプルフレームワーク「sg-game.js」、ゲームづくりに、JavaScript言語によるプログラミング学習に、活用ください。


こちら、最小サンプル「min.html」をコピペし、min.htmlとして保存、ブラウザで開けば動きます!
PC、iPhone、iPad、Android、いずれもOK!

<!DOCTYPE html><html><head><meta charset="utf-8"/> <title>min</title> <script src="https://taisukef.github.io/sq-game/sq-game-r1.js"></script> <script>"use strict"; var gamemain = function(game) { game.loop = function(g, ts, dt, vw) { g.setColor(255, 0, 0); g.fillCircle(500, 500, ts % 1000); }; }; </script> </head></html>

正方形ゲーム専用フレームワーク sq-game.js の使い方
- gamemain メソッドをつくる
- 受け取った、game オブジェクトに 描画用ループ loop メソッドを設定する
- g は canvas、ts は時間、dt は時間差分、vw はバーチャル幅と高さ1000
- 必要なら、タップされた時の操作用に tap メソッドを設定する

こちらが、sg-game.js を使った、上記、FPSCheckerのプログラム!

<!DOCTYPE html><html><head><meta charset='utf-8'/> <title>FPSChecker</title> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta property="og:image" content="ss.png"/> <link rel="apple-touch-icon" href="icon.png"/> <script src="sq-game-r1.js"></script> <script>'use strict'; var gamemain = function(game) { game.tap = function() { if (hz == 10) hz = 0.1; else if (hz < 0.95) hz += 0.1; else hz++; }; var hz = 1; var th = 0; game.loop = function(g, ts, dt, vw) { g.setColor(0, 0, 0); var fh = 60; g.setFontSize(fh); var s = "" + fixfloat(hz + 0.05, 1) + "Hz"; g.fillText(s, 10, 10 + fh); var s = "FPS: " + Math.floor(1000 / dt) + " / " + fixfloat(dt, 2) + "ms"; g.fillText(s, vw - g.measureText(s).width - 20, 10 + fh); th += dt / 1000 * Math.PI * 2 * hz; var r = vw / 4; var x = vw / 2 + Math.cos(th) * r; var y = vw / 2 + Math.sin(th) * r; var cr = 90; var rgb = hsv2rgb(th / (Math.PI * 2) * 360 + 90, 0.8, 0.8); g.setColor(rgb[0], rgb[1], rgb[2]); g.fillCircle(x, y, cr); g.setColor(255, 255, 255); var fh = 80; g.setFontSize(fh); var s = "" + fixfloat(hz, 1); g.fillText(s, x - g.measureText(s).width / 2, y + fh / 4); }; }; </script> <style> a { color: gray !important; } </style> </head> <body> <div id="src"> FPSChecker<br> APP: CC BY <a href=https://fukuno.jig.jp/1686 target=_blank>fukuno.jig.jp</a><br> LIB: CC BY <a href=sq-game-r1.js target=_blank>sq-game.js</a><br> </div> </body> </html>

ちなみに、映画のフレームレートは秒間24コマ、CGはきれいになってもなかなか変わりませんね。
8Kで秒間240コマの映画とか、未知の体験も楽しみです。

国民の健康は、富の源泉。スポーツ推進事業、国体。平成最後の国体が、今週末福井で開会式!
・・・といっても、すでにいろいろと競技が始まっている不思議。
ハンドボール会場への永平寺シャトルバスでもオープンデータとIoTが活躍!


福井国体 ゲーム会場マップ
福井国体障スポの全競技会場(福井県提供のオープンデータによる)をマッピング!
せっかくの機会、お近くの競技会場をチェックするのもいいかもですね!


しあわせ元気 お役立ち情報アプリ / 福井国体障スポ」もあわせてどうぞ!


鯖江駅に設置された福井高専学生開発のカウントダウン、いよいよあと1日(9/28朝)


福井県内各地でいろんな「はぴりゅうくん」を見ます(こちら鯖江駅前)


鯖江といえば、メガネ、つつじ、レッサーパンダ!
つつじは咲いていませんが、レッサーパンダがかわいい西山公園と、鯖江のメガネが数千本!めがね会館はオススメです!

links
- 2018「福井しあわせ元気」国体・障スポ
- 福井県オープンデータ(福井国体関係含む、その他)
- 国体と障害者スポーツの初融合!福井国体・障スポ やわらか競技一覧アプリ

Tweet
クリエイティブ・コモンズ・ライセンス
この作品は「Creative Commons — CC BY 4.0」の下に提供されています。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / RSS