昨年からサービス開始となった、ゲーム風のマップやアバターが特徴のオンライン即売会サービス『pictSQUARE(ピクスク)』ですが、ぴぽやの無料素材を使っていただいています。そのご縁もあって、勝手に利用者向けへの情報発信やサポートデータを配布したりしておりました。
今回、新機能として、イベント会場の背景画像をまるごと差し替えられる機能(イベント主催者向け)が実装されたので、こちらのサポートデータを配布いたします。
各会場の大きさ(1sp,5sp,10sp,24sp,50sp,100sp)に合わせたPSD(Photoshop)ファイルです。背景画像が作りやすいように、レイヤー分けや通行判定が確認できるレイヤーなどを入れてあります。
PhotoshopやCLIP STUDIO,FireAlpaca,Kritaなどで開いて編集することができます。
少し複雑なデータになるので、本記事中で使い方を説明させていただきます。
目次
ダウンロード
こちらがPSDファイルをまとめたZIPファイルになりますので、ダウンロードしてみてください。
各会場スペース毎のPSDファイルとPNGファイルが収録されています。
PSDファイルは、PSDファイルの読み込み編集に対応した画像編集ソフト(Photoshop,CLIP STUDIO,FireAlpaca,Kritaなど)で開いてみてください。
PNGファイルは、テスト用に収録したもので、このまま主催されているイベントに適用することができますので、反映されるか確認してみてください。
イベント会場背景画像の変更方法
ピクスクのご自分のページ(ダッシュボード)から「イベント管理」をクリックします。
すでにイベントを作成されていることが前提ですが、ご自分主催の背景を変更したいイベントをクリックします。
「会場設定」をクリック。
「ホール」をクリック。
エリアが複数ある場合は、変更したいエリアを選択します。
現在の背景画像が表示されており、説明にあるとおり画像をクリックすると、この背景画像がダウンロードできます。
通常はこれをベースに画像編集ソフトで編集していくことになります。
ちなみに、今回のPSDファイルで使用している背景画像のパーツ素材は、ピクスクでデフォルトで使用されている背景パーツ素材の高解像度版になるため、デフォルトのタッチが良い場合はこちらをダウンロードしておいてください。
「ファイルを選択」を押して、会場と同じスペースの背景画像(PNGファイル)を選択します。
「設定を保存」を押せば変更完了です。
下記のようなポップアップ表示が出ますので、10分ほど待ちます。
10分経ち、変更されたかを確認してみましょう。
「イベント会場へ」でイベント会場に入ります。
イベント会場に入ると、デフォルトの背景画像から変更されているのが確認できます。
デフォルトに戻したい場合は、「会場設定＞ホール」と進んで、「背景画像をデフォルトに戻す」を押します。
また反映に10分ぐらいかかりますので、ご注意ください。
PSDファイルのレイヤー説明
PSDファイル中のレイヤーはスペース毎のファイルで多少違いはありますが、下記のようになっています。これは24spのもので、Photoshopでの画面です。
上から順に説明していきます。
通行判定
アバターが通行できない場所を赤色で表示しています。イベント参加者に不便のないよう、赤色の場所には通れないと判断できるものを配置するようにしましょう。
会場背景画像に設定するためのPNG画像で保存する場合には、このレイヤーは非表示にして画像を保存してください。
リンク掲示板位置確認用
ピクスク上で自動表示される店舗の書き込みボードやリンク、サークルカットの画像の表示位置を確認できます。
会場背景画像に設定するためのPNG画像で保存する場合には、このレイヤーは非表示にして画像を保存してください。
出入り口エフェクト
会場上下の出入り口をほんのり目立たせるエフェクトが配置されています。
ピクスク初見の方のことを考えると、わかりやすく「出口」と文字で書いてもいいかもしれませんね。
装飾2
店舗内にあるカウンターと椅子、他に畑の作物やテーブルの上にある物など装飾パーツが配置されています。
ブース
各店舗のベースが配置されています。
中央シンボル
会場中央の噴水を他のものに変更するためのパーツを収録していますので、お好みでお使いください。
噴水セット
噴水から水がでている画像を追加しています。
こたつセット
こたつの上のみかんとお茶は別レイヤーになっています。
ゲート
なんでしょうねぇ？
大木セット
道も変更しているため、別レイヤーに分けてあります。
桜セット
桜の木、地面の花びら、ござ、ベンチ、道の変更などをレイヤー毎にわけています。
ござはイベント固有の模様(キャラをイメージさせるようなものなど)にしたり、イラストに変更したりしてもいいかと思います。
階段セット
豪華な階段です。中央の通行不可部分にはイベントのロゴなどを配置すると、記念撮影の時などにちょうど良いかと思います。
装飾1
会場外周の小さい木や草花、外のテーブルや畑などが配置されています。
地面
地面と道が配置されています。
デフォルトの背景チップのまま編集したい場合
本PSDファイルに収録されている高解像度の背景素材ではなく、ピクスクでデフォルトで使用されている背景素材のまま編集したい場合は、「イベント管理＞会場設定＞ホール」で表示されるデフォルトの画像を保存して、画像編集ソフトでPSDファイルのレイヤーにコピペしてご利用ください。
追加のパーツなどはタッチが合わないかもしれませんが、通行判定などのレイヤーは役に立ちます。
編集方法
あとは普段お使いの画像編集ソフトの機能で、イラストを描きたしたり、手持ちの背景パーツを配置したり、文字や案内板を追加したりなど、自由に編集するのみです。
レイヤーなども使いやすいように変更して構いません。
ピクスク上で背景画像に設定する際には、「PNGファイル」が必要ですので、保存する際に「PNGファイル」で保存することだけご注意ください。
背景パーツの入手先
本PSDファイル上で使用している背景パーツ素材は、こちらになります。
私が公開している無料素材ですので、自由にお使いください。
マップチップ 32×32～ – ぴぽや倉庫
https://pipoya.net/sozai/assets/map-chip_tileset32/
ピクスクにデフォルトで使用されている背景パーツはこちらになりますので、デフォルトのタッチを活かしたい場合はこちらをお使いください。
マップチップ 16×16 – ぴぽや倉庫
https://pipoya.net/sozai/assets/map-chip_tileset16/
もちろんご自分で背景パーツなどを描き足してもいいですし、使用に問題のない他の素材サイトなどのパーツと組み合わせていただいも構いません。
利用条件
特に難しいことは設定しません。
使用した際の連絡や著作権者表記なども不要です。
1点、もし本PSDファイルを使用して作成した背景画像を素材として公開配布する場合には、元データをぴぽやが作成したものとわかるように、どこかに表記(「ぴぽや https://pipoya.net/」)してください。また、有料やなにかしら見返りを求める形での配布はしないでください。
はじめツイッター上で配布していたものですので、ツイッターから入手された方はツイートに書いたとおり、「ぴぽや @pipohi」でも構いません。
利用規約について詳しく確認したい方は、ぴぽやの素材全般の利用規約を記載しているページをご確認ください。今回のものは「無料素材利用規約」が該当になります。
最後に
まだリアルのイベントに安心して参加できる状況ではないため、オンラインでこういったイベントが楽しめるのはとても良いことだと思います。
今回のデータが、みなさんがオンラインイベントを楽しむのにお役に立てれば幸いです。