ESP-WROOM-02でゲーム機を作った

これはなに?

ESP-WROOM-02でゲーム機を作ってみました。

www.youtube.com

構成

CPU: ESP-WROOM-02

0.25Wスピーカー

8ボタン入力(74166経由で接続)

電源スイッチ

128*128カラーTFT液晶(SPI接続)

単3乾電池x3

 

画面、スピーカ、ボタン と、ゲームに必要なものは一応搭載したつもりです。

ESP-WROOM-02は500円程度で買えますし、液晶も1000円程度のものです。

(液晶は中国で買うと安い: 激安さーち)

 

工夫したところ

ESP-WROOM-02ではGPIOが足らないので74166(パラレル-シリアル シフトレジスタ)を使って、接続した。

テトリスを作ったところ1フレームあたり20msくらい出せる模様。30FPSはいけそうです。

Wifiが利用できるので、これを活用したゲームが作れるかな、、?と思ってます。

 

ESP-WROOM-02ピンアサイン 

ESP-WROOM-02はGPIOが少ないので、ピンアサインは気になる人も多いかな?
水色背景のところは液晶との接続、黄色背景のところはシフトレジスタとの接続です。ジャンパとして使うピン(IO15,IO02)も出力ピンとして使っているところがポイントです。

f:id:inajob:20170326171635p:plain

 

ほかの有名な自作ゲーム機との比較

Gamebuino、Arduboyなどとの比較

  • Arduinoベースである点は同じです。ESP8266用のArduino環境を使っています
  • 液晶がカラーであるところが違います。ほかのものはモノクロです
  • ボタンが8個あるところが違います。ほかのものは十字キー+2ボタンです
  • Wifiが利用できるところが違います。
  • SDカードは利用できません。GamebuinoはSDカードが搭載されています。

wifi接続ができる!

ほかの自作ゲーム機と違ってWifiが利用できるということで、デモとしてWikipediaの記事を表示するというのをやってみました。日本語フォント周りがまだ準備できていないので、英語ページのみですが。

f:id:inajob:20170327224644p:plain

 

動画が見たい方はこちら

 

 

写真

ユニバーサル基板を使って実装したので、ゲーム機としてはかなり大きめとなりました。

f:id:inajob:20170326000048p:plain

 

ESP-WROOM-02と液晶は取り外せるようになっています。

f:id:inajob:20170326000105p:plain

裏返すと手で頑張っている様子がわかります。

f:id:inajob:20170326000119p:plain

💩(うんこ)の形をしたチョコを作った

これは何?

ついに我が家にも💩の型がやってきました。

折角なので、これを使ってチョコレートを作ろうというのをやってみました。

 

f:id:inajob:20170307213701p:plainf:id:inajob:20170307213559p:plain

こういうやつね

まずは氷を作ってみる

届いたその日には、チョコレートがなかったので、まずは氷を作ってみる。

f:id:inajob:20170307213853p:plain

残念ながら水に入れると、普通の氷でした。

f:id:inajob:20170307214003p:plain

チョコレートを買ってきた

ごくありがちのチョコレートを買ってきた。これで💩をつくるぞ!

f:id:inajob:20170307214316p:plain

まずバキバキに割ります。

f:id:inajob:20170307214434p:plainf:id:inajob:20170307214555p:plain

レンジでチンします。

f:id:inajob:20170307214717p:plain

溶けてきたやつをかき混ぜて、型に注ぎます。固まっちゃうので急いで・・

f:id:inajob:20170307214841p:plainf:id:inajob:20170307215053p:plain

後は放置・・・

 

完成しました!

f:id:inajob:20170307215650p:plain

 

感想

普通のチョコレートの味がしました!

電子レンジでチンするとなぜか、チョコレートが減った気がします。揮発した?

チョコレートをつくるって、女性は幼いころにやるイベントなのかもしれないけれども、僕は初めてでした。お菓子って分量など難しいイメージがありましたが、ことチョコレートに関しては、かなり大雑把にやってもできるということがわかりました。

Nコマ作成ツールを作ったら、素敵な参加賞をもらった

これはなに?

http://inajob.dip.jp/n_koma/

こんな感じで

こういうの(↓)が作れるWebページです

マスコットアプリ文化祭

mascot-apps-contest.azurewebsites.net

ここ最近毎年やってる、インターネット上のプログラミングのコンテスト。 特徴はキャラクターを使うというところ。 企業のマスコットキャラなどを使うことで、その企業の賞がゲットできちゃうかも! という感じのコンテストです。

そして参加賞がもらえるという、敗者にもありがたいコンテストとなっています。 で、僕の作品は箸にも棒にもかからなかったのですが、 無事参加賞をいただけましたので、素晴らしいコンテストの恩返しも込めて、ちょっとこの記事で紹介しようと思います。

いただいた参加賞の数々

え!ちょっと、参加賞なのに寸評がもらえるの? これはうれしい

まじめなUnityの開発事例集とLicenceGuide Unityは触ったことがないので、ぱらぱら見てみることにします。


そしてお約束ユニティちゃんのクリアファイル、Unity印のボールペン、Unityの薄い本

unity-chan.com


GMOクラウドのあんずちゃんのクリアファイル

cloud.gmo.jp


クエリちゃんのクリアファイル

クエリちゃん公式サイト


ご存じハッカドールのクリアファイル

f:id:inajob:20170227231132p:plain

hackadoll.com


京都の精華町のキャラクタ 京町セイカのクリアファイル! 透けている裏面にはお役所の資料っぽいご当地紹介画像があるのもご愛敬

www.town.seika.kyoto.jp


いろいろ! 右上が 泉精器製作所のキャラ松本イズミのカレンダー どの月も職場ではちょっと置きづらい感じになっておりました! ていうかシェーバー擬人化ってなんだろう・・

www.izumi-products.co.jp

http://omorianko.com/


鳥取県倉吉市の薄い本と鳥取ラーメン大全 僕は兵庫が実家なので鳥取は比較的親近感が・・ 後で読んでみます。

www.kimiwata.com


くすり屋の良佳さん のクリアファイル。これは・・・三重県にある薬局のキャラだそうです、 左下にすごくローカルな感じの地図がかいてあるのが目を引きます。

www.884ph.com


以上です!

すごくたくさんの参加賞ありがとうございました! 毎年楽しいコンテストを開催していただきありがとうございます。

ちなみに、個人的には2015年に応募したやつがお気に入りです。

mascot-apps-contest.azurewebsites.net

特に役には立ちませんが見てみてください!

自作プロッタさらに改良

先月からコツコツとプロッタを作ってます。

inajob.hatenablog.jp

この記事を書いた時から、さらに改良を加えました。

というか、Y軸のモーターが焼けてしまいました・・

ステッピングモーターの制御用のピンの1つがモーターの外装と短絡してました たぶん焼けたのだと思う・・)

Y軸はノートパソコン用のDVD-ROMドライブから取り出したステッピングモーターで、X軸に使っている一般的なDVD-ROMドライブから取り出したステッピングモーターと比べると、弱いのかな・・・?

 

とりあえずX軸と同じ一般的なDVD-ROMドライブから取り出したステッピングモーターで、Y軸を再度作り直しました

 

f:id:inajob:20170215222336p:plain

結構工夫をしていて

  • ボール紙を、ねじで固定している。さらに磁石でボール紙を固定している
    • Y軸をさっと分離できる
  • 紙をクリップで固定する
    • マスキングテープよりは着脱が簡単
  • ボールペンにした
    • 以前の油性ペンより細かい線がひけるように
  • Y軸の台をねじで持ち上げている
    • 微妙な傾きの調整が簡単
  • シリアル経由で制御できるようにした。
    • 複雑な図形もArduinoのメモリ量に関係なく描けるようになった。

といった感じです。

 

以下作品集

 

まずはリサージュ曲線。 計算で書ける

f:id:inajob:20170215222944p:plain

Inkscapeからgcodeに変換して、さらにそれをArduinoのプログラム変換して、描いた図形
複雑な図形はArduinoのメモリに乗らない

f:id:inajob:20170215223204p:plain

シリアル経由で操作できるようにしたため理論上どんな複雑な図形も容量に関係なく描けるようになった。権利面などを考えた結果「いらすとや」のイラストを描いてみる。

f:id:inajob:20170215223327p:plain

文字も良い感じだ。ハッチングによる塗りつぶしは、ペンの上げ下げが多いため、あまりきれいに描けないことが明らかに・・

f:id:inajob:20170215223441p:plain

ペンをボールペンに変更。より細かい線が描けるようになった。
とりあえず浮世絵を模写させてみる。 左が海の波の絵で、右が富士山の絵(北斎だったかな?)

f:id:inajob:20170215223542p:plain

作品を並べてみる。失敗作もこう見るとそれっぽいな

f:id:inajob:20170215223921p:plain

どくろマークとかエンブレムが良い感じであると気づく

f:id:inajob:20170215223704p:plain

左は輪郭のみ、ハッチングによる塗りつぶしはうまくいかないので、一番右はInkscapeの「インセット」を駆使して、塗りつぶし用のパスを生成した。

f:id:inajob:20170215223745p:plain

大体できることは試した気がする。

秋葉原で500円くらいで売っているDVD-ROMから作ったプロッタだったけど、非常に勉強になったし、かなり良いものができたと思う。

この記事を見てぴぴっときた方は、ぜひ作ってみてください。

 

はてなブログへ移行しました

なぜか今更はてなブログの「インポート」機能に気づいたので移行してみました。

help.hatenablog.com

リダイレクトの設定もしたので、急に今までと雰囲気が変わった感じになりましたが、今後ともよろしくお願いします。

Hack Day 2017でRecipe Mixerを作って、Fun賞を受賞しました! #hackdayjp

Hack Day 2017に参加してきました。

どうやら5回めの参加の模様

Hack Day( http://hackday.jp/ )というのは、土日の24時間(本当に12時〜翌日12時)という時間制約のもと「動く」プロダクトを開発し、その後90秒で発表するというYahoo!JAPANの名物イベントのOpen版です。
今回は昨年とほとんど同じメンバーで参加しました。


とりあえずの説明

今回作ったものは「Recipe Mixer」です。

料理というのはマルチタスク
複数の料理を並行に進めていく、というのはなかなか素人には難しいです。

そこで「Recipe Mixer」、これはそんなあなたを助けてくれるLineBotです。
指定したレシピをいい感じに合成して、「次やるべき作業」をLineで伝えてくれます。


参加メンバー

  • @kasahi 安定の仕切り役 プレイングマネージャ
  • @shamabe ライブコーダーなあの人 Hacker's Bar( http://hackers.bar/ )でライブコーディングをするなどHackerの鑑
  • ばりーさん なんだかんだで一緒にハッカソンに参加してます。今回僕が「だれかー混ぜてー」といったところ誘ってくださいました。
  • matsuchiさん 仕事はWebデザイナー、今回は発表もしたい とのこと
  • 僕 1月ごろに「だれかー混ぜてー」と言って混ぜてもらいました。

当日まで

去年の経験から、結局ぎりぎりにならないと決まらないのでは、なんて言いながら、気持ち少なめの打ち合わせ。
2週間前くらいから、夜に時間の合うときに「サイゼリヤ」で打ち合わせ (学生っぽい)

結構早めにLineBotをやろう、という話になりました。
しかし、なかなかLineBotを使った良いネタが出てきません。

いろいろ出した中で、これかなぁ・・・ ということで、決まったのが今回のネタでした。
全員の時間が合わず、全員で顔を合わせて打ち合わせ、というのができないまま当日を迎えます。

Hack Day 当日

11:30から開場ということで、少し早めに秋葉原に向かいます。
12:00から開発開始!
初めて全員がそろったので、まずは何を作るか、というところを話し合います。

ターゲットは誰なのか、どんなUIにするのか、開発はどのサーバを使うのか・・etc

大体みんなの認識があったのが14:00くらい
そして役割分担。

  • @kasahiさん matsuchiさんと連携し、デザインと、実際のLineBot上での表示を試行錯誤 + レシピを試しに正規化してみる
  • @shamabeさん LINEとの接続部分 LINEゲートウェイ的なもの ユーザの状態を管理し、適切なモジュールに処理を振り分ける。
  • ばりーさん MixRecipe前半のレシピの提案の部分
  • 僕 MixRecipe後半のレシピのマージと並べ替え部分
  • matsuchiさん プロダクトデザインと、プレゼン構成

まずはこれで!

僕はダミーのレシピデータを使って、後半部分を作っていましたが、なかなか難しい・・

夕方ごろ、用意された夕食を食べ終わっても、まだ、、みんな黙々と作業・・
不安になりはじめる。

なんとなくみんな作れているものの、結合するには至らない・・

とりあえずデータだ!ということで
手の空いた、@kasahiさんが、使えそうなレシピをステップに分け、DBに突っ込んで、APIから引けるようにしてくれました。

そうこうしているうちに、僕もダミーのデータで後半部分が動くようになったので、ダミーデータからAPIに切り替え、@shamabeさんの作ったゲートウェイと結合。なんとなく順番にレシピの手順を教えてくれる状態になりました。
ただ、なんかレシピのマージにバグがあって、思ったようにならない、、
豆腐をゆでろと指示が来た後に、豆腐を切れ みたいな感じになったりしてました・・

とかやってるともう深夜・・ 眠い頭に鞭打ちながらバグを直す・・

少し直しては、また別のところがおかしくなる、、というのを繰り返して、結局朝の7時過ぎくらいにまともに動くようになりました。

僕がこんな感じでバグと戦っている間にばりーさんの部分は作りこみが進み、いい感じにレシピを絞り込む対話ができるようになっていました。

また@kasahiさんがレシピを拡充し、「生姜焼き」「肉じゃが」「味噌汁」「ポテトサラダ」「きゅうりの浅漬け」などのメニューを混ぜることができるようになりました。

で、8時ごろから2時間ばかり仮眠・・
10時ごろに起きてきて、細かい部分をさらに作りこんだり、プレゼン資料をみんなで確認したりしていると12時。

あっという間の24時間でした。

発表はmatsuchiさんということで、僕は後ろで立っているだけでした。サーバ側のトラブルも無く、ほっと一安心。

発表のあとは展示。かなり多くの方が見に来てくださいました。「あしたから使ってみたい!」などと言ってくださる方もいて、手ごたえを感じました。
そして、授賞式。

見事 「Fun賞」をいただくことができました。

仕組み

レシピマージの仕組みは、かなり愚直にやっていて、

  • レシピを動作に分解する(何を、どうするか?)
  • 分解した動作の依存関係を記述する

このように下ごしらえしたレシピを混ぜ込んで、いわゆるトポロジカルソートをしています。
ただし、これだけだと自由度がありすぎるので、料理に特化した最適化をいくつか行っています。

  • 包丁を使う工程をなるべく早めにする
  • 火を入れる工程をなるべく後ろにする

といった条件を満たすように処理を工夫しました。

ともかくこのシステムはこの事前の「下ごしらえ」がキモでして、手作業とコンピュータのアルゴリズムをうまく組み合わせて実現しています。

また、レシピの動作には

  • タップされるまで進まない(野菜を切るなど、個人差の大きな作業)
  • 一定時間後に次の工程に自動的に進む (肉を焼くなど時間が大切な作業)
  • 一定時間後に指示を出すが、それまでは別の工程を進める(お湯を沸かすなど、時間が大切だが、並行してほかの作業ができる作業)

といったパターンを用意し、料理をうまくアシストできるようにしました。

感想

レシピのマージは実は僕が前からやってみたかったもので、今回その部分を作ることができてとても良かったです。
バグが結構あって、チームの皆さんをハラハラさせてしまったのがやや反省です。(プログラミングコンテストとか好きな方たちはこんなの余裕なんだろうなぁ・・と思ったりしました。)

毎度のことですが、一人ではこんな完成度の高いもの作れないし、ついついもっとおふざけ方向に走ったプロダクトを作りがちなので、チームの皆さんに感謝です。

開発ツール

今回はチーム内の仕様の共有に https://scrapbox.io/ を使ってみました。コロコロ仕様が変わるハッカソンにおいて仕様を書いて残せる、間違ってたらすぐ直せる というscrapboxのUIは非常に使いやすかったです。

ほかに使ったツールははGoogleSpreadshhet, gitbucket, facebook・・ くらいですね。ほかのチームがどんなツールを使ったのかも気になります。

過去のHack Day

Hack Dayは今回で5回めで、僕は過去4回も参加しました。宣伝的にリンクを置いておきます。

ほかの作品たち

YouTubeの録画映像を見ながら、全作品の「技術解説」している部分を抜き出してみました。参考にどうぞ

プロッタを作ってみた


やっと材料がそろったので「プロッタ」を作ることにしました。
「プロッタ」というのは、ペンプロッタのことで、ペンを自動で動かして、図形を描画する装置のことです。

ずいぶん前にこの記事を見た時から作ろうとしていたのです・・

http://www.instructables.com/id/Mini-CNC-Plotter-Arduino-Based/


要はジャンクDVD-ROMドライブからペンプロッタが作れるよという記事です。
これなら僕でもできそう!

材料の調達

DVDROMドライブ

まずは秋葉原にいってジャンクDVD-ROMドライブを買ってきます。

実は、ここにで一つ試練が。

DVD-ROMドライブには「あたり」と「はずれ」があります。

今回のやり方でプロッタを作るためには「ステッピングモーター」が必要です。
DVD-ROMドライブの中には「ステッピングモーター」を用いているものと、(おそらく)「DCモーター+ロータリーエンコーダ」を用いているものがあるようです。


こちらがはずれ

こちらが当たり

おそらくどちらの仕組みでも、うまくやればプロッタを作ることができると思うのですが、今回は参考URLの通り「ステッピングモーター」を使いたいので、あたりが2つ手に入るまでDVD-ROMドライブを買うことにします。

相場としては一つ500円くらい。もっと安いものもちらほらあるかな、、と。

今回はモバイルPC用の「スリムドライブ」も買ってみました。

これも分解してみるとステッピングモーターが入ってることを確認できました。
ただ分解が少し面倒、薄型なのでねじも小さい。 また、ステッピングモーターの稼働範囲が少し少ない(僕の買ったものしか知らないですが)などデスクトップPC用のDVD-ROMドライブとは少し異なっているようです。

ステッピングモーター操作モジュール

次にステッピングモーターを操作するためのICを調達します。
もっと安い方法もあるかもしれませんが、今回はaitendoでEasyDriverと呼ばれるステッピングモーターを簡単に扱うための定番のキットを購入しました。

ステッピングモーター1つにつきEasyDriverが1つ必要なので、2つ購入。

http://www.aitendo.com/product/10976 (今見ると在庫が少ない)

Amazonならこちら

EasyDriver ステッピングモータドライバ

EasyDriver ステッピングモータドライバ

  • メディア: おもちゃ&ホビー


ほかにもステッピングモーター制御用のICはあるので、これじゃなくてもできるはずです。

ひとつ350円

サーボモータ

もう一つ、ペンの上げ下げのために必要な「サーボモーター」を調達します。
千石電商https://www.sengoku.co.jp/mod/sgk_cart/detail.php?code=8ADR-HCKF を購入しました。

ひとつ1300円

トルクとかあるらしいけどよくわからない。

Amazonならこちらとかがよさそう

SG5010 デジタルサーボ

SG5010 デジタルサーボ

  • メディア: おもちゃ&ホビー

ペンを紙に押し付ける何か

元記事でも「That's the most difficult part of our construction.」と書かれている部分

ここを実現するための何かを100均で探していると偶然「PUSH CLUP」なる ビニール袋の封をするための製品が、ちょうどよさそうということで、購入しました。

108円

Amazonだとこちら(ちょっと多いけど・・)

その他必要なもの
  • はんだごて、はんだ
  • ハンドドリル
    • ホームセンターで2000円くらいで売っている、電動ドライバーに100均で購入したドリル刃を装着したものを利用しました。
    • 2mm 3mm 4mm のドリル刃を使いました。

分解

まずはDVDROMドライブを分解します。
ねじを外していけば基本はOK

http://air.ap.teacup.com/vitz/1480.html

こういう記事を参考にしながら分解します。
”強制イジェクトホールをを押す”ところがわからなくてしばらく悩みました。

動作チェック

EasyDriverとDVDROMドライブから取り出したステッピングモーターの動作チェックをします。

http://www.schmalzhaus.com/EasyDriver/
本家サイトを参考にしつつ、ArduinoとEasyDriverとステッピングモーターを接続します。

http://www.schmalzhaus.com/EasyDriver/Examples/EasyDriverExamples.html
この例に従って動くことを確認。


組み立て

こういうことがやりたいわけです

まずはX軸用のステッピングモーターとY軸用のモーターを垂直に固定する必要があります。

そのためにはL字型の金具みたいなものが必要です。
今回はDVDROMドライブのケースを利用することにしました。

木材をいいくらいにカットして、DVDROMドライブケースにねじで固定します。
木材にDVDROMドライブから取り出したステッピングモーターとその枠をねじで固定します。

Y軸側も木材をいいくらいにカットしたものに、DVDROMドライブから取り出したステッピングモーターとその枠を グルーガンで固定します。
木材とDVDROMドライブケースをねじで固定すれば、X軸、Y軸の完成です。

こんかいはX軸は普通のDVD-ROMドライブから取り出したステッピングモーター、 Y軸はスリムドライブから取り出したステッピングモーターを採用しました。
スリムドライブのステッピングモーターは上下が平たい構造となっており、Y軸に固定するのがとても簡単でした。

Z軸についてはも木材をいい感じにカットしたものに、ねじでサーボモータを固定します。
さらに、100均で購入した「PUSH CLIP」にドリルで穴をあけたものを、ねじで木材に固定します。
このとき、サーボモーターの回転によってPUSH CLIPが縮まるように位置を調節する必要があります。 ここが結構難しい。

簡易結合

ブレッドボードを使い、X,Y軸用のステッピングモーターとEasyDriver、Z軸用のサーボモーター、Arduinoをくみ上げます。
てきとーにプログラムを書いて、X,Yの移動、ペンの上げ下げができることを確認します。

基板組み立て

ブレッドボードのままでは、取り回しが面倒くさいのでArduinoプロトタイプ基板にはんだ付けします。


ペンの固定

ペンは、細めのマジックを選定。フェルトのペン先だと多少圧が足りなくても線が描けるだろうということで、、

PUSH CLIPとペンをどうやって固定するか・・・

とりあえず手近にあった「輪ゴム」で止めます。
輪ゴムだけどがたがたしたので、結束バンドでさらに固定します。

X軸とY軸が完全に垂直になっていないと、ペンがと紙が離れてしまうので、調整します。
調整といっても厚紙を折り曲げたものを台の下に挟み込んで、傾きをつけるだけですが・・

リサージュ曲線の描画

X軸、Y軸をそれぞれ数値で制御できるようになれば、sin,cosを使ってリサージュ曲線を描くことができます。

できたっ!


任意の図形の描画

http://www.instructables.com/id/Use-3D-Printer-As-a-Plottercutter/?ALLSTEPS
ここにあるSVGGコードに変換するライブラリを使って、Gコードのデータを作成します。

GコードArduinoのプログラムに変換するプログラムを作ります。

で、あとは実行するだけ。

できたー

感想

プロッタ作成はとても面白い。そしてリーズナブル。
ぜひぜひみんなもやってみよう。

今のところの課題

  • 描画範囲が小さい 3cm*3cmくらい
    • これはDVD-ROMドライブを使っている以上仕方がない
  • ペンを上げるときにペンが曲がる
    • PUSH CLIPがガタガタしているのが原因、もう少ししっかりしたスライド機構が必要
  • 描画データが大きくなるとArduinoのメモリからあふれる
    • シリアル経由で描画指示を送れるように変更すればこの問題はなくなる

続きです

inajob.hatenablog.jp