Save 37% off PRO during our Black Friday Sale! »

4画面出力とレシート印刷で作る体験型デジタルサイネージ / Unity signage

1741ebf45ce415e49fb0340da9e1ca15?s=47 KSK
September 26, 2018

4画面出力とレシート印刷で作る体験型デジタルサイネージ / Unity signage

1741ebf45ce415e49fb0340da9e1ca15?s=128

KSK

September 26, 2018
Tweet

Transcript

  1. 4画面出力とレシート印刷で作る 体験型デジタルサイネージ @ksk1030 Gotanda.unity #8 / 2018.09.26

  2. 話します  ・どんな物を作ったか  ・機能の話ざっくり 話しません  ・ハードウェア側の細かい設定の話

  3. どんな物を作ったか?

  4. None
  5. 作ったもの

  6. 作ったもの 北海道大学博物館内のサイネージ  ・クイズゲームで色々学ぼう的な Windows10 上で動作  ・マルチディスプレイ(4画面)  ・レシート印刷(施設内で使えるクーポン発行)  ・Flicker API(インスタは審査落ちた...)  ・csvファイルでのデータ更新

  7. マルチディスプレイ ② ②’ ① ③ プロジェクタ x 3 + 手元のタッチパネル

    真ん中とタッチパネルは同じ画面を表示 しているので、実質3つのカメラを用意
  8. マルチディスプレイ 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(); } } }
  9. マルチディスプレイ 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
  10. 実装はこれで良いのだが、やってみると... ディスプレイごとの設定でハマる  ・リフレッシュレート  ・アスペクト比  ・Unity上の Index と OS上の番号が一致しない - PCに物理的に接続した順で判定されている?

    - https://gist.github.com/keijiro/a898b77fa06ee7c83cffc263419b32e3 - 詳細情報求ム... マルチディスプレイ
  11. 専用のプリンタを設置 クイズで一定以上のスコアを達成すると 博物館内のカフェで使えるクーポン発行 レシート印刷 EPSON TM-m10 https://www.epson.jp/products/receiptprinter/tmm10/

  12. ※レシートとは言っても通常の印刷と同じ レシート印刷 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” に
  13. レシート印刷 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; //次のページがないことを通知する }
  14. レシート印刷 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 の領域)
  15. レシート印刷 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 に文字列を渡すと印刷できる フォントや色、レイアウトもオプションで 渡せば細かく指定することが可能
  16. レシート印刷 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 で渡してやると画像も印刷できる
  17. レシートもこれで印刷できるが、これもやってみると... やはりハマる  ・System.Drawing.dll なんて知らんかった  ・Api Compatibility Level の設定も知らんぞ  ・画像とテキストで細かく offset

    を指定する必要あり  ・別途プリンタのドライバの設定が必要  ・情報が出てこない(→最近は結構情報がある) - https://qiita.com/koukiwf/items/e91067e95c2a64af54d6 - http://madgenius.hateblo.jp/entry/2018/01/30/172740 レシート印刷
  18. その他にも 色々ハマる  ・そもそも端末/OS側を色々いじる必要    →3画面出力できるようグラボ取り付け    →自動起動/終了のためにタスクスケジューラとか BIOS の設定  ・インスタAPI使いたい    →ご当地写真を表示するんだ!審査が必要か!    →英文の説明入り動画まで作ったのにリジェクト

       →Flicker API で妥協してやった に救われる  ・Windows10 だとエッジスワイプで通知が出る    →物理的にスワイプできないようフレームをつける
  19. こんだけ色々出てくる  → Unityが何でもできるからこそ! ゲームや今回のサイネージ以外でも  ・UIの自由度  ・インタラクティブな機能 を活かせるフィールドなら応用できる! 最近だと xR(VR /

    AR)なんかが好例 それでも...
  20. Unity盛り上げていきましょう! (そしてマルチディスプレイの順番の詳細を教えてください...)

  21. 中谷 圭佑 (@ksk1030)  任天堂株式会社(2011/04〜2013/12)  ・人事  株式会社ORSO(2014/01〜)  ・エンジニア(Node.js / Ruby がメイン)

     ・経営企画 ◆Speaker Deck  ・https://speakerdeck.com/ksk1030m 自己紹介
  22. We are hiring! ARコンテンツとかも作ってます!

  23. Thank you for listening !!