{{category HSP}} !!!07. マルチメディア教材の応用例:複数の画像の操作と「透明」ボタン {{outline}} ---- !まえおき *ここから、技術的に、一段高度な話になります。 !!07.1 複数の画像の操作 *画像を事前に「部品」としてバッファに読み込んで番号をつけておき、 *番号を指定して、画像をプログラムで操作する。 ! 複数の画像をバッファに読み込んでおく {{pre buffer 番号 picload "画像ファイル名" }} {{pre buffer 2 picload "georgia.jpg" buffer 3 picload "mississippi.jpg" }} ! buffer を使う際は、実際に使う基本画面をscreen命令で明示的に定義する(0番が基本) {{pre screen 0, 横幅, 縦幅 screen 0, 640, 640 }} ! <<仮想画面(buffer)>>から基本画面への画像のコピー *仮想画面:事前にバッファに読み込んで、部品として番号をつけておいた絵を並べてある場所 **パソコン画面上には表示されない。(直接見えない) **「仮想」の画面上に並べてあると考える。 ! 1) gmode でコピーするモードと大きさを事前に指定 gmode モード, 大きさ gmode 0, 640, 480 * モード0で通常、モード1でメモリー間。 **原則、モード0を使う。 ! 2) gcopy で何番の仮想画面のどの範囲をコピペするかを指定する gcopy バッファ番号, 左上座標x, y, 横幅, 縦幅 gcopy 2, 0, 0, 125, 98 (画像の座標は、「ペイント」に画像を読み込み調べると便利) !基本的な流れ {{ref pictureFeedback2_simple_demo.hsp}} {{ref_text pictureFeedback2_simple_demo.hsp}} ! 具体的な流れ (サブルーチン *rose参照) {{pre 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で指定した大きさとなる }} ! 具体例 *ひとつめの特徴 **写真を提示した後、写真を消す ***実際は、白く塗りつぶしている *{{ref PictureFeedback2.zip}} *二つ目の特徴(上のスクリプトではコメントアウトしてある部分) **背景にも写真を使っている **そこに違う写真を重ねた場合、写真を消すのに「白く塗る」手はつかえない **もとあった背景写真の該当部分を「貼り直し」て元に戻している ! 画像の拡大 gzoom *gcopyの代わりに使う *オプションの形式が違うので注意 gzoom コピー先での横幅,縦幅, 画像のバッファ番号, コピー元の左上x座標,y座標, コピー元の大きさ横幅,縦幅 {{ref pictureFeedback2_simple_demo_zoom.hsp}} {{ref_text pictureFeedback2_simple_demo_zoom.hsp}} !!07.2 「透明」ボタン * テキストのある部分(単語とか)をクリックして、反応するようにするには * テキストを画像として読み込んでおき、 * 該当部分の範囲を指定して、 * そこをbuttonとして機能するようにする。 ! 具体例 *IHaveADreamToday2.zip {{ref IHaveADreamToday2.hsp}} ! テキスト全体を画像として読み込む * 事前に {{pre buffer 1 ; buffer 1に picload "IHaveADream.png" ; 画像を読み込む }} * あとで {{pre *main; テキスト全体を表示 gmode 0, 640, 480 ; 表示モードと大きさ指定 pos 0,0 ; 左上角から、 gcopy 1,0,0 ; バッファ1の画像を表示 }} ! 該当部分の範囲を指定して、そこをbuttonとして機能するようにする。 {{pre pos 103, 154 ; ボタンの左上の座標 objsize 97, 24 ; そこから右へいくつ、下へいくつとエリアを指定(そのエリアをボタンとして使用) objimage 1, 103, 154, 103, 154, 103, 154 ; その指定した範囲をオブジェクト(ボタン)とする ; 最初の番号が buffer番号 1 ; 次の数字の組み合わせが、表示する画像の中のボタンの左上の位置 103, 154 ; その次の数字の組み合わせが、ボタンを押したときの位置(省略可) ; 最後の数字の組み合わせが、ボタンの上にマウスが来たときの位置(省略可) button gosub "", *mississippi ; ボタンとしての機能、文字は表示させないので""とだけ ; ボタン命令で、上で設定した画像がボタンとして使われる。 }} ! サブルーチンで、文字、音声、画像を提示する {{pre *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 マルチメディア・リーディング教材例 {{ref CuriosityRover.zip}} {{ref_text CuriosityRover01.hsp}} !!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 **「アニメーション その2 」の図がわかりやすいです。 *https://blog.goo.ne.jp/daiou24/e/60d6ce8f4a9ccaa6a2d17c8c116f0ade !!! => TextForHSP08