*disclaimer
640324
[HSP]
07. マルチメディア教材の応用例:複数の画像の操作と「透明」ボタン
- 07. マルチメディア教材の応用例:複数の画像の操作と「透明」ボタン
- 07.1 複数の画像の操作
- 複数の画像をバッファに読み込んでおく
- buffer を使う際は、実際に使う基本画面をscreen命令で明示的に定義する（0番が基本）
- 仮想画面(buffer)から基本画面への画像のコピー
- 1) gmode でコピーするモードと大きさを事前に指定
- 2) gcopy で何番の仮想画面のどの範囲をコピペするかを指定する
- 基本的な流れ
- 具体的な流れ
- 具体例
- 画像の拡大 gzoom
- 07.2 「透明」ボタン
- 07.3 マルチメディア・リーディング教材例
- References
- => TextForHSP08
まえおき
- ここから、技術的に、一段高度な話になります。
07.1 複数の画像の操作
- 画像を事前に「部品」としてバッファに読み込んで番号をつけておき、
- 番号を指定して、画像をプログラムで操作する。
複数の画像をバッファに読み込んでおく
buffer 番号 picload "画像ファイル名"
buffer 2 picload "georgia.jpg" buffer 3 picload "mississippi.jpg"
buffer を使う際は、実際に使う基本画面をscreen命令で明示的に定義する（0番が基本）
screen 0, 横幅, 縦幅 screen 0, 640, 640
仮想画面(buffer)から基本画面への画像のコピー
- 仮想画面：事前にバッファに読み込んで、部品として番号をつけておいた絵を並べてある場所
- パソコン画面上には表示されない。（直接見えない）
- 「仮想」の画面上に並べてあると考える。
1) gmode でコピーするモードと大きさを事前に指定
gmode モード, 大きさ
gmode 0, 640, 480
- モード０で通常、モード１でメモリー間。
- 原則、モード０を使う。
2) gcopy で何番の仮想画面のどの範囲をコピペするかを指定する
gcopy バッファ番号, 左上座標x, y, 横幅, 縦幅
gcopy 2, 0, 0, 125, 98
（画像の座標は、「ペイント」に画像を読み込み調べると便利）
基本的な流れ
pictureFeedback2_simple_demo.hsp(85)
; Picture Feedback minimal ; copyleft 2022-07-07 sugiura@nagoya-u.jp ;----------------------------------------------------------------------------- ; 使う画像に番号をつけていく ;----------------------------------------------------------------------------- buffer 1 ; 画像を事前に読み込んでおく場所の番号 picload "fuji3.jpg" ; 画像を読み込んで、bufferに入れておく buffer 2 picload "rose2.jpg" buffer 3 picload "saboten2.jpg" buffer 4 picload "cups2.jpg" ;------------------------------------------------------------------------------- ; ウィンドウの大きさ設定 screen 0, 640, 480 ; ウインドウの初期化 ０番、ウインドウの大きさの指定 ; bufferを使って画像を読み込んだときは、明示的にウィンドウを指定する ;------------------------------------------ *main ; ボタンの配置 pos 100, 400 button gosub "Fuji", *fuji pos 200, 400 button gosub "Rose", *rose pos 300, 400 button gosub "Sabo", *sabo pos 400, 400 button gosub "Cups", *cups stop ; -------------------------------- sub --------------------------------------- *fuji pos 200, 50 ; 画像を配置する位置 gmode 0, 180, 100 ; モード0で通常画像コピー, 画像の大きさをx, y で gcopy 1 ; 1番の画像 return *rose pos 200, 50 gmode 0, 180, 100 gcopy 2 ; 2番の画像 return *sabo pos 200, 50 gmode 0, 180, 100 gcopy 3 ; 3番の画像 return *cups pos 200, 50 gmode 0, 180, 100 gcopy 4 ; 4番の画像 return
具体的な流れ
(サブルーチン *rose参照)
pos 200, 50 ; 画像を配置する位置 gmode 0, 273, 262 ; モード0で通常画像コピー, 画像の大きさをx, y で gcopy 2, 0, 0;, 273, 262 ; 画像の番号（buffer 2）, その画像の左上の座標, （大きさを指定できる） ; 大きさの指定を省略したらgmodeで指定した大きさとなる wait 200 color 255,255,255 : boxf ; 写真を出した部分を白色（255,255,255）で塗りつぶす（boxf） ;gcopy 1, 200, 50;, 273, 262 ; 元の背景画像（buffer 1）に戻す ; 左上は、上のposで開始点を指定したところ, （大きさを指定できる） ; 大きさの指定を省略したらgmodeで指定した大きさとなる
具体例
- ひとつめの特徴
- 写真を提示した後、写真を消す
- 実際は、白く塗りつぶしている
- 写真を提示した後、写真を消す
- PictureFeedback2.zip(220)
- 二つ目の特徴（上のスクリプトではコメントアウトしてある部分）
- 背景にも写真を使っている
- そこに違う写真を重ねた場合、写真を消すのに「白く塗る」手はつかえない
- もとあった背景写真の該当部分を「貼り直し」て元に戻している
画像の拡大 gzoom
- gcopyの代わりに使う
- オプションの形式が違うので注意
gzoom コピー先での横幅,縦幅, 画像のバッファ番号, コピー元の左上x座標,y座標, コピー元の大きさ横幅,縦幅
pictureFeedback2_simple_demo_zoom.hsp(65)
; Picture Feedback simple demo zoom ; copyleft 2022-07-07 sugiura@nagoya-u.jp ; 2022-07-09 ;----------------------------------------------------------------------------- ; 使う画像に番号をつけていく ;----------------------------------------------------------------------------- buffer 1 ; 画像を事前に読み込んでおく場所の番号 picload "fuji3.jpg" ; 画像を読み込んで、bufferに入れておく buffer 2 picload "rose2.jpg" buffer 3 picload "saboten2.jpg" buffer 4 picload "cups2.jpg" ;------------------------------------------------------------------------------- ; ウィンドウの大きさ設定 screen 0, 640, 480 ; ウインドウの初期化 ０番、ウインドウの大きさの指定 ; bufferを使って画像を読み込んだときは、明示的にウィンドウを指定する ;------------------------------------------ *main ; ボタンの配置 pos 100, 400 button gosub "Fuji", *fuji pos 200, 400 button gosub "Rose", *rose pos 300, 400 button gosub "Sabo", *sabo pos 400, 400 button gosub "Cups", *cups stop ; -------------------------------- sub --------------------------------------- *fuji pos 200, 50 ; 画像を配置する位置 gmode 0, 180, 100 ; モード0で通常画像コピー, 画像の大きさをx, y で ; gcopy 1 ; 1番の画像 gzoom 360, 200, 1, 50,50, 180, 100 return *rose pos 200, 50 gmode 0, 180, 100 ;gcopy 2 ; 2番の画像 gzoom 360, 200, 2, 50,50, 180, 100 return *sabo pos 200, 50 gmode 0, 180, 100 ;gcopy 3 ; 3番の画像 gzoom 360, 200, 3, 0,0, 180, 100 return *cups pos 200, 50 gmode 0, 180, 100 ;gcopy 4 ; 4番の画像 gzoom 360, 200, 4, 0,0, 180, 100 return
07.2 「透明」ボタン
- テキストのある部分（単語とか）をクリックして、反応するようにするには
- テキストを画像として読み込んでおき、
- 該当部分の範囲を指定して、
- そこをbuttonとして機能するようにする。
具体例
- IHaveADreamToday2.zip
テキスト全体を画像として読み込む
- 事前に
buffer 1 ; buffer 1に
picload "IHaveADream.png" ; 画像を読み込む
- あとで
*main; テキスト全体を表示
gmode 0, 640, 480 ; 表示モードと大きさ指定
pos 0,0 ; 左上角から、
gcopy 1,0,0 ; バッファ１の画像を表示
該当部分の範囲を指定して、そこをbuttonとして機能するようにする。
pos 103, 154 ; ボタンの左上の座標 objsize 97, 24 ; そこから右へいくつ、下へいくつとエリアを指定（そのエリアをボタンとして使用） objimage 1, 103, 154, 103, 154, 103, 154 ; その指定した範囲をオブジェクト（ボタン）とする ; 最初の番号が buffer番号 1 ; 次の数字の組み合わせが、表示する画像の中のボタンの左上の位置 103, 154 ; その次の数字の組み合わせが、ボタンを押したときの位置（省略可） ; 最後の数字の組み合わせが、ボタンの上にマウスが来たときの位置（省略可） button gosub "", *mississippi ; ボタンとしての機能、文字は表示させないので""とだけ ; ボタン命令で、上で設定した画像がボタンとして使われる。
サブルーチンで、文字、音声、画像を提示する
*mississippi mmplay 1 pos 10, 510 color 0,0,0 mes "ミシシッピ州です。" gmode 1, 125, 98 gcopy 3, 0, 0, 125, 98 ; 3番のバッファーがミシシッピーの画像 wait 200 pos 10, 510 color 255,255,255 : boxf 10, 510 return
- wait 200 待った後、
- 注の部分（縦500より下の部分）を白く塗りつぶして、注の表示を「消す」
07.3 マルチメディア・リーディング教材例
CuriosityRover.zip(259)
; Curiosity Rover 01 ; copyleft 2017-07-12 sugiura@nagoya-u.jp ; テキストを画像として読み込んでおいて、 ; 文中の語句（のエリア）を指定して、注を出す。 ;----------------------------------------------------------------------------- ;-------------------------------------------------------------------------------------- ; 注に使う音声を読み込んで番号をつけておく mmload "narration.mp3", 0 mmload "mechanics.mp3", 1 mmload "curiosity.mp3", 2 mmload "algorithm.mp3", 3 mmload "traction.mp3", 4 mmload "jet.mp3", 5 mmload "pasadena.mp3", 6 mmload "extensive.mp3", 7 mmload "signs.mp3", 8 mmload "rugged.mp3", 9 mmload "level.mp3", 10 mmload "uneven.mp3", 11 mmload "incline.mp3", 12 ;------------------------------------------------------------------------------ buffer 0 ; 画像を事前に読み込んでおく場所の番号 picload "curiosity-text.jpg" ; 画像を読み込んで、bufferに入れておく ;---------------------------------- ; 注に使う画像に番号をつけていく buffer 2 picload "rover.jpg" buffer 3 picload "pasadena.jpg" ;------------------------------------------------------------------------------- screen 1, 660, 660 ; ウインドウの初期化 ０番、ウインドウの大きさの指定 ; bufferを使って画像を読み込んだときは、明示的にウィンドウを指定する ;------------------------------------------ *main ; テキスト全体を表示 gsel 1 gmode 0, 657, 479 ; 表示モードと大きさ指定 pos 0,0 ; 左上角から、 gcopy 0, 0, 0, 657, 479 ; バッファ0の画像を表示 ;------------------------------------------ ; 一つ目のボタン： pos 127, 8 ; ボタンの位置 objsize 100, 20 ; ボタンにする画像のサイズ（大きな画像を読み込んでおいて、その一部を ; ボタンとして使用することもできる。） ; ボタンの位置とサイズで、ボタンの位置と大きさを指定することになる objimage 0, 127, 8, 127, 10, 127, 9 ; ボタン画像の指定をする。 ; 最初の番号が buffer番号 ; 次の数字の組み合わせが、表示する画像の中のボタンの左上の位置 ; その次の数字の組み合わせが、ボタンを押したときの位置（省略可） ; 最後の数字の組み合わせが、ボタンの上にマウスが来たときの位置（省略可） button gosub "", *mechanics ;----------------------------------------- ; 二つ目のボタン： pos 5, 30 ; 左上の座標 objsize 150, 20 ; そこから右へいくつ、下へいくつとエリアを指定 objimage 0, 5, 30, 5, 32, 5, 31 ; その指定した範囲をオブジェクト（ボタン）とする button gosub "", *curiosity ; ボタンとしての機能、文字は表示させないので""とだけ。 ;----------------------------------------- ; ３つ目のボタン： pos 62, 59 ; 左上の座標 objsize 100, 20 ; そこから右へいくつ、下へいくつとエリアを指定 objimage 0, 62, 59, 62, 61, 62, 60 ; その指定した範囲をオブジェクト（ボタン）とする button gosub "", *algorithm ; ボタンとしての機能、文字は表示させないので""とだけ。 ;----------------------------------------- ; ４つ目のボタン： pos 147, 80 ; 左上の座標 objsize 150, 20 ; そこから右へいくつ、下へいくつとエリアを指定 objimage 0, 147, 80, 147, 82, 147, 81 ; その指定した範囲をオブジェクト（ボタン）とする button gosub "", *traction ; ボタンとしての機能、文字は表示させないので""とだけ。 ;----------------------------------------- ; 五つ目のボタン： pos 178, 125 ; 左上の座標 objsize 250, 20 ; そこから右へいくつ、下へいくつとエリアを指定 objimage 0, 178, 125, 178, 127, 178, 126 ; その指定した範囲をオブジェクト（ボタン）とする button gosub "", *jet ; ボタンとしての機能、文字は表示させないので""とだけ。 pos 456, 124 ; 左上の座標 objsize 120, 20 ; そこから右へいくつ、下へいくつとエリアを指定 objimage 0, 456, 124, 456, 126, 456, 125 ; その指定した範囲をオブジェクト（ボタン）とする button gosub "", *pasadena pos 244, 191 ; 左上の座標 objsize 180, 20 ; そこから右へいくつ、下へいくつとエリアを指定 objimage 0, 244, 191, 244, 193, 244, 192 ; その指定した範囲をオブジェクト（ボタン）とする button gosub "", *extensive pos 465, 242 ; 左上の座標 objsize 135, 20 ; そこから右へいくつ、下へいくつとエリアを指定 objimage 0, 465, 242, 465, 244, 465, 243 ; その指定した範囲をオブジェクト（ボタン）とする button gosub "", *signs pos 6, 285 ; 左上の座標 objsize 65, 20 ; そこから右へいくつ、下へいくつとエリアを指定 objimage 0, 6, 285, 6, 287, 6, 286 ; その指定した範囲をオブジェクト（ボタン）とする button gosub "", *rugged pos 233, 286 ; 左上の座標 objsize 150, 20 ; そこから右へいくつ、下へいくつとエリアを指定 objimage 0, 233, 286, 233, 288, 233, 287 ; その指定した範囲をオブジェクト（ボタン）とする button gosub "", *level pos 493, 307 ; 左上の座標 objsize 145, 20 ; そこから右へいくつ、下へいくつとエリアを指定 objimage 0, 493, 307, 493, 309, 493, 308 ; その指定した範囲をオブジェクト（ボタン）とする button gosub "", *uneven pos 43, 328 ; 左上の座標 objsize 80, 20 ; そこから右へいくつ、下へいくつとエリアを指定 objimage 0, 43, 328, 43, 330, 43, 329 ; その指定した範囲をオブジェクト（ボタン）とする button gosub "", *incline ;------------------------------------------------------------------ ; 下部に、その他のボタンを配置 objimage -1 ; objimage命令をデフォルトに戻す（buttonをデフォルトに） *listen pos 580, 600 button gosub "Listen", *narration *stopspeech button gosub "Stop", *tomare *Quit button "Quit", *owari pos 0, 480 mes " Notes ----------------------------------------------------------------" ;------------------------------------------------------------------------- stop *owari end ; -------------------------------- sub --------------------------------------- *tomare mmstop return *narration mmplay 0 return ;-----具体的な注 *mechanics mmplay 1 pos 10, 510 mes "mechanics = 修理工" await 3000 pos 10, 510 picload "white.jpg", 1 return *curiosity mmplay 2 pos 10, 510 mes "Curiosity rover = NASAの火星探索車 Curiosity" gmode 1, 300, 168 ; モード１でメモリ間コピー, ｘ幅ドット, ｙ幅 gcopy 2, 0, 30, 300, 168 ; ウィンドウ番号, ｘ座標, ｙ座標, ｘ幅ドット, ｙ幅 ; 2番のバッファーがジョージアの画像 wait 300 pos 10, 510 picload "white.jpg", 1 return *algorithm mmplay 3 pos 10, 510 mes "algorithm = アルゴリズム、計算処理方法" wait 300 pos 10, 510 picload "white.jpg", 1 return *traction mmplay 4 pos 10, 510 mes "traction control = 駆動制御機構" wait 300 pos 10, 510 picload "white.jpg", 1 return *jet mmplay 5 pos 10, 510 mes "Jet Propulsion Laboratory = ジェット推進研究所" wait 300 pos 10, 510 picload "white.jpg", 1 return *pasadena mmplay 6 pos 10, 510 mes "Pasadena = ロサンジェルス北東の都市" gmode 1, 269, 188 ; モード１でメモリ間コピー, ｘ幅ドット, ｙ幅 gcopy 3, 0, 30, 269, 188 ; ウィンドウ番号, ｘ座標, ｙ座標, ｘ幅ドット, ｙ幅 ; 3番のバッファーがジョージアの画像 wait 300 pos 10, 510 picload "white.jpg", 1 return *extensive mmplay 7 pos 10, 510 mes "extensive testing = 広範囲にわたるテスト実施" wait 300 pos 10, 510 picload "white.jpg", 1 return *signs mmplay 8 pos 10, 510 mes "signs of wear = 磨り減った兆候、wear = 疲弊" wait 300 pos 10, 510 picload "white.jpg", 1 return *rugged mmplay 9 pos 10, 510 mes "rugged = ギザギザの" wait 300 pos 10, 510 picload "white.jpg", 1 return *level mmplay 10 pos 10, 510 mes "on level ground = 水平の地面では" wait 300 pos 10, 510 picload "white.jpg", 1 return *uneven mmplay 11 pos 10, 510 mes "uneven terrain = 不整地" wait 300 pos 10, 510 picload "white.jpg", 1 return *incline mmplay 12 pos 10, 510 mes "incline = 勾配" wait 300 pos 10, 510 picload "white.jpg", 1 return ; End of Script
References
- https://wiki.hsp.moe/HSP%E8%AC%9B%E5%BA%A7%EF%BC%8F%E5%9F%BA%E6%9C%AC%E7%9A%84%E3%81%AA%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%83%88%E3%81%AE%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3.html
- 「アニメーション その２ 」の図がわかりやすいです。
- https://blog.goo.ne.jp/daiou24/e/60d6ce8f4a9ccaa6a2d17c8c116f0ade
https://sugiura-ken.org/wiki/