動画素材作成フリーソフト9VAeきゅうべえのタイルエディタを使って、 和紙、水滴、草原、イナズマ、とかげ、お花畑といった模様を作る方法を説明した。パソコン、スマホで１０分程度で作成できる。
9VAeきゅうべえ、Ver.0.6.13 に、タイル模様を自作できるタイルエディタが搭載された。この機能は１０年ほど前から搭載をすすめていた機能だ。上がタイルつき、下がタイルなしだ。上のほうがよいだろう。ただ模様は無限にあるので物体に適した模様を簡単に自作できることが重要だ。
実は2017年に標準タイルが公開されたときからエディタがあったが、操作がわかりにくく公開していなかった。そのあと、Android版、iPhone版ができ、そこに移植するのに時間がかかった。
9VAeタイルエディタの使い方
使い方は一応 Qiita に解説記事を書いた。ただ素材画像についてあまり書いていないので、使い道がピンとこないかもしれない。
- タイルエディタの機能をまとめると、
- 素材画像からタイルにする領域を選ぶ
- タイルのつなぎ目を目立たなくする
- 透明にするかなど、塗りつぶし方法を選ぶ
- 明るさの調整、サイズの調整
これでどんなタイルが作れるか試してみた。以下の結果をみれば、ネットから入手できるフリーの素材画像から無限にタイル模様が作れそうだ。
9VAeタイルエディタで作れるか試してみた課題
- 思いつくままテーマをあげてみた。
- 和紙
- 水滴がついた窓ガラス（透明タイル）
- 草原
- イナズマ
- とかげ
- お花畑（色つきタイル）
iPhoneを使った手順を説明した。もちろんパソコンでもできる。Androidの場合、キャプチャした画像を「9VAe」フォルダにいれる必要がある
１．和紙
画像を検索してキャプチャー
- まず、ブラウザで「フリー テクスチャ 和紙」をキーワード検索する
- 検索結果の中から、自由に使用してよいフリー素材画像を選んで画面キャプチャする
各OSの画面キャプチャー方法、画像のトリミングの方法は以下のとおり
| OS | 画面キャプチャー | 切り取り |
|---|---|---|
| iPhone | 電源ボタンとホームボタンを同時押し、iPhoneXではサイドボタンと音量あげるボタンの同時押し | 写真アプリで編集 |
| Android | スクリーンショットをとる方法 | フォトアプリで編集 |
| Mac | Shift＋コマンド＋４ | キャプチャ時に切り取り |
| Windows | PrintScreen キー | ペイントブラシで選択、右ボタンメニュー＞トリミング |
iPhone で画像検索＞キャプチャーし、写真アプリで開いた結果が下図。
以下、iPhone での操作を説明
- 「写真」アプリでキャプチャ画像を開く（上図）
- 編集（上図A）をタッチ
- 画像トリミングボタン（下図B）、範囲指定ボタン（下図C）をタッチ
- 右下隅（下図D）左上隅（下図E）をドラッグしてタイル素材だけ選ぶ
- 完了ボタン（下図F）をタッチ
9VAeでタイルを作成
- 9VAeきゅうべえを起動
- 塗り色ボタン（下図G）をタッチ。下向き三角（下図H）で空のタイルを表示
- 空のタイル（下図I）をタッチ。
- キャプチャした画像を選ぶとタイルエディタが開きます。
- タイルの左上の◇（下図J）をドラッグし、和紙の模様にしたい場所の上に移動します。
- 虫眼鏡の左の「＋」ボタン（下図K）をタッチすると拡大します。タイルの内側（下図L）がタイル塗りつぶしされますので、この表示をみながら、重なり調整ハンドル（下図M）をドラッグします。
△が右上隅の場合、周囲のタイルとの重なりがまったくないので、つなぎ目が目立つ場合があります。△を内側に移動させると重なり部分ができ、その間をなめらかに接続するためつなぎ目が目立たなくなります。 - 左上の◇ハンドル（上図J）で模様の場所がかわります。ちなみに右下の◇のドラッグで大きさがかわります。△は重なり具合の調整です。この３つのハンドルを移動し、和紙のタイル模様を探します。
- タイル模様が決まったら、選択ボタン（下図N）をタッチすれば、タイルエディタの模様編集が終了します。
図形にタイル模様をつける
- 塗りのある四角ボタン（上図O）をタッチし、画面をドラッグ（上図P）して四角形を追加。画面全体を表示するには虫眼鏡ボタン（上図S）をタッチします。
- 四角形を描いたら選択ボタン（上図N）をタッチ。iPhoneは画面変更ボタン「＞＞＞」（上図Q）でカラーパレットを表示
- 塗り色ボタン（上図Q）でカラーパレットを開き、作成したタイルをタッチ。これで描画した四角形にタイル模様がつきますが、明るさ調整前なので模様がはっきりとは見えません。
タイルの明るさを調整
- 選択ボタン（上図T）をタッチ。
- タイルをタッチして選択し、選択枠の中心ボタン「＋」をタッチ。メニューの「明るさ」の上下△ボタンをタッチし、明るさを調整します。この例では、「明るさ７」にすれば上図のようになりました。
結果
- 四角形を選択し、選択枠中心の「＋」（上図V）をタッチし、メニューから「複製」をタッチ。２つ四角形を複製します。
カラーパレットを表示し、白と薄茶色に変更した結果が上図です。和紙の雰囲気がでているでしょうか。
このあと、タイルを選択し、選択枠中心の「＋」をタッチ。メニューから「タイル模様の修正」を実行すれば、タイルエディタが起動し、模様の画像の場所を変更できます。この方法で四角形の模様をあとから自由に変更することができます。
２．水滴がついた窓ガラス
画像を検索してキャプチャー
- ブラウザで「フリー テクスチャ 水滴」をキーワード検索
- 上と同じ方法でタイルを作成
- タイルの描画モードを「白を透明に」に設定。これで水の部分が透明になります。
結果
３．草原
画像を検索してキャプチャー
- ブラウザで「フリー テクスチャ 草原」をキーワード検索
- 上と同じ方法でタイルを作成
結果
４．イナズマ
画像を検索してキャプチャー
- ブラウザで「フリー テクスチャ イナズマ」をキーワード検索
- 上と同じ方法でタイルを作成
- 「より白く」オプションで模様を作成
結果
５．とかげ
画像を検索してキャプチャー
- ブラウザで「フリー テクスチャ 爬虫類」をキーワード検索
- 上と同じ方法でタイルを作成
- FreeSVGからとかげ(Lizard)のイラストを検索、読み込んで回転させて、タイル塗りつぶしを設定
- とかげの色を緑色に設定、タイル模様サイズを縮小
結果
６．花畑
画像を検索してキャプチャー
- ブラウザで「フリー テクスチャ 花畑」をキーワード検索
- 上と同じ方法でタイルを作成
- タイル塗りつぶし方法を「白を透明に＞黒を透明に＞カラー」に設定
- 四角形を灰色に設定、タイルの色がそのまま表示されます。
結果
何例か作成してみたが、意外と簡単にタイル模様がつくれる。タイルエディタがないとタイル模様のつなぎ目が非常に目立つ。9VAeのタイルエディタは、完全とはいえないが、かなり使えそうだ。
9VAeきゅうべえに関する質問
- 9VAeに関する質問（Yahoo知恵袋）
- よくある質問（Qiita）
- 本記事の文章、図、アニメは複製自由です。教材、解説記事にご利用ください。