第17話の今回は、プロデルで画像を扱う方法を紹介します。アプリ作りにイラストや写真、アイコンは欠かせない存在です。プロデルで作るアプリでも画像を表示させることができ、また、写真やイラストなどの画像を加工して別の画像ファイルとして保存することもできます。プロデルなら色々な用途のための画像ツールを作れます。
ウィンドウに画像を表示するには
プロデルデザイナではマウス操作だけで画面上に画像を表示するプログラムを作れます。画像を表示させるには、ウィンドウのピクチャー部品を使います。
操作方法
- 「ウィンドウの設計」画面で「ピクチャー」部品を貼り付ける
- 設定項目から「画像」設定項目を設定します。設定項目一覧から「画像」設定項目の[…]をクリックします。
メイン画面を表示する
待機する
メイン画面とは
ウィンドウを継承する
はじめの手順
初期化する
ーー貼り付けた部品に対する操作をここに書きます
終わり
初期化する手順
ーー自動生成された手順です。ここにプログラムを書き加えても消える場合があります
この実質大きさを｛489,488｝に変える
この内容を「メイン画面」に変える
初期化開始する
ピクチャー1というピクチャーを作る
ピクチャー1を初期化開始する
その位置と大きさを｛63,37,368,400｝に変える
その画像を「flower_sumire.png」に変える
ピクチャー1を初期化終了する
初期化終了する
この設計スケール比率を｛144,144｝に変える
終わり
終わり
すみれのイラストはこちらから拝借しました。
すみれのイラスト（花） | かわいいフリー素材集 いらすとや (irasutoya.com)
「画像」種類
プロデル上で画像を操作するには、画像データを表現する「画像」種類を使います。
画像オブジェクトは、メモリ上に格納された画像です。このオブジェクトの手順を呼び出して、画像を切り取ったり、画像にエフェクトを加えたり、複数の画像を合成したりと基本的な画像操作ができます。
「画像」種類のオブジェクトは、JPEGファイルやPNGファイル、ビットマップファイルから作成できます。画像オブジェクトでは、画像のサイズや各種情報を取得できます。
元画像という画像(【画像ファイルのパス】)を作る
元画像という画像(【幅】,【高さ】)を作る
元画像という画像(【画像バイナリデータ】)を作る画像を切り取る
画像のうちで特定の部分だけをトリミングするには「切り取る」手順を使います。
【元画像】から【矩形】を切り取る【元画像】には、画像オブジェクト、【矩形】には元画像から切り取る位置と大きさを{横,縦,幅,高さ}の順に配列で指定できます。戻り値には、切り取られた画像オブジェクトが返されます。
メイン画面を表示する
待機する
メイン画面とは
ウィンドウを継承する
はじめの手順
初期化する
ーー貼り付けた部品に対する操作をここに書きます
元画像という画像(「flower_sumire.png」)を作る
元画像から{80,0,140,140}を切り取って切り取り画像とする
ピクチャー1の画像を切り取り画像に変える
終わり
初期化する手順
ーー自動生成された手順です。ここにプログラムを書き加えても消える場合があります
この実質大きさを｛489,488｝に変える
この内容を「メイン画面」に変える
初期化開始する
ピクチャー1というピクチャーを作る
ピクチャー1を初期化開始する
その位置と大きさを｛63,37,368,400｝に変える
ピクチャー1を初期化終了する
初期化終了する
この設計スケール比率を｛144,144｝に変える
終わり
終わり
画像を拡大縮小する
画像を本来のサイズより拡大・縮小するには「リサイズする」手順を使います。リサイズする手順では、幅と高さをピクセルで指定する他に『～倍』序数詞で倍率で拡大・縮小できます。
【元画像】を【サイズ】へリサイズする
【元画像】を【倍率】倍リサイズする
【元画像】には元の画像オブジェクト、【サイズ】にはリサイズ後の大きさを指定します。【倍率】では倍率に合わせて幅と高さを拡大・縮小します。戻り値には、拡大・縮小された画像オブジェクトが返されます。
メイン画面を表示する
待機する
メイン画面とは
ウィンドウを継承する
はじめの手順
初期化する
ーー貼り付けた部品に対する操作をここに書きます
元画像という画像(「flower_sumire.png」)を作る
元画像を{150,150}へリサイズしてリサイズ画像とする
ピクチャー1の画像をリサイズ画像に変える
終わり
初期化する手順
ーー自動生成された手順です。ここにプログラムを書き加えても消える場合があります
この実質大きさを｛489,488｝に変える
この内容を「メイン画面」に変える
初期化開始する
ピクチャー1というピクチャーを作る
ピクチャー1を初期化開始する
その位置と大きさを｛63,37,368,400｝に変える
ピクチャー1を初期化終了する
初期化終了する
この設計スケール比率を｛144,144｝に変える
終わり
終わり
キャンバスを使った画像の加工
キャンバス部品では、キャンバス上に描いた図形を画像オブジェクトへ変換したり、画像ファイルへ保存できます。
例えば、画像に文字を入れたい、別々の画像を重ねたい、といった時には、キャンバスが加工しやすく便利です。
次のプログラムでは、キャンバス部品に「画像図形」と「キャンバス文字」を貼り付けて、文字付きのイラスト画像を描きます。また、この画像をPNGファイルとして保存します。
メイン画面を表示する
待機する
メイン画面とは
ウィンドウを継承する
はじめの手順
初期化する
ーー貼り付けた部品に対する操作をここに書きます
キャンバス1の大きさを{300,300}に変える
キャンバス1へ画像を描く
その位置と大きさは、｛20,30,150,150｝
その伸縮を○に変える
その画像を「flower_sumire.png」に変える
キャンバス1へ「Sumire」という文字を描く
その位置は｛30,150｝
そのフォントを「メイリオ」に変える
その文字色を紫色に変える
その文字サイズを26に変える
キャンバス1を「sumire.png」へ保存する
終わり
初期化する手順
ーー自動生成された手順です。ここにプログラムを書き加えても消える場合があります
この実質大きさを｛489,488｝に変える
この内容を「メイン画面」に変える
初期化開始する
キャンバス1というキャンバスを作る
その位置と大きさを｛51,43,388,404｝に変える
その背景色を「FloralWhite」に変える
初期化終了する
この設計スケール比率を｛144,144｝に変える
終わり
終わり
キャンバスの図形を画像ファイルとして保存するには「保存する」手順を使います。保存できる画像形式は、PNG, JPEG, BMP, GIF, EMF, WMFです。
キャンバス1を「sumire.png」へ保存するキャンバスに描いた図形を画像オブジェクトとして得るには「図形画像」設定項目を使います。
キャンバス1の図形画像画像にエフェクトを付ける
画像を調整したり、エフェクトをかけるには、画像フィルタを使います。
プロデルでは次のような画像フィルタが用意されています。
画像にフィルタを適用するには、次の順番にプログラムします。
- 画像フィルタを作り、パラメータを設定項目で設定する
- 画像オブジェクトにフィルタを適用する
図形の明るさやコントラストを調整するには「基本フィルタ」種類を使います。特定の色味を調整するには「RGBフィルタ」種類、彩度や輝度、色相を調整するには「HLSフィルタ」種類を使います。これらのフィルタを同時に複数適用することもできます。
ここでは「基本フィルタ」を使って「明るさ」「ガンマ値」の設定項目を指定して画像を補正して保存するプログラムを作ってみます。
元画像という画像(「flower_sumire.png」)を作る
基本フィルタを作ってFとする
その明るさを100に変える
そのガンマ値を2に変える
元画像にFを適用して加工画像とする
加工画像を「結果.png」へ保存する
フォトレタッチツールを作ってみる
画像フィルタを使った簡易的なフォトレタッチツールを作ってみます。
このツールは、キャンバスといくつかのスライダで構成されたシンプルな画面とします。「明るさ」「コントラスト」「ガンマ値」「色相」「輝度」「彩度」の6つのパラメータをスライダ部品で調整できるようにします。また、調整した画像は、画像ファイルとして保存できるようにします。
このプログラムは、GUI部品をたくさん配置しますので200行ほどあります。プログラムは長いですが、重要な画像調整の部分は、フィルタのパラメータを設定した後にエフェクトを適用する所だけです。なお、パラメータによってスライドの範囲が異なる点に注意が必要です。
写真=無
メイン画面を表示する
待機する
メイン画面とは
ウィンドウを継承する
はじめの手順
初期化する
ーー貼り付けた部品に対する操作をここに書きます
キャンバス1へ画像を描いて写真とする
その位置は｛0,0｝
基本フィルタを作って基本調整とする
写真に基本調整を追加する
HLSフィルタを作ってHSL調整とする
写真にHSL調整を追加する
終わり
初期化する手順
ーー自動生成された手順です。ここにプログラムを書き加えても消える場合があります
この実質大きさを｛606,435｝に変える
この内容を「プロデルフォトレタッチ」に変える
初期化開始する
保存ボタンというボタンを作る
その位置と大きさを｛478,373,112,34｝に変える
その内容を「保存」に変える
その移動順を9に変える
その位置固定方向を「下+右」に変える
タブフレーム1というタブフレームを作る
その位置と大きさを｛378,12,216,341｝に変える
その見出しサイズを｛92,24｝に変える
その移動順を8に変える
その位置固定方向を「上+下+右」に変える
基本ページというタブページをタブフレーム1へ作る
その位置と大きさを｛4,28,208,309｝に変える
その内容を「基本」に変える
その背景色を「透明」に変える
明るさスライダというスライダを基本ページへ作る
明るさスライダを初期化開始する
その位置と大きさを｛20,43,174,69｝に変える
その最大値を127に変える
その最小値を-127に変える
その目盛り間隔を45に変える
その移動順を10に変える
明るさスライダを初期化終了する
ガンマ値スライダというスライダを基本ページへ作る
ガンマ値スライダを初期化開始する
その位置と大きさを｛20,239,174,69｝に変える
その最大値を100に変える
その目盛り間隔を10に変える
その値を10に変える
その移動順を12に変える
ガンマ値スライダを初期化終了する
ラベル7というラベルを基本ページへ作る
その位置と大きさを｛10,17,100,23｝に変える
その内容を「明るさ」に変える
その移動順を7に変える
その背景色を「透明」に変える
コントラストスライダというスライダを基本ページへ作る
コントラストスライダを初期化開始する
その位置と大きさを｛20,141,174,69｝に変える
その最大値を45に変える
その最小値を-45に変える
その目盛り間隔を5に変える
その移動順を11に変える
コントラストスライダを初期化終了する
ラベル8というラベルを基本ページへ作る
その位置と大きさを｛10,115,100,23｝に変える
その内容を「コントラスト」に変える
その移動順を8に変える
その背景色を「透明」に変える
ラベル9というラベルを基本ページへ作る
その位置と大きさを｛10,213,100,23｝に変える
その内容を「ガンマ値」に変える
その移動順を9に変える
その背景色を「透明」に変える
HLSページというタブページをタブフレーム1へ作る
その位置と大きさを｛4,28,208,309｝に変える
その内容を「HSL」に変える
その移動順を1に変える
その背景色を「透明」に変える
その余白を｛3｝に変える
色相スライダというスライダをHLSページへ作る
色相スライダを初期化開始する
その位置と大きさを｛22,41,174,69｝に変える
その最大値を180に変える
その最小値を-180に変える
その目盛り間隔を45に変える
その移動順を4に変える
色相スライダを初期化終了する
"輝度スライダ"というスライダをHLSページへ作る
"輝度スライダ"を初期化開始する
その位置と大きさを｛22,237,174,69｝に変える
その最大値を100に変える
その最小値を-100に変える
その目盛り間隔を25に変える
その移動順を6に変える
"輝度スライダ"を初期化終了する
ラベル1というラベルをHLSページへ作る
その位置と大きさを｛12,15,100,23｝に変える
その内容を「色相」に変える
その移動順を1に変える
その背景色を「透明」に変える
"彩度スライダ"というスライダをHLSページへ作る
"彩度スライダ"を初期化開始する
その位置と大きさを｛22,139,174,69｝に変える
その最大値を100に変える
その最小値を-100に変える
その目盛り間隔を25に変える
その移動順を5に変える
"彩度スライダ"を初期化終了する
ラベル2というラベルをHLSページへ作る
その位置と大きさを｛12,113,100,23｝に変える
その内容を「彩度」に変える
その移動順を2に変える
その背景色を「透明」に変える
ラベル3というラベルをHLSページへ作る
その位置と大きさを｛12,211,100,23｝に変える
その内容を「輝度」に変える
その移動順を3に変える
その背景色を「透明」に変える
キャンバス1というキャンバスを作る
その位置と大きさを｛12,12,360,395｝に変える
その移動順を7に変える
そのドラッグドロップを○に変える
その位置固定方向を「上+下+左+右」に変える
初期化終了する
この設計スケール比率を｛144,144｝に変える
タブフレーム1の一覧を｛「基本ページ」,「HLSページ」｝に変える
終わり
キャンバス1がドラッグドロップされた時の手順
【一覧】は、イベントのファイル一覧
写真の画像を一覧(1)に変える
キャンバス1の内部大きさを写真の画像の大きさに変える
キャンバス1を更新する
終わり
明るさスライダが変化した時の手順
基本調整の明るさを明るさスライダの値に変える
適用する
終わり
ガンマ値スライダが変化した時の手順
もし写真が無なら返す
基本調整のガンマ値をガンマ値スライダの値/10に変える
適用する
終わり
コントラストスライダが変化した時の手順
基本調整のコントラストをコントラストスライダの値に変える
適用する
終わり
色相スライダが変化した時の手順
HSL調整の色相を色相スライダの値に変える
適用する
終わり
彩度スライダが変化した時の手順
HSL調整の彩度を彩度スライダの値/100に変える
適用する
終わり
輝度スライダが変化した時の手順
HSL調整の輝度を輝度スライダの値/100に変える
適用する
終わり
適用する手順
写真を効果適用する
キャンバス1を更新する
終わり
保存ボタンがクリックされた時の手順
保存画面のフィルタを「PNGファイル|*.png|JPEGファイル|*.jpg|すべてのファイル|*.*」に変える
ファイル名は、保存するファイルを選択したもの
もしファイル名が無なら返す
写真をファイル名へ保存する
終わり
終わり
パズルゲームを作ってみる
続いてパズルゲームを作ってみます。板状の箱の中に15個の駒(ピース)がはめ込まれていて、空白の1マスを使って駒をスライドして動かして、絵柄が揃うように並べ替えるゲームです。
パズルゲームは15パズルを応用して作ります。15パズルの詳しい解説は、プロデルで15パズルを作る – Qiitaにて書いていますので、ご参照ください。
今回は、1～15の数字の代わりに切り取った画像を使います。1～15までの数字に相当する縦横に4分割した画像(16個)を使います。「切り取る」手順で切り取った画像は、左上から順番に1～16番目の要素として、配列へ格納していきます。
マス数=4
元画像という画像(「flower_sumire.png」)を作る
//画像を16個に分割して配列に格納する
【マスX:整数】は、元画像の幅/マス数
【マスY:整数】は、元画像の高さ/マス数
切り取り画像一覧は{}
数は、1
Yを0からマス数-1まで増やしながら繰り返す
Xを0からマス数-1まで増やしながら繰り返す
元画像から{X*マスX,Y*マスY,マスX,マスY}を切り取って切り取り画像一覧(数)とする
数を増やす
そして
そして
メイン画面を表示する
待機する
メイン画面とは
ウィンドウを継承する
+盤面={}
+駒一覧={}
+シャッフル回数=20
+移動数=0
はじめの手順
初期化する
ーー貼り付けた部品に対する操作をここに書きます
キャンバス1に「」という文字を書いて移動数ラベルとする
その位置は{20,5}
そのフォントを「メイリオ」に変える
その文字色を青に変える
その文字サイズを20に変える
マスサイズは、320/マス数
(マス数*マス数-1)回数にカウントして繰り返す
N=数-1
X=N%マス数
Y=((N-N%マス数)/マス数)
キャンバス1へ子キャンバスを作って駒とする
その位置と大きさは｛20+X*マスサイズ,40+Y*マスサイズ,マスサイズ,マスサイズ｝
その線色は、黒
そのクリックされた時の手順は、駒クリック
駒へ画像を描く
その大きさは、駒の大きさ
その画像を切り取り画像一覧(数)に変える
駒一覧(数)は、駒
盤面(Y+1,X+1)は、駒
そして
盤面(マス数,マス数)は、無
盤面をシャッフルする
キャンバス1を更新する
終わり
初期化する手順
ーー自動生成された手順です。ここにプログラムを書き加えても消える場合があります
この実質大きさを｛550,590｝に変える
この内容を「イラストパズルゲーム」に変える
初期化開始する
キャンバス1というキャンバスを作る
その位置と大きさを｛0,0,550,590｝に変える
そのドッキング方向を「全体」に変える
初期化終了する
この設計スケール比率を｛144,144｝に変える
終わり
駒クリックの手順
駒は、発生元
駒を移動したなら
移動数を増やす
移動数ラベルの内容は、移動数
盤面をチェックする
そして
終わり
[駒]を移動する手順
駒座標は、駒の駒座標
駒座標を{-1,0}だけ移動したなら
他で駒座標を{0,-1}だけ移動したなら
他で駒座標を{1,0}だけ移動したなら
他で駒座標を{0,1}だけ移動したなら
そうでなければ
×を返す
そして
○を返す
終わり
[元座標]を[移動量]だけ、移動する手順
先座標は{元座標(1)+移動量(1),元座標(2)+移動量(2)}
先座標(1)が1未満または先座標(1)がマス数より大きいなら×を返す
先座標(2)が1未満または先座標(2)がマス数より大きいなら×を返す
盤面(先座標(2),先座標(1))が無でないなら、×を返す
駒は、盤面(元座標(2),元座標(1))
駒の位置は｛駒の横+(先座標(1)-元座標(1))*マスサイズ,駒の縦+(先座標(2)-元座標(2))*マスサイズ｝
盤面(元座標(2),元座標(1))と盤面(先座標(2),先座標(1))を交換する
○を返す
終わり
[駒]の、駒座標を求める手順
マス数回1からたてにカウントして繰り返す
マス数回1からよこにカウントして繰り返す
もし盤面(たて,よこ)が駒なら、{よこ,たて}を返す
そして
そして
無を返す
終わり
盤面をシャッフルする手順
シャッフル回数回繰り返す
繰り返す
選択駒は、駒一覧(1からマス数*マス数-1までの乱数)
もし選択駒を移動したなら繰り返しから抜け出す
そして
そして
終わり
盤面をチェックする手順
マス数*マス数回数にカウントして繰り返す
N=数-1
よこ=N%マス数+1
たて=((N-N%マス数)/マス数)+1
盤面(たて,よこ)が駒一覧(数)でないなら、×を返す
そして
キャンバス1に「クリア！」という文字を書く
その位置は、{120,150}
そのフォントを「メイリオ」に変える
その文字色を赤に変える
その文字サイズを20に変える
キャンバス1を更新する
○を返す
終わり
終わりまとめ
今回は、プロデルで画像を取り扱う方法を紹介しました。
今回ご紹介したプログラムを改造して、自分専用の使いやすい画像の自動処理ツールを作れます。例えばこれまで画像編集アプリなどで手作業で編集していた画像の加工作業をプロデルのプログラムで簡単・便利することができます。自分に合った利用用途は、色々思いつくかと思います。
一方で、画像オブジェクトを使いこなして、イラストをたくさん使ったゲームを作ってみるのも楽しいと思います。ぜひ作ってみましょう。
※当ブログの記事の著作権はゆうとにあります。プロデルに関係が無い目的で、文章や図表,プログラムを複製, 改変, 移植して掲載することを堅く禁止します
