Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
4画面出力とレシート印刷で作る体験型デジタルサイネージ / Unity signage
KSK
September 26, 2018
Programming
1
2.4k
4画面出力とレシート印刷で作る体験型デジタルサイネージ / Unity signage
KSK
September 26, 2018
Tweet
Share
More Decks by KSK
See All by KSK
Supernova Studio 使いはじめてみたら割と良さそう / supernova_studio
ksk1030m
1
630
CSV出力 - Viewからやるか? 他からやるか? / How to output CSV
ksk1030m
1
350
実録リファラル採用-僕と副社長の1827日- / my referral
ksk1030m
0
950
GitLabを仕事で使っていた私が思うことをつらつらと / about GitLab
ksk1030m
1
760
エンジニア目線で考えるPR戦略 / PR by Engineer
ksk1030m
1
1k
Metabase ライブ環境構築 / metabase_live_coding
ksk1030m
0
250
昔の自分に伝えたい容量回復のためのDockerの仕組み / docker_tips
ksk1030m
1
380
Capistranoの罠と他人がハマった事例を見て思うこと / capistrano-trap
ksk1030m
0
240
ガチャを巡る闘い / War of Gacha
ksk1030m
0
30
Other Decks in Programming
See All in Programming
23年のJavaトレンドは?Quarkusで理解するコンテナネイティブJava
tatsuya1bm
1
120
Excelの助けを借りて楽にシナリオを作ろう
rpa_niiyama
0
210
Micro Frontends with Module Federation @MicroFrontend Summit 2023
manfredsteyer
PRO
0
450
ペパカレで入社した私が感じた2つのギャップと向き合い方
kosuke_ito
0
160
中小企業開発事例から見るサーバーレス
seike460
PRO
4
1.5k
Prácticas de Seguridad en Kubernetes
pablokbs
0
110
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
42k
OIDC仕様に準拠した Makuake ID連携基盤構築の裏側
ymtdzzz
0
270
How to Fight Production Incidents?
asatarin
0
160
まだ日本国内で利用できないAppActionsにトライしてみた / MoT TechTalk #15
mot_techtalk
0
110
Zynq MP SoC で楽しむエッジコンピューティング ~RTLプログラミングのススメ~
ryuz88
0
280
Above All, Make It Fun! #fjordbootcamp / make it fun
kakutani
6
550
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1020
430k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
Bootstrapping a Software Product
garrettdimon
299
110k
No one is an island. Learnings from fostering a developers community.
thoeni
12
1.5k
Git: the NoSQL Database
bkeepers
PRO
418
60k
Web Components: a chance to create the future
zenorocha
304
40k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
31
20k
Producing Creativity
orderedlist
PRO
335
37k
How GitHub Uses GitHub to Build GitHub
holman
465
280k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
101
6.2k
Visualization
eitanlees
128
12k
How STYLIGHT went responsive
nonsquared
89
4.2k
Transcript
4画面出力とレシート印刷で作る 体験型デジタルサイネージ @ksk1030 Gotanda.unity #8 / 2018.09.26
話します ・どんな物を作ったか ・機能の話ざっくり 話しません ・ハードウェア側の細かい設定の話
どんな物を作ったか?
None
作ったもの
作ったもの 北海道大学博物館内のサイネージ ・クイズゲームで色々学ぼう的な Windows10 上で動作 ・マルチディスプレイ(4画面) ・レシート印刷(施設内で使えるクーポン発行) ・Flicker API(インスタは審査落ちた...) ・csvファイルでのデータ更新
マルチディスプレイ ② ②’ ① ③ プロジェクタ x 3 + 手元のタッチパネル
真ん中とタッチパネルは同じ画面を表示 しているので、実質3つのカメラを用意
マルチディスプレイ using UnityEngine; public class MultiDisplayManager : SingletonMonoBehaviour<MultiDisplayManager> { void
Start() { int maxDisplayCount = 3; #if SINGLE_DISPLAY maxDisplayCount = 1; #endif for (int i = 0; i < maxDisplayCount && i < Display.displays.Length; i++) { Display.displays[i].Activate(); } } }
マルチディスプレイ using UnityEngine; public class MultiDisplayManager : SingletonMonoBehaviour<MultiDisplayManager> { void
Start() { int maxDisplayCount = 3; #if SINGLE_DISPLAY maxDisplayCount = 1; #endif for (int i = 0; i < maxDisplayCount && i < Display.displays.Length; i++) { Display.displays[i].Activate(); } } } Display.displays に接続中のディスプレイが 格納されている Length で取得した台数分 Activate() する (手元で確認するときに1画面出力できる よう環境変数 SINGLE_DISPLAY を用意) 公式:https://docs.unity3d.com/ja/current/Manual/MultiDisplay.html
実装はこれで良いのだが、やってみると... ディスプレイごとの設定でハマる ・リフレッシュレート ・アスペクト比 ・Unity上の Index と OS上の番号が一致しない - PCに物理的に接続した順で判定されている?
- https://gist.github.com/keijiro/a898b77fa06ee7c83cffc263419b32e3 - 詳細情報求ム... マルチディスプレイ
専用のプリンタを設置 クイズで一定以上のスコアを達成すると 博物館内のカフェで使えるクーポン発行 レシート印刷 EPSON TM-m10 https://www.epson.jp/products/receiptprinter/tmm10/
※レシートとは言っても通常の印刷と同じ レシート印刷 signage ┣━ Assets : ┣━ Plugins : ┣━ System.Drawing.dll :
①System.Drawing.dll を Plugins ディレクトリに設置 場所:C:\Windows\Microsoft.NET\Framework\ {バージョン} \System.Drawing.dll ②Other Settings の Api Compatibility Level を “.NET2.0” に
レシート印刷 void PrintExec() { PrintDocument printDocument = new PrintDocument(); //
オブジェクトの作成 printDocument.PrintPage += new PrintPageEventHandler(PrintPage); // イベントハンドラの追加 printDocument.Print(); // 印刷開始 } void PrintPage(object sender, PrintPageEventArgs eventPrintPage) { drawFont = new System.Drawing.Font("Arial", 10); // Arial フォントのサイズ10 drawBrush = new SolidBrush(System.Drawing.Color.Black); // 色は黒 drawFormat.Alignment = StringAlignment.Center; // センタリング string text = "印刷したい文字列"; eventPrintPage.Graphics.DrawString(text, drawFont, drawBrush, drawRect, drawFormat); Image image = Image.FromFile("画像のパス"); eventPrintPage.Graphics.DrawImage(image, new Rectangle(offsetX, offsetY, width, height)); image.Dispose(); //後始末 eventPrintPage.HasMorePages = false; //次のページがないことを通知する }
レシート印刷 void PrintExec() { PrintDocument printDocument = new PrintDocument(); //
オブジェクトの作成 printDocument.PrintPage += new PrintPageEventHandler(PrintPage); // イベントハンドラの追加 printDocument.Print(); // 印刷開始 } void PrintPage(object sender, PrintPageEventArgs eventPrintPage) { drawFont = new System.Drawing.Font("Arial", 10); // Arial フォントのサイズ10 drawBrush = new SolidBrush(System.Drawing.Color.Black); // 色は黒 drawFormat.Alignment = StringAlignment.Center; // センタリング string text = "印刷したい文字列"; eventPrintPage.Graphics.DrawString(text, drawFont, drawBrush, drawRect, drawFormat); Image image = Image.FromFile("画像のパス"); eventPrintPage.Graphics.DrawImage(image, new Rectangle(offsetX, offsetY, width, height)); image.Dispose(); //後始末 eventPrintPage.HasMorePages = false; //次のページがないことを通知する } メインの処理 PrintDocument のオブジェクトを作成して PrintPage イベントハンドラを追加してやる (この辺は .NET の領域)
レシート印刷 void PrintExec() { PrintDocument printDocument = new PrintDocument(); //
オブジェクトの作成 printDocument.PrintPage += new PrintPageEventHandler(PrintPage); // イベントハンドラの追加 printDocument.Print(); // 印刷開始 } void PrintPage(object sender, PrintPageEventArgs eventPrintPage) { drawFont = new System.Drawing.Font("Arial", 10); // Arial フォントのサイズ10 drawBrush = new SolidBrush(System.Drawing.Color.Black); // 色は黒 drawFormat.Alignment = StringAlignment.Center; // センタリング string text = "印刷したい文字列"; eventPrintPage.Graphics.DrawString(text, drawFont, drawBrush, drawRect, drawFormat); Image image = Image.FromFile("画像のパス"); eventPrintPage.Graphics.DrawImage(image, new Rectangle(offsetX, offsetY, width, height)); image.Dispose(); //後始末 eventPrintPage.HasMorePages = false; //次のページがないことを通知する } DrawString に文字列を渡すと印刷できる フォントや色、レイアウトもオプションで 渡せば細かく指定することが可能
レシート印刷 void PrintExec() { PrintDocument printDocument = new PrintDocument(); //
オブジェクトの作成 printDocument.PrintPage += new PrintPageEventHandler(PrintPage); // イベントハンドラの追加 printDocument.Print(); // 印刷開始 } void PrintPage(object sender, PrintPageEventArgs eventPrintPage) { drawFont = new System.Drawing.Font("Arial", 10); // Arial フォントのサイズ10 drawBrush = new SolidBrush(System.Drawing.Color.Black); // 色は黒 drawFormat.Alignment = StringAlignment.Center; // センタリング string text = "印刷したい文字列"; eventPrintPage.Graphics.DrawString(text, drawFont, drawBrush, drawRect, drawFormat); Image image = Image.FromFile("画像のパス"); eventPrintPage.Graphics.DrawImage(image, new Rectangle(offsetX, offsetY, width, height)); image.Dispose(); //後始末 eventPrintPage.HasMorePages = false; //次のページがないことを通知する } DrawImage に画像と表示領域を Rectangle で渡してやると画像も印刷できる
レシートもこれで印刷できるが、これもやってみると... やはりハマる ・System.Drawing.dll なんて知らんかった ・Api Compatibility Level の設定も知らんぞ ・画像とテキストで細かく offset
を指定する必要あり ・別途プリンタのドライバの設定が必要 ・情報が出てこない(→最近は結構情報がある) - https://qiita.com/koukiwf/items/e91067e95c2a64af54d6 - http://madgenius.hateblo.jp/entry/2018/01/30/172740 レシート印刷
その他にも 色々ハマる ・そもそも端末/OS側を色々いじる必要 →3画面出力できるようグラボ取り付け →自動起動/終了のためにタスクスケジューラとか BIOS の設定 ・インスタAPI使いたい →ご当地写真を表示するんだ!審査が必要か! →英文の説明入り動画まで作ったのにリジェクト
→Flicker API で妥協してやった に救われる ・Windows10 だとエッジスワイプで通知が出る →物理的にスワイプできないようフレームをつける
こんだけ色々出てくる → Unityが何でもできるからこそ! ゲームや今回のサイネージ以外でも ・UIの自由度 ・インタラクティブな機能 を活かせるフィールドなら応用できる! 最近だと xR(VR /
AR)なんかが好例 それでも...
Unity盛り上げていきましょう! (そしてマルチディスプレイの順番の詳細を教えてください...)
中谷 圭佑 (@ksk1030) 任天堂株式会社(2011/04〜2013/12) ・人事 株式会社ORSO(2014/01〜) ・エンジニア(Node.js / Ruby がメイン)
・経営企画 ◆Speaker Deck ・https://speakerdeck.com/ksk1030m 自己紹介
We are hiring! ARコンテンツとかも作ってます!
Thank you for listening !!