HSP ① ワイプ効果

01	*STARTFROMHERE
02	buffer 2,,,0
03	picload "00_00_title.jpg"
04	gsel 0,2
05	pos 0,0
06	gcopy 2,0,0,640,480
07	gosub *WIPE
08	stop
09
10
11	*WIPE
12	px=0 : py=0 : wx=640 : wy=480
13	gmode 1
14	redraw 2
15	color 0:boxf 0,0,wx,wy
16	gosub *WIPESUB1
17	pos 0,0:gcopy 2,0,0,wx,wy
18	wait 100
19	gosub *WIPESUB2
20	return
21
22	*WIPESUB1
23	repeat 16
24	t=cnt
25	await 30
26	repeat wx/16
27	redraw 1,cnt*16+t,0,1,wy
28	loop
29	loop
30	redraw 2
31	return
32
33	*WIPESUB2
34	repeat wx/16+16
35	t=cnt*16
36	await 30
37	repeat 16
38	redraw 1,t-(cnt*15),0,1,wy
39	loop
40	loop
41	redraw 2
42	return

コマンドリファレンスより抜粋

	buffer 仮想画面を初期化 buffer p1,p2,p3,p4 p1=0～ (0) : ウィンドウID p2=0～(640): 初期化する画面サイズX（1ドット単位） p3=0～(480): 初期化する画面サイズY（1ドット単位） p4=0～1(0) : 初期化する画面モード 指定したウィンドウIDを初期化して使用できるようにする。 メモリ上に仮想画面が作られるだけで、実際の画面には表示されない。 なお、screenで初期化されたウィンドウIDをbuffer命令で再初期化することはできない。 picload 画像ファイルをロード picload "filename",p1 "filename" : ロードするファイル名 p1=0～1(0) : 画像ロードモード p1の値 モード０：ウィンドウを初期化してロード モード１：現在の画面の上にロード 画像ファイルをロードする。 指定された画像ファイルが現在の画面にロードされ、ウィンドウサイズが自動的に絵のサイズに合わせられる。 p1のロードモードを省略もしくは０にすることで、画像のサイズで初期化したウィンドウにロードされる。 p1にロードモード１を指定することで、現在のウィンドウのサイズなどを一切変更せず指定した座標からロードすることができる。 この場合は、pos命令で指定した座標が左上となる。 picload命令は、screen、buffer、 bgscr命令で初期化された画面に対して実行することができる。 ロード可能なデータ 　BMP形式 : 拡張子 BMP : Windows標準の4,8,24bitのデータ。(RLE圧縮→○) 　GIF形式 : 拡張子 GIF : GIF形式のデータ。(アニメーション形式→×) 　JPEG形式 : 拡張子 JPG : JFIF標準のJPEGデータ。(グレイスケール→○) 　ICO形式 : 拡張子 ICO : Windows標準のICO形式のアイコンデータ。 gsel 描画先指定、ウィンドウ最前面、非表示設定 gsel p1,p2 p1=0～(0) : ウィンドウID p2=0～2(0) : ウィンドウアクティブスイッチ p2の値(省略可) -1 : 指定したウィンドウを非表示にする 0 : 指定したウィンドウに特に影響はない 1 : 指定したウィンドウがアクティブになる 2 : 指定したウィンドウがアクティブになり、さらに常に最前面になる 画面制御命令の描画先を指定したウィンドウIDの画面に変更する。 これ以降は、p1で指定したウィンドウIDの画面に対して、mes命令やpicload命令などの画面描画に関する命令が実行されるようになる。 gcopy 画面コピー gcopy p1,p2,p3,p4,p5 p1=0～(0) : ウィンドウID p2=0～(0) : コピー元の左上X座標 p3=0～(0) : コピー元の左上Y座標 p4=0～ : コピーする大きさX（ドット単位） p5=0～ : コピーする大きさY（ドット単位） 指定したウィンドウIDの画面の一部を、現在の描画先カレントポジションにコピーする。 コピー元のウィンドウIDは、自分のウィンドウIDと同じかまたは、screen命令やbuffer命令で初期化されたウィンドウIDでなければならない。 gcopy命令でコピーする場合は、gmode命令によってコピーするモードをいくつか選ぶことができる。 gcopy命令でパレットモード画面の画像をコピーする際の注意 　 コピーする２つのウィンドウのパレットが同じものでも問題のない画像を準備する 　 パレットモード時のパレットは、ユーザー側で正しいものを設定する(画像ファイル使用時に、picload命令だけではパレット設定は行なわれない) gosub 指定ラベルにサブルーチンジャンプ gosub *label *label : ラベル名 *labelで指定した場所にサブルーチンジャンプをする。 その後、return命令があるとgosub命令の次の行に復帰して実行を続ける。 gosub～returnは最大32重までネスティングが可能。 stop プログラム中断 stop プログラムの実行を一時中断する。 ボタンがクリックされるまで待つ時などに使用する。 pos カレントポジション設定 pos p1,p2 p1=0～ : カレントポジションのX座標 p2=0～ : カレントポジションのY座標 メッセージ表示、オブジェクトの表示などの基本座標となるカレントポジションの座標を指定。 Xは一番左が0に、Yは上が0になり、1ドット単位の指定になる。 パラメータの省略をすると、現在の値が使われる。 gmode 画面コピーモード設定 gmode p1,p2,p3,p4 p1=0～6(0) : 画面コピーモード p2=0～(32) : コピーする大きさX（ドット単位） p3=0～(32) : コピーする大きさY（ドット単位） p4=0～256(0) : 半透明合成時のブレンド率 gcopyで使用されるモードおよび、サイズ、ブレンド率などを設定する モード0 = 通常のコピー WindowsのシステムAPI(BitBlt関数)を使った画像コピーを行なう。 最も標準的なモード。 多くの場合、他のモードよりも高速に処理される。 モード1 = メモリ間コピー 画像バッファ間のメモリコピーを行なう。 コピー元とコピー先は、同じ画像モード(パレットモード・フルカラーモード)でなければならない。 動作は モード0と同じだが、非常に小さいサイズ(16*16ドット以下等)のコピーを行った際 モード0よりも 若干 高速になる場合がある。 モード2 = 透明色付きコピー モード1と同様の方法でコピーを行なうが、 RGBがすべて0(完全な黒)のドットは透明色とみなされコピーされない。 モード3 = 半透明合成コピー フルカラーモード時のみ使用することができる。 gmodeの4番目のパラメーターで指定したブレンド率による半透明合成コピーを行なう。ブレンド率は0～256の値となり、256で完全なコピーになる。 ブレンド率が0の場合はコピーは実行されない。 また、ブレンド率が256以上はメモリ間コピーが実行される。 モード4 = 透明色付き半透明合成コピー モード3と同様の方法でコピーを行なうが、RGB値が color命令で設定された色と同じドットは透明色とみなされコピーされない。 ブレンド率が0の場合はコピーは実行されない。 モード5 = 色加算合成コピー フルカラーモード時のみ使用することができる。 gmodeの4番目のパラメーターで指定したブレンド率による色加算合成コピーを行なう。色加算では、コピー先のRGB値に、コピー元のRGB値を加算する。 加算時に輝度が255を越える場合は、255にクランプされる。 モード6 = 色減算合成コピー フルカラーモード時のみ使用することがでる。 gmodeの4番目のパラメーターで指定したブレンド率による色減算合成コピーを行なう。色減算では、コピー先のRGB値から、コピー元のRGB値を減算する。減算時に輝度が0を下回る場合は、0にクランプされる。 モード7 = ピクセルアルファブレンドコピー フルカラーモード時のみ使用することができる。 gmodeで指定されたサイズの画像を、元画像の右側に用意しておき、 右側の画像をアルファブレンド成分として背景合成コピーを行なう。 アルファブレンド成分が255の場合は、 そのまま元画像のピクセルがコピーされ、255より小さい場合には、そのブレンド率で背景と合成される。 ピクセルはRGB単位で参照されるため、RGBに異なるブレンド率を設定可能。 アルファブレンド画像は、通常 (0,0,0)～(255,255,255) のグレースケールで表現するとよい。 redraw 画面コピー redraw p1,p2,p3,p4,p5 p1=0～3(1) : 描画モードの設定 p2=0～(0) : 再描画する左上X座標 p3=0～(0) : 再描画する左上Y座標 p4=0～(0) : 再描画する大きさX（ドット単位） p5=0～(0) : 再描画する大きさY（ドット単位） 画面の描画モードを指定する。 描画モード0 mes,print,gcopy,gzoom などの画面制御命令が実行されても仮想画面を書き換えるだけで、実際の画面には反映されない。 描画モード1 画面制御命令が実行されると、実際の画面にも反映される。 描画モード0で画面内に画像をコピーしたり、メッセージを表示しておいて、最後にモード1にすることで画面の書き換えのちらつきをなくしスムーズに見せることができる。 モード1を指定した場合は即座に画面の更新を行う。 モード値に2を足した値を指定すると、描画モードのみを変更し画面の更新はされない。 また、p2～p5までのパラメータにより、画面の一部だけを再描画させることが可能。通常は省略すれば、全画面の更新を行なう。 color カラー設定 color p1,p2,p3 p1,p2,p3=0～255(0) : 色コード（R,G,Bの輝度） メッセージ表示、描画などの色を指定した値に設定する。 p1,p2,p3がそれぞれ、R,G,Bの輝度になる。 0が最も暗く、255が最も明るい。 color 0,0,0 は黒に、color 255,255,255 は白になる。 パレットモードの画面では、指定した色に一番近いパレットが選択される。 boxf 矩形を塗りつぶす boxf p1,p2,p3,p4 p1=0～(0) : 矩形の左上X座標 p2=0～(0) : 矩形の左上Y座標 p3=0～ : 矩形の右下X座標 p4=0～ : 矩形の右下Y座標 画面上に、 (p1,p2)と(p3,p4) を左上、右下の点として、現在の描画色で矩形(四角形)を塗りつぶす。 (p1,p2)を省略した場合は、画面の左上(0,0)が設定される。 (p3,p4)を省略した場合は、画面の右下(描画サイズいっぱいまで)が設定される。 (つまり、全パラメータを省略すると全体塗りつぶしになる) wait 実行を一定時間中断する wait p1 p1(100) : 待ち時間(10ms単位） プログラムの実行を一定時間だけ中断する。 p1に待ち時間の長さを指定します。単位は10ミリ秒になる。(1ミリ秒=1/1000秒) CPUの速度に関係なく、どんな機種でも同じ待ち時間になる。 await命令を使うとwait命令よりも高精度で細かいウエイトが可能だが、wait命令よりもCPUのタスクを消費する。 リアルタイムに画像を書き換えるなどの処理でなければ、 wait命令を使用した方がCPU(Windows)の負担が軽くなる。 常にデスクトップに配置するようなアクセサリにはwait命令を、ゲームアプリケーションなどにはawait命令を使うといった使い分けをするとよい。 HSPでは、他のWindowsタスクに処理時間を渡すために長い時間ループが起こる可能性がある場所にはwaitかawait命令を入れることを推奨。 waitや await命令がない命令の中を長い時間ループするようなプログラムを実行すると、ウィンドウをドラッグしにくくなったり、他のタスクに移るのに時間がかかったりする。 return サブルーチンから復帰 return p1 p1 : システム変数代入値 gosub命令やユーザー定義命令などで呼び出しされたサブルーチンを終了する。return命令により、スタックを戻し呼び出し元に復帰する。 p1を指定することにより、サブルーチンから値をシステム変数に反映させることができる。 　p1に数値を指定した場合には、システム変数statに代入される。 　p1に文字列を指定した場合には、システム変数refstrに代入される。 　p1に実数値を指定した場合には、システム変数refdvalに代入される。 　p1の指定を省略した場合には、システム変数の代入は行なわれない。 repeat ループの始まりの場所を示す repeat p1,p2 p1=1～(-1) : ループ回数 p2=0～(0) : システム変数cntのスタート値 repeat～loopの間をくり返し実行する。 repeat命令は、くり返しの開始地点を示す。 repeat命令のパラメータ、p1でくり返しの回数を指定することができる。回数の指定を省略、またはマイナス値を指定すると無限ループになる。 繰り返しの回数が0の場合は、繰り返し部分は実行されず対応する loop命令までジャンプする。 repeat～loopを含む部分をさらにループさせるネスト構造も記述することができる。ただし、正常にloop命令を通ってループしないで抜けたりすると、ネスト構造がおかしくなるのでループから強制的に抜けるような構造にはしないようにする。 ループ回数を調べたい時や、カウンターを利用したい時のためにシステム変数cntを参照することができる。cntは通常、0からスタートして、 loop命令でループするたびに1づつ増えていく 。 ただし、repeat命令のp2でカウンタがスタートする数値を変更することも可能。たとえば、repeat 3,1 のように指定した場合には、変数cntの値は1,2,3の順で変化する。 ループの内部で、強制的にループを抜け出す場合には、 break命令を使用する。また、ループをやり直すためのcontinue命令も用意されている。 loop ループの始まりに戻る repeat命令で指定したループの終わりを指定する。

* HIDE *

IE6で透過pngを表示②

DD_belatedPNG.jsを利用する

使用したいhtmlのhead部分に、下記のように記入。２行目の赤字の部分には、DD_belatedPNG.jsを入れたフォルダパスを入れる。'img, .png_bg'にはDD_belatedPNG.jsを反映させる要素名やid名、クラス名をCSSな書き方で記入する。（下記だと、img要素全て＋png_bgというクラス名の要素に対してDD_belatedPNG.jsが動作）

<!--[if IE 6]> 
     <script src="DD_belatedPNG.jsを入れたフォルダパス/DD_belatedPNG.js"></script> 
     <script>  
         DD_belatedPNG.fix('img, .png_bg'); 
     </script> 
<![endif]-->
 

IE6で透過pngを表示

『AlphaImageLoaderを、JavaScriptを用いて必要箇所に適応させるもの』だそうなのですが、ここでは特に説明しないことにします。
（補足：AlphaImageLoaderフィルターを使用した「iepngfix.htc」というスクリプトを、JavaScriptを用いて使用するもの）

以下はほぼ他サイトのコピペです。（あくまでも自分用メモって事でTB・リンク無しです）

1. iepngfix.jsをダウンロードしてサーバにアップロード。

2. 透過PNG画像を表示したいhtmlの<head>から</head>の間に次のように書いてiepngfix.jsを読み込む。  

<script language=”JavaScript” type=”text/javascript” src=”iepngfix.js”></script>

3. CSS（スタイルシート）でPNGファイルをバックグラウンド指定してるクラスやIDに以下の一行を追加。（赤字の部分はPNG画像を指定したクラス名、もしくはID名を）

* html .iepngfix {
behavior: expression(IEPNGFIX.fix(this));
}

これで、IE6や5.5のバージョンでも綺麗に透過PNGを、CSS（スタイルシート）で表記することができます！

【特徴】

• AlphaImageLoaderフィルターを使用するので、描画処理自体は遅く、メモリも大きく消費する。
• AlphaImageLoaderフィルター使用時の致命的バグである「適応ブロック内のリンクが機能しない」問題を回避できる。
• 導入が簡単なうえ、解説サイトなども多数ある。
• CSSに都度フィルターを適応させるカタチではないので、既存サイトにIE6透過png対応をする時にも導入が容易。