【Lv.10】フォント使用例（スマホで遊べるかわいいブラウザゲーム篇）HTML5／JavaScript／CSS3で縦書き！+ お寿司🍣🍵

こんにちは、miniyamaです。きょうはスマホで遊べるかわいいゲームの紹介です。
先日ですが、知能豆（ちのうまめ）というHTML5／JavaScriptで作られたブラウザゲームを発見しました。こちらのゲームでわたしのフォント（mini-わくわく）がつかわれています。

制作者さんはōtoro.netというデザインスタジオの@hardmaruさんです！
＼ めざせフォントで国際交流〜 ／　なぞの軟体生物のお寿司GIFアニメもあるよ。

ōtoro.net
http://otoro.net

hardmaruさんは外国籍の方ですね。Twitterでご挨拶をさせていただきました。

ōtoro labs is a design studio based in Tokyo. We create web-based interactive simulation experiments.
http://otoro.net

サイトをのぞいてみると、東京を拠点にwebをつかったいろいろおもしろそうな実験をされているようです。お寿司がすきなのかな？　＼ 大トロ ／

それではさっそくゲームを遊んでみましょう♪

ブラウザゲーム（知能豆）

こちらのページにゲームがあります。Webブラウザで遊べるゲームなのです。

パソコンでもiPhoneでもAndroidでもタブレットでも遊べる、HTML5/JavaScriptでつくられたブラウザゲーム！　・・・と、かいてみたけどわたしは詳しい仕組みはよくわかっていませんw

わーっ かわいいポニョポニョしたカラフルなクリーチャー（豆）があわられました！ ちょっとぼ～っとみてみましょう。

まめがかべにさわるとしぬ。
じんせいはむずかしいです。
あきスペースをクリックしてみて～
いどうのまめをさわってごらん。
がめんじょうにせんをひいてみて～

なんだかわたしのフォントでおもしろいメッセージ（ゲームの説明）がうかんでいます。フォントはwebフォント化してCSS3で縦書きをしているみたい！

画面を録画できるrecorditというアプリで操作動画をつくってみた～　ゲームはとても簡単です。

図のようにマウスを適当な位置からドラッグして指を離してみると壁がつくれます。スマートフォン・タブレットをお使いの場合はスワイプ（画面にふれながら指を移動させる）をします。

壁をつくってクリーチャー（豆）の進路の邪魔をしてみましょう。すると、クリーチャーが壁をよけるように移動します。これはなんとクリーチャーに人工知能（AI）が搭載されているようです、すごいです！ クリーチャーが壁をよけきれずに激突してしまうとス～っと消えてなくなってしまいます。

つまり、このゲームはクリーチャーの進行（侵攻？）の邪魔をしてたのしむゲームなんですね？？

ゲームは一定期間たつとたまにクリーチャーが分裂してこども？が勝手に増えたりします。画面上をクリック（タップ）してみるといろんなことがおきますのでやってみましょう♪

最初からまた遊びたい場合は、ブラウザゲームなので更新をすればもどることができます。

ゲームを遊ばなくても、そのままぼ～っとみていてもとってもたのしいです！

ゲームの人工知能について

この知能豆というブラウザゲームですが、hardmaruさんのブログに詳細が記載されています。さまざまな研究をされているようです。こちらものぞいてみましょう。

なんかすごいことしてるデザインスタジオさんみたいです！ このゲームのクリーチャーはすべてJavaScriptをつかって制御されているのですね。

ブログをよく読んでみると、このゲームは現実の人間生活とかけていることがわかりました。

ー人間が日常生活のさまざまな問題を回避して、生き残るために進化をして いくー （この解釈でいいのかな〜？）

人生はむずかしいです。

life is hard.

ちなみに「 life is good. 」といえば、LIG (リグ) さんですね。

株式会社LIG | 台東区上野にあるウェブ制作会社
http://liginc.co.jp

ゲームのクリーチャーのモチーフはとなりのトトロのまっくろくろすけでした。

ブログの最後の方にわたしのフォント（mini-わくわく）についても感想を書いてくださっています。もともとは英語版のゲームを日本語版にする際に、こちらのフォントを選んでくださったみたいです。ありがとうございます。

自作Webフォントで縦書き

わたしも自分のフォントで縦書きしてみました。

じゃじゃまる

おお～　縦になった～ (´∀｀=)

もう一丁。

ドラえもん　ほんやくコンニャク　だしてほしい。 じあまり

うまく縦書きになったかな。※これはただの実験です、一部ブラウザ非対応ですw

きょうのまとめはこちらです

• Google翻訳などを便利につかえば国際交流ができる
• ブラウザゲームはPCでもスマホでもタブレットでも遊べる
• JavaScriptってむずかしいけどおもしろい！
• 動画の補足説明に画面を簡単にgifアニメ化してくれるrecorditアプリは便利
• webフォントって縦書きもすることができる

なんだか最近フォント使用のお便りをいただくことでいろんな知識が増えていってとてもたのしいです。フォントを通じた出会いに感謝。

hardmaruさん、この度はかわいいゲームにフォントをつかっていただきありがとうございました！

おまけ

うさたん GIFアニメ（まわるカウンターお寿司 〜大トロ篇〜）

＼ 大トロ ／

今回の記事用に新しい企みでGIFアニメつくりました。メインフォントはまにまに丸ゴチックです。

こちらのフォント、かな書体なので漢字はありません。なので「大」は作字しました〜。どうでしょうか。

まにまに丸ゴチック公式サイト｜totika［西岡裕二］
http://n-yuji.info/index.php/totika-font

ちょっとこれGoogleアドセンスとかの広告バナーっぽい。まちがってクリックしてもなにもおこりません。

・・・もしも高級カウンターお寿司がまわっていたらこんなかんじです（どうやってまわってるのかな）。おかしい、大トロというか牛タンぽくなっちゃったー。お寿司たびたいです。

温泉でオムライス

GIFアニメ制作はおもしろいです。ちょっと前につくったのはこちらのページにのっています。

国際GIFアニメアワード2014 優秀作品一挙公開 – デイリーポータルZ：@nifty
http://portal.nifty.com/kiji/140320163619_2.htm

おもしろいコメントありがとうございます。また開催してほしい♪

Dear hardmaru,

Greetings! This is miniyama, a Japanese font designer at mini-design.jp.

Thank you for using my mini-wakuwaku font for your cute game.

I have tried playing the game. How cute the characters and their action are! It is a lot of fun just to watch the game screen as well as to play the game.

I am somewhat ignorant of JavaScript, but I am deeply impressed with the sophisticated technique used for the game.

I am glad to see my designed font seems to go well with your game characters.

Please excuse me for using the illustration of some of your game characters to introduce the game on my weblog.

I wish you continued success in making wonderful characters.

With best regards,
miniyama


P.S. I like salmon the best out of all the sushi.

みんなお寿司がすき〜。

Pocket

＜ 【Lv.9】フォント使用例（円周率篇）カナヘイさんの超カッコイイかわいいイラスト！ 先生、数学ちょっとおもいだした◎ フォント擬人化されました☆ フロップデザインさんの春のフォント祭「フォント擬人化コンテスト Vol.3」創英角ポップ体ソングも紹介🎵 ＞