小ワザ/Artlet2D

Artlet2Dとは？ †

[編集]

Artlet2D (アートレット 2D) は、GDI＋*1 を利用して、HSP でアルファチャネル (透明度成分) 付きの画像データを扱うためのモジュール。 HSP配布パッケージには、HSP3.21から同梱されるようになりました。製作：sprocketさん

アルファチャネル (透明度成分) 付きの画像データを扱う。
ピクセルフォーマット 32bit ARGB の仮想イメージバッファ
HSP スクリーンと Artlet2D 仮想イメージ間の相互画像コピー (alCopy～)
線分、楕円、矩形などの基礎図形、自由曲線の描画機能 (alDraw～, alFill～)
アンチエイリアシングされた滑らかなエッジの描画
アルファ値付き color 命令 (alColor)
グラデーションブラシ、テクスチャブラシ (alGradientColor?, alTextureImage?)
自由なペン幅、さまざまなペンスタイル (alPen～)
矩形領域内で自動折り返し可能・縦横アラインメント可能なテキスト表示 (alDrawText?)
スムーズな画像拡大・縮小コピー (alStretch～)
指定カラー範囲の透明化、ガンマ調整、カラーマトリックスによる明度調整、半透明、セピア変換などのコピーモード (alCopyMode?～)
座標変換マトリクスによる描画位置や回転角度の変更 (alTransModeOffsetRotateZoom?, alTransModeRotateAt?)
アルファチャネル付き png ファイルの読み書き (alLoadFile?, alSaveFile?)

（Artlet2D公式ページより引用。）

最新版やサポート情報などは、開発者サイトをご覧ください。
S.Probrams NET（http://sprocket.babyblue.jp/）

↑

よくわからん。もっと簡単に説明してくれ。 †

[編集]

ジャギー（ドットによるギザギザ）がない図形がかけます。
透明色が自在に使えます。

↑

使うための準備 †

[編集]

入手　…　HSP3.21以降では標準で付属しています。最新版のHSPを入手してください。
また開発元でも入手が可能です。S.Probrams NET
使用できる環境　…　GDI＋が必要です。
GDI+はWindowsXP以降からは標準で搭載されています。それよりも古いOSの場合は、別途入手が必要です。なお、GDI+はWindows98以降に対応しているようです。
詳しくはこちらのページ（http://sprocket.babyblue.jp/html/hsp_gpm.htm）の「GDI+ が存在しない環境での動作」を参照ください。

↑

とりあえずサンプルから †

[編集]

HSPアシスタントから検索できます。
HSP Document Library*2で「Artlet2D」検索すると下の方に「サンプル」が表示されます。

↑

アニメーションサンプル †

[編集]

とりあえずアニメーションさせるサンプルを描いてみました。

サンプルスクリプト

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
;
;	Artlet2D アニメーションテスト
;
;
#include "a2d.hsp"
 
#define IMG_MAIN  0
#define HSP_MAIN  0
 
	; HSPメインウィンドウ
	screen HSP_MAIN
 
	; 仮想イメージ IMG_MAIN を作成
	alCreateImage IMG_MAIN, ginfo_winx, ginfo_winy
	if stat = -1 {
		dialog "GDI+ を初期化できませんでした。"
		end
	}
 
	;ペン
	alPenStyle DashStyleDot	;スタイル
	alPenWidth 4	;太さ
 
	;円の半径
	r = 0
 
	;表示位置
	px = ginfo_winx/2
	py = ginfo_winy/2
 
 
*main
	redraw 1 : await 16 : redraw 0 : color 255, 255, 255 : boxf : color : pos 0,0
 
	;仮想イメージ全体を消去
	alErase
 
	; Artlet2D の仮想イメージ 0 での描画色を設定します。
	alColor 255, 0, 0
 
	; 仮想イメージ上で直線を描画します。
	alDrawEllip px-r, py-r, r*2, r*2
 
	; 標準命令
	color 0, 255, 0
	boxf px-100, py-100, px+100, py+100
		;標準命令とは別領域に描画されるので後から標準命令で図形を書いても問題ない。
 
	; 仮想イメージ 0 から HSP スクリーン 0 に画像をコピーします。
	alCopyImageToScreen IMG_MAIN, HSP_MAIN
 
	; 円の半径を計算
	r+=3
	if r>sqrt(px*px + py*py) : r = 0
 
	goto *main

↑

標準命令との違い †

[編集]

Artlet2Dを使うとHSP標準の描画命令と同じような動作をする命令がいくつかあります。

内容	HSP標準	Artlet2D
矩形を塗りつぶす	boxf	alFillRect?
円を描画する	circle	alDrawEllip?,alFillEllip?
直線を描画	line	alDrawLine?

これらの命令は同じように見えますが、パラメータの与え方や動作結果が異なっていますので注意が必要のようです。

↑

矩形を描く - alDrawRect?、alFillRect? †

[編集]

矩形描画のパラメータは次のようになっています。

x, y	: 矩形の左上座標
w, h	: 矩形のサイズ

boxfでは「右下座標」だったものが矩形サイズになっています。パラメータの意味が座標と大きさに分かれることでわかりやすく・使いやすくなりました。

しかし、注意点があります。
boxfでは「左上座標」が右下に来ても、「右下座標」が左上に来ても何も問題なく表示されていましたが、Artlet2Dでは「矩形のサイズ」に負の値を与えると描画されません。

サンプルで確認してみます。

サンプルスクリプト

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
;
;	Artlet2D 矩形描画の動作確認
;
;
 
#include "a2d.hsp"
 
#define IMG_MAIN  0
 
	; 仮想イメージ IMG_MAIN を作成
	alCreateImage IMG_MAIN, ginfo_winx, ginfo_winy
	if stat = -1 {
		dialog "GDI+ を初期化できませんでした。"
		end
	}
 
	alPenWidth 4
 
	;仮想イメージ全体を消去
	alErase
 
	;矩形の通常の描き方
	alColor 255, 0, 0
	alDrawRect 10, 10, 100, 100
 
	;表示されない矩形のサンプル
	alDrawRect 200, 200, -100, -100
	;↑これを表示するには、「矩形のサイズ」が正の数になるようにします。
	;「矩形のサイズ」は必ず整数である必要があるようです。
	alColor 0, 0, 255			;青
	alPenStyle DashStyleDot		;点線
	alDrawRect 200-100, 200-100, 100, 100
 
	;alFillRectでも同様に表示されません。
	alDrawRect 200, 200, -100, -100
 
 
	; 仮想イメージ 0 から HSP スクリーン 0 に画像をコピーします。
	alCopyImageToScreen IMG_MAIN, 0
 
	redraw 1	;必ず必要

これまでの「升目の描かれた紙の上に図を描く」描画の考え方から「紙の上に四角い折り紙を貼り付ける」ようなイメージに変えて考えるとすんなりと受け入れることが出来ると思います。

↑

画像ファイルの読み込み †

[編集]

画像ファイルの読み込みも仮想イメージ上で行われます。
PNGファイルを読み込んだ場合は、透明色情報も含まれた状態で読み込まれます。

先に仮想イメージを用意して、そこに画像ファイルを読み込む例。

サンプルスクリプト１

#include "a2d.hsp"
 
    ; まず、Artlet2D 仮想イメージ 0 を作成します。
    alCreateImage 0, 640, 480
    if stat = -1 : dialog "GDI+ を初期化できませんでした。" : end
 
    ; 画像ファイルロード
    alLoadFile dir_exe + "\\sample\\hsp3dish\\hsp3dish.png"
 
    ; 仮想イメージ 0 から HSP スクリーン 0 に画像をコピーします。
    alCopyImageToScreen 0, 0
 
    ; HSP スクリーン 0 のディスプレイ上の画面を更新させ、結果を表示します。
    redraw

画像ファイルの読み込みと同時に仮想イメージを作成する例。

サンプルスクリプト２

#include "a2d.hsp"
 
    ; 画像ファイルから仮想イメージを直接作成
    alCreateImageByFile 0, dir_exe + "\\sample\\hsp3dish\\hsp3dish.png"
    if stat = -1 : dialog "GDI+ を初期化できませんでした。" : end
 
    ; 仮想イメージ 0 から HSP スクリーン 0 に画像をコピーします。
    alCopyImageToScreen 0, 0
 
    ; HSP スクリーン 0 のディスプレイ上の画面を更新させ、結果を表示します。
    redraw

↑

コメント †

[編集]

pngを表示するサンプルも欲しかった。　　他当たってみます。 -- 円城寺? 2012-01-07 (土) 16:07:24
画像読み込みを追加してみました。 -- GENKI? 2012-01-07 (土) 16:30:31

*1 GDIの拡張版。
*2 f1キーでおなじみのヘルプ

OFFICIAL/関連

TUTORIAL

TOPICS

ETC

EDIT

REFERENCE

LOG

お知らせ

HSP Web-Ring

最新の40件

Artlet2Dとは？ †

よくわからん。もっと簡単に説明してくれ。 †

使うための準備 †

とりあえずサンプルから †

アニメーションサンプル †

標準命令との違い †

矩形を描く - alDrawRect?、alFillRect? †

画像ファイルの読み込み †

コメント †