SDGS、一番最初の目標「貧困をなくそう」を達成するにはどのような社会にするといいのでしょう?
富の分布のシミュレーション
平等にコインを持った状態でスタートし、1日に1度、ランダムに出会って2人が五分五分で1枚だけコインを交換するものを繰り返すと、富が大きく偏ります。 1枚ではなく、所持コインの10%、20%などと大きくするほどに、偏りがでる速度が増します。100%、つまり総取りにするとあっと言う間に世界で1人だけが全部持っていってしまうので、すべてはその中間ということです。

じゃんけんゲームシミュレーションsrc on GitHub
JavaScriptで作ったかんたんなシミュレーションツールです。

- 勝敗がランダムではなく実力で決まるとしたらどうなるでしょう?
- お金持ちから税金を徴収し、所持金0になった人に分けるとどうでしょう?
- 勝負に参加しない人がいるとどうなるでしょう?
- 1日に1勝負ではなく1秒に1勝負発生するとしたらどうなるでしょう?
- 定期的にリセットしてみてはどうでしょう?

こどもパソコンIchigoJamでもシミュレーション可能です。

100 FORI=0TO99:[I]=100:NEXT 110 T=0 120 FORN=0TO99 130 M=RND(100) 140 IF N=M GOTO130 150 IF N<M B=[N]/10 ELSE B=[M]/10 160 R=RND(2) 170 IF!R [N]=[N]-B:[M]=[M]+B 180 IF R [M]=[M]-B:[N]=[N]+B 190 NEXT 200 T=T+1 210 ?T 220 FORI=0TO99:?[I];",";:NEXT 230 GOTO120

社会を形作るルールを作るのは私達。
理想のルール、探りましょう!

links
- 成功を決めるのは「才能」でなく「運」 驚きの研究結果発表 | Forbes JAPAN(フォーブス ジャパン)
- 富の分布のシミュレーション
- 「格差は不当」と憤る人が気づいてない過酷な摂理 | リーダーシップ・教養・資格・スキル | 東洋経済オンライン | 社会をよくする経済ニュース

7/22海の日に、マリンデブリ問題にシビックテックで挑む!
福井県庁と美浜町の共催によるアイデアソン「美しい浜アイデアソン」に参加しました。

オンライン開催となりましたが、せっかくなので訪れた美浜町役場。


主催者の福井県庁、美浜町役場、お題提供の方々!


美浜の海 - VRふくい
ステキな海岸、さすが美浜!(福井で2つしかない珍しい交差点、美浜町ラウンドアバウトも写ってます)


と思ったら、海岸では無いところにはマリンデブリ、不法投棄され漂流、漂着した海洋ゴミがありました。 お題提供の方の話の通り、きれいな海岸の裏には多大な労力と、費用がかかっています。


福井県の美しい浜代表、水晶浜に到着。砂浜でアイデアソンスタート!今回5チームに分かれました。


さすがに炎天下で続けるのは無理そうだったので、お昼休憩に移動、美浜原子力PRセンターにカフェ発見。


おいしかった、へしこ茶漬け!

お昼後、アイデア検討を続け、スライドにまとめて、15時から発表!
発表時間は各チーム6分。審査の結果、参加していたBチームが優勝!

集合写真 by 福井県×デジタル・トランスフォーメーション


xGC - garbage collection anywhere
マリンデブリの7割以上は地上で不法投棄(ポイ捨て含む)によるものとのこと。海だけの問題ではないわけです。 押さえて置きたい、ゴーストフィッシング、東日本大震災後いまだ漂うガレキ、海外から漂着する危険ゴミ問題。 Code for FUKUIのGitHubにまとめました。

製造から回収まで、ぐるっと資源を回すのが筋。不法投棄されたものを回収、回復する費用をきちんと捻出できるモデルにしなくてはいけません。 アイデアソンでは、地域通貨やポイントなどで、拾う人へのメリットあるようにとディスカッションされましたが、問題はその原資。

原資がなくても、ゴミ拾い自体を楽しんでしまうのがゲーム化するプラン。 ゴミ拾い後の分別にコストがかかるなら、そもそも特定のごみのみ拾うスポーツに仕立ててしまいましょう!

ペットボトルのキャップを集めて、一定エリアにばらまき、早く全部拾ったもの勝ちのゲームで対戦してみると楽しいかも!?

Treasure Hunting
スマホゲームにもしてみました(PCでもマウスで遊べます)。ごみ1つのステージから、10コまでの10ステージのタイムを競えます。 触ったら即アウトな危険ゴミを追加するのもいい学習になって良いかも。

過去の様々な実験によると、最も効果が高いものは不法投棄・ポイ捨てへの罰金・罰則とのことでした。ポイ捨て条例作って原資を確保するのもありかもしれません。


イベント終了後、美浜原子力PRセンター内、見学。凄まじい原子力のイメージとは違ったかわいい内部。


お隣敦賀市、高速増殖炉もんじゅ近くのテイクアウトカフェ「Calm」は残念ながらおやすみの日。

不法投棄ごみ問題、Code for FUKUI にて、継続的にチャレンジしましょう!
xGC - garbage collection anywhere
コメントや、アイデア投稿、お待ちしています!

IO-DATAの240Hz駆動ディスプレイを活かしたゲームを求め、crisp-game-libを時間軸ハイレゾ対応。 ゲーム毎の設定optionsに、highFps:trueで、通常1/60秒単位にupdateされるところ、パラメータdtに1/60を単位とした小数が渡るように改造。2ゲームほど移植してみました。

smilyangli-d highFps versionsrc on GitHub
ABAさんのワンキーゲーム「smilyangry」をドラッグによる移動に対応したものを120fps、144fps、240fpsなどに対応させてみました。 1秒間60コマから240コマ、4倍になり、移動や弾などのキャラクターの動きがスムーズに!(HEICからライブフォトを取り出したいので todo libheif ES化)

こればっかりは動画でも伝わらないので、実物で見てもらうしかありません。 高フレームレート対応ディスプレイでお試しいただくか、次回7/30金のサイバーフライデーへどうぞ!


squarebar highFps versionsrc on GitHub
回転する棒を伸び縮みさせる長生きワンキー長生きゲーム。小中学生の頃の一番の愛読書、MSX-FANの投稿1画面部門的な楽しいゲームが帰ってきた感!

何事も、継続は力なり。
プログラミングで実装力をつける近道は、プログラミングすること。
何を作ったらいいか分からない?
ゲーム好きならゲームを作ろう!
ゲームづくりで身に付く、アルゴリズム力と、バランス感覚。
気軽にオリジナルゲームが作りたい人にオススメフレームワーク
crisp-game-lib

ESモジュール版を使ったオープンソース、シンプルゲーム「kawakudari」や、弾幕ゲーム「smily15s」を参考にHTMLファイルをいじるだけで気軽にゲームづくりができますよ。
ESモジュールのススメ! BulletML、crisp-game-lib、mp4-capture-canvasのES化と弾幕遊び

fork元のcrisp-game-libに、設定で自由に指定できるゲーム画面サイズ、プルリク(修正提案)が上がっていたのでES版にも反映。 その際、起動後にウィンドウサイズを変更したときにも追従してほしかったのでプルリクしたところ、賛同得られ、無事マージ。僭越ながら貢献者(Contributors)として名前、載っちゃいました。うれしい!

オープンソースへの貢献は、ゲームで言う実績やトロフィー。
13才以上なら、どなたでも無料でスタートできます。
Let's contribute!

links
- じぶんのウェブサイトをつくろう! 13才以上なら誰でも無料で持てるホームページ&HTMLとCSSはじめのいっぽ

数学的美しさを感じる弾幕シューティングゲーム。 「crisp-game-lib」の作者、ABAさんによる、弾幕を記述するXML「BulletML」と弾幕オープンデータ「弾幕やさん」を発見。

JavaScript実装である「bulletml.js」をESモジュール化した「bulletml.js-es」を作って、 ABA Gamesさんのオープンソースからシューティングゲームっぽい「smilyangry」を改造してドラッグで動く版「smilyangry-d」を作って、 弾幕やさんのデータ一覧をCSV化して、CORS対応のGitHub Pagesに「danmakuya」として設置して、下ごしらえ完了。

これらを使って作った、弾幕シューティングゲーム風、15秒でたくさんスマイルを集めようゲームがこちら。

smily15s」(src on GitHub)
弾幕データにはうまく動かないものが混ざっているため、ひとまずいくつかピックアップして使用しています。

レトロ調だけど多数のオブジェクトがあっても処理落ちせず滑らか動く様子を伝えるのに動画化は必須ですね。 「gif-capture-canvas」が使われていたところを、似たインターフェイスでmp4で記録できる「mp4-capture-canvas」を作成。

TypeScriptと外部モジュールで開発されているcrisp-game-libを、ESモジュール化するにあたって、外部モジュールのESモジュール化。 元ソースを少し調整し、TypeScriptからJavaScriptへの変換とimportのマッピングの変更を行うスクリプト「makees.sh」を作成。 HTML内にimport文ひとつですっきり記述できるようになりました。
→「crisp-game-lib ES module ver.


新しいサンプル「tilted-easy (forked from tilted)」を合わせてご覧ください。
もっとシンプルなものがよければ「kawakudari」をどうぞ。

開発者のABAさんもMSX出身と判明!
個人サイトをリニューアルして自作ゲーム一覧を作ったら250個くらいあった - ABAの日誌

ESモジュールというシンプルでグローバルな抽象化、便利ですね!
いろいろ作りたい高専生や学生向け、jigインターンもエントリー受付中!

ゲームの好みは人それぞれ。グラフィックがシンプルでゲーム性で攻める方法が好きです。

IchigoJam BASIC で、人気のかわくだりゲームをシンプルでかわいいゲームフレームワーク「crisp-game-lib」を使って作ってみました。

kawakudari」(src on GitHub)
crisp-game-libには、いい感じのドット絵フォントがプリセットされていて、設定1つでかわいいBGMが付き、命令1つでBGMのリズムに自然に合わせてクオンタイズして鳴る効果音、PCからスマホまで入出力もいい感じに対応済み。

HTML内にJavaScriptのESモジュール表記する形で実装したので、何もインストールしなくても、HTMLを編集するだけでゲームづくりが楽しめます!メインのコードはこんな感じ。IchigoJam BASICの経験者や、プログラミング初級者の人でも比較的チャレンジしやすそう。

let y = 20; let x = 50; const enemy = []; const dhit = 3; window.update = () => { // canvas size 100x100 if (!ticks) { // init enemy.length = 0; } if (input.isJustPressed) { play("select"); } if (input.isPressed) { x++; } else { x--; } x = (x + 100) % 100; text("O", x, y); enemy.forEach(e => { text("*", e.x, e.y); e.y--; if (Math.abs(e.y - y) < dhit && Math.abs(e.x - x) < dhit) { end(); play("explosion") }; }); if (ticks % 10 == 0) { enemy.push(vec(rnd(100), 100)) addScore(1); } remove(enemy, (e) => e.y < -10); };

GitHubの index.html をダウンロードするか、コピペして、自分のPC上で開いてみましょう!


optionのthemaをcrtに設定すると、ブラウン管風エフェクトがかかって、雰囲気チェンジ!

seedを変更すれば自動生成されるBGMや効果音セットもいろいろ変えられて楽しいので、まずは数値をいじるところからはじめましょう。


crisp-game-lib by ABA Games
開発者のABA Gamesさん、シンプルでステキなオープンソースなゲームなど100本、ライブラリと共に多量公開!(残りゲーム制作体力10%な人のためのずぼらゲームライブラリcrisp-game-lib - ABAの日誌


ミニゲームに物語性を加えることで得られるコク - ABAの日誌
大長編もあれば俳句もある。ゲームも然り。

1日1個、11日で11個のミニゲームを作る - ABAの日誌
今年50のゲームを作って分かった面白いゲームを作る方法 - ABAの日誌
数作るって大事ですね!

たのしいづくり、はじめましょう!

JavaScriptでいろいろ作りたい高専生や学生向け、jigインターンもエントリー受付中!

プログラムはノベルゲーム(アドベンチャーゲーム)と相性がいい。
- 順番に進行が基本
- 何かの条件で分岐
- 繰り返し
- フラグによってマルチエンディング


サンプルノベルゲーム

まずは次のプログラムを index.html というファイル名で保存して、ブラウザで開いてみましょう。

<script type="module"> onload = async () => { alert("おはよう、朝だ"); alert("もう、夜だ、おやすみ"); }; </script>

ブラウザにダイアログが表示され(alert関数)、書いたメッセージが順にでます。これで分岐なしのノベルゲーム(?)はできますね!

ゲームっぽくする分岐と繰り返しを加えてみます。

<script type="module"> onload = async () => { alert("おはよう、朝だ"); for (;;) { const n = prompt("どこへいこう?\n1. 山\n2. 川\n3. 帰る"); if (n == 1) { alert("山についた"); alert("HPが10、回復した"); } else if (n == 2) { alert("川についた"); alert("MPが5、回復した"); } else { break; } } alert("もう、夜だ、おやすみ"); }; </script>

prompt関数を使うとユーザーからの入力を受け取れます。 受け取った数、if文を使って分岐しましょう。for文で繰り返し、breakで繰り返しを強制終了します。

ノベルゲームは、美しい絵がほしいところですね。そんなときは自由に使えるオープンデータ!
高品質写真オープンデータ「FIND/47」を使って、背景を付けましょう。

<script type="module"> import { bg } from "https://js.sabae.cc/find47images.js"; onload = async () => { await bg(2892); alert("おはよう、朝だ"); }; </script>

FIND/47を背景として表示する関数 bg を import で読み込んで、1行足すだけ。美しい背景が表示できました。


日本の風景オープンデータ
マウスオーバーで写真のIDを表示するようにしました。この番号を await bg 関数に渡せばOK。美しい写真、使い放題!

フラグを付けて、マルチエンディングなノベルゲームができあがり!

<script type="module"> import { bg } from "https://js.sabae.cc/find47images.js"; onload = async () => { await bg(2892); alert("おはよう、朝だ"); let flg = false; for (;;) { const n = prompt("どこへいこう?\n1. 山\n2. 川\n3. 丘\n4. 帰る"); if (n == 1) { await bg(658); alert("山についた"); alert("HPが10、回復した"); } else if (n == 2) { await bg(1855); alert("川についた"); alert("MPが5、回復した"); } else if (n == 3) { await bg(23); alert("おー、花火だ"); flg = true; } else { break; } } if (flg) { await bg(2583); alert("充実した一日だった"); alert("おやすみ"); alert("HAPPY END"); } else { await bg(3180); alert("何か見落としているような・・・"); alert("THE END?"); } }; </script>

自分で撮った写真や、画像を使ってもいいですね!


プログラムは Code for Fukui のオープンソース、GitHubで公開しています。

テキスト表示が美しくなる demo5.html を追加!(2021.5.26)

<script type="module"> import { bg, show } from "https://code4fukui.github.io/egadv/egadv.js"; onload = async () => { await bg(2892); await show("おはよう、朝だ");

という感じで、ライブラリを変更し、alert や prompt を await show に変更すればそれっぽいノベルゲームになります。

demo5.html」(src on GitHub)

ゲームライブラリ整備計画、egcanvas.js に続き、サンプルゲーム用のステキ素材を発見!

egcharmaker
ぴぽや倉庫さんのモンタージュ合成可能なキャラクターを使ったwebアプリを作り始めました。 まだまだ荒削りですが、パーツを選んで、いろんなキャラクターを作れます!(ちゃんと作成するには、chracter.xmlのorderに従った並び順の調整が必要ですが、未対応)

ドット絵ならではのかわいさがありますね!

営利利用も加工もOK、素材としての販売だけは禁止という、オープンデータに近いライセンス体系。 参考に新たなキャラクターを描くのも楽しいかもしれませんね! (素材利用規約 - ぴぽやblog

ディレクトリ(フォルダ)構造の素材データをjson化するDeno用ライブラリ dir2json.js を使った makejson.js によって作成する res.json を使ったwebアプリ。 RPGを作りたい小中学生向けに協力したい方、大募集!(src on GitHub

小中学生の実装力を鍛える、PCNこどもプロコン2021のふりかえりと次の計画ミーティング。 今回もたくさんのステキな作品あつまりました。

IchigoJam BASICや、Scrtachからのステップアップにイチオシはプログラミング言語は、JavaScript。
- 創った作品を簡単に公開でき、パソコンでもスマホでも動く
- 機械学習(AI)を気軽に使える(Tensorflow.jsはじめのいっぽ
- サーバーサイドでも使える(Denoはじめのいっぽ
- オープンソース共有サイト GitHub で最も使われているプログラミング言語(GitHut考察

とはいえ、最新の言語は変化も激しいので、陳腐化してしまった古い教材が多いのが問題です。
ということで、小中学生のプログラミング言語ステップアップ用に新たなゲームライブラリ整備計画をスタート!


egcanvas demo 1 - touch

小中学生憧れのスマホ、PCゲームづくり。まずはスタンダードな2Dゲームをサクッと作成できるライブラリ egcanvas.js として公開。 ダウンロードして、HTMLを開くだけでブラウザで動き、改造し、試せます。
egcanvas.js 1.0.0(200KB)」

はじめのいっぽ、文字を真ん中に出すプログラム

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"> <title>egcanvas.js demo</title> </head> <body> <script type="module"> import { createEgCanvas } from "https://js.sabae.cc/egcanvas.js"; const c = createEgCanvas(); c.draw = (g, cw, ch) => { // cw ch は画面の幅高さ、gを使って描画 // 線を引く g.setColor(255, 0, 0); g.drawLine(0, 0, cw, ch); // 画面中央に文字 g.setFontSize(cw / 20); g.setColorHSL(90, .6, 0.5); g.fillTextCenter("hello egcanvas.js", cw / 2, ch / 2); }; // ひとまず最初に描く c.redraw(); </script> </body> </html>

import / export を使った、ピュアなJavaScriptのESモジュールを使っているので、ライブラリを辿るのも簡単です。

import { createFullCanvas } from "./createFullCanvas.js"; import { extendGraphics } from "./extendGraphics.js"; import { extendUI } from "./extendUI.js"; const createEgCanvas = () => { const c = createFullCanvas(); extendGraphics(c.g); extendUI(c); return c; } export { createEgCanvas };

フルスクリーンのCanvasを作成して、CanvasAPIベースのグラフィックとUIを拡張しています。extendGraphics.js を見ると、どんな描画ができるか確認できます。

何かステキな名前をつけて、コンパクトで優しく楽しく学べるプログラミング環境を作っていきます!


egcanvas.js on GitHub
どなたでもお気軽にコントリビュートください!

これを機にwebアプリにチャレンジしたい、高専生、オンライン勉強会やりますよ!
【オンライン開催】jig.jp勉強会&会社説明会 ~募集のお知らせ~

祝!福井高専、ディープラーニングコンテスト、優勝!
福井高専がディープラーニングコンテスト優勝しました!

ウェブで動く 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 から遊びましょう)
- 高橋名人緊急参戦! 高専や技術の先生向け、トラ技ジュニア読者限定セミナー 直伝プログラミング実習(ファミリーベーシック入門の著書!)

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