FURYU Tech Blog - フリュー株式会社

フリュー株式会社の開発者が技術情報を発信するブログです。

プリの落書き新機能「落書き編集ツール」を搭載した話

はじめに

プリントシール機事業部のソフトウエア開発の落書き画面担当の筒井です。

この記事ではプリントシール機(以下、プリ)のルートミー2の新機能として搭載される「落書き編集ツール」の紹介と、その実装にあたっての工夫を少し紹介させていただきます。

プリの落書きの主な機能

プリの落書きには様々な機能がありますが、主要な機能は下記の3つになります。

メイク・レタッチ:ユーザーの好みの顔に仕上げる

スタンプ:デザイン性の高いかわいい画像でデコる

ペン:かわいいペンで自由に落書きをしてデコる

機種によっては他にも様々な機能が搭載されていますが、上記3つの機能は現在稼働しているほぼすべての機種に搭載されています。

スタンプは一度配置した後でも「拡縮」「回転」「移動」ができましたが、ペンは一度描いたら消すくらいしかできない仕様となっていました。

新しく搭載された「落書き編集ツール」ってどんな機能?

この度、ルートミー2に搭載された「落書き編集ツール」では今までできなかった「ペンを描いた後の移動」が可能となりました。

ペンだけでなく、スタンプと組み合わせての移動も可能です。

移動だけでなく、複製も可能となっており、一度描画した落書きをスタンプのように扱うことができるようになります。

具体的にどのような時に使うかいくつか例を挙げてみます。

【例①】ペンでかわいく描けた!でも位置が気になる…

赤い枠で囲まれたペンを移動や回転・拡縮させたい!と思ったら落書き編集ツールの出番です。

落書き編集ツールで囲って確定します。

移動や回転・拡縮できるようになりました。

【例②】ペンでかわいく描けた!複製したい!

赤い枠で囲まれたペンを複製したい!と思ったら落書き編集ツールの出番です。

落書き編集ツールで囲って確定します。

複製されました。

【例③】スタンプを組み合わせてかわいいものができた!まとめて移動したい!

赤い枠で囲まれた2つのスタンプを移動したい!と思ったら落書き編集ツールの出番です。

落書き編集ツールでまとめて囲って確定します。

まとめて移動できるようになりました。

【例④】スタンプとペンの組み合わせでかわいく落書きできた!まとめて移動したい!

赤い枠で囲まれたスタンプとペンの落書きを移動したい!と思ったら落書き編集ツールの出番です。

落書き編集ツールでまとめて囲って確定します。

まとめて移動できるようになりました。

落書き編集ツールの実装

落書き編集ツールは大きく分けて下記の3つの機能で構成されています。

・画面上でユーザーが指定した範囲(以下、指定範囲)の矩形を制御する機能

・画面上の指定範囲の画像を取得してスタンプ化し、移動できるようにする機能

・画面上の指定範囲を画像上から消す機能 (※複製処理では消す処理は実施していません)

今回は「画面上の指定範囲を画像上から消す機能」について詳しく説明していきます。

落書き画像の管理

プリの落書きは「人物画像」と「落書き画像」で管理しています。

上図のような画像の場合、下図のように2つの画像で管理して画面上に表示しています。

↑人物画像

↑落書き画像

落書き編集ツールでは落書き画像の指定範囲を画像として取得してスタンプ化した後、落書き画像の指定位置にある落書きを消す処理を実施しています。

画面上の指定範囲を画像から消す機能

実際に落書き編集ツールを使って下図の流れでペンの一部だけ切り抜いて、移動できるようにした部分を消す流れを下記に記載してみました。

上図の最後の落書き画像を出力すると下図のような32bit画像になります。

実は上図の画像はただ消しているわけではなく、8bit部分のみ消すようにしています。

この画像を24bitと8bitに分解すると下図のようになっています。

24bit

8bit

何故8bit部分だけ消しているのか?というと、単純に消した部分の24bitの色を何色にすべきか?というのが分からない問題(白?黒?グレー?)がありますが、24bit部分を何かしらの色で塗りつぶして消してしまうと画像をリサイズした時に切り取った縁の部分に塗りつぶした色が侵食するという問題が発生します。

この問題を避けるために消すのは8bit部分だけにしています。

このようにプリの落書きには画像を劣化させないための工夫が詰め込まれています。

さいごに

プリの最重要な要素は「写り」であり、落書きはそれを引き立てる一要素といえます。

「楽しい」を提供するのはもちろんですが、素晴らしい写りに見合った「画像の劣化などが気にならない落書きした画像」を作り上げることで写りをより引き立てることができます。

今回紹介させていただいた劣化させない工夫はほんの一部にすぎません。

このほかにもたくさんの劣化させない工夫がたくさん詰め込まれています。

写りに関係ない部分でも画像のきれいさにこだわりを持った落書き機能をこれからも提供していきたいと思います。