Visual Basic 6.0 中級講座

Visual Basic 中学校 > VB6 中級講座 >

７．ベジェ曲線

完成版の全コードなどを見る               

完成版をダウンロードする（ソースコードと実行ファイル）

今回は予告どおりベジェ曲線を使ってスクリーンセーバーを作ります。ベジェ曲線を上手く使えば結構きれいなスクリーンセーバーができることと思います。みなさんもこの記事を読んだら自分なりのきれいなスクリーンセーバーを作ってみてください。

１．ベジェ曲線

まずは「ベジェ曲線」自体の説明からしましょう。ベジェ曲線には２次のベジェ曲線、３次のベジェ曲線など種類があって今回扱うのは３次のベジェ曲線です。

３次のベジェ曲線を描くには４つの点を指定する必要があります。これら４つの点を順にＡ、Ｂ、Ｃ、Ｄとするとベジェ曲線は点Ａを始点、点Ｄを終点とします。つまり点Ａと点Ｄは必ずとおります。一方点Ｂと点Ｃは必ず通りません。

線分ＡＢおよび線分ＣＤはベジェ曲線の接線となります。

以上の説明では分からないはずなのでいくつかベジェ曲線の画像を掲載します。参考にしてください。下の画像で赤い線がベジェ曲線で他の部分は説明のためのものです。

先ほど記述したことがお分かりいただけることでしょう。もう一度まとめると、

・ベジェ曲線を描くには４つの点（順にＡ、Ｂ、Ｃ、Ｄ）を指定する。

・ベジェ曲線は点Ａ、点Ｄをそれぞれ始点、終点とし、この２点を必ず通る。

・ベジェ曲線は点Ｂ、点Ｃを通らない。

・線分ＡＢ、線分ＣＤはベジェ曲線の接線となる。

・ベジェ曲線は四角形ＡＢＣＤの内部に必ず収まる。

２．ベジェ曲線を描画する

それではＶＢからベジェ曲線を描画してみましょう。

まず、４つの点の指定からです。４つの点はマウスでクリックして指定できるようにしましょう。このためにフォームにピクチャーボックスを１つとリストボックスを２つ貼り付けてください。これらは次のように設定します。

そして、ピクチャーボックスのクリックした座標がリストボックスに記録されるようにします。このためにPicture1のMouseDownイベントプロシージャに次のように記述してください。

４つ以上の点を指定できないように、５つ目の点を指定するとそれまでの結果を一旦クリアするようにしてあります。

４つの点を指定してコマンドボタンをクリックしたらベジェ曲線が描画されるようにしましょう。手始めにこのためのボタンを配置してください。名前はCommand1のままでいいでしょう。

ベジェ曲線を描画するにはＡＰＩ関数　PolyBezier　を使いますからまずこれを宣言します。また、この関数はＰＯＩＮＴ構造体を用いるのでＰＯＩＮＴ構造体も忘れずに宣言してください。この部分は次のようになります。

PolyBezier関数はその名の通り複数のベジェ曲線を１回の命令で描く能力を持っています。しかし、今は最初なので１本だけ描画させることにします。この関数は３つの引数をとります。１つ目は対象となるデバイスコンテキストへのハンドル。デバイスコンテキストについては第５回でやりましたが第５回を読んでいなくても大丈夫でしょう。２つ目の引数は４つの点（複数描画する場合はもっと多くの点）の座標を表すＰＯＩＮＴ構造体の配列へのポインタです。こう書くと難しそうですがすぐ後で出てくるサンプルを見ていただくとそうでもないことが分かるでしょう。最後の引数は点の数です。今回は４つの点を指定しているので　４　が入るわけですね。

では、いよいよコマンドボタンをクリックしたときのコードをお見せしましょう。

結構短いものでしょう。

まず、ＰＯＩＮＴＡＰＩ型の変数の配列pnt(4)を宣言します。この配列に４つの点の座標を格納します。点の座標はlstXとlstYに記録されるようにしてありますから、それらのリストを見てpnt()に代入するだけです。この部分をFor〜Nextで処理しています。

そして、配列pnt()が完成したら、PolyBezier関数を呼び出します。懸念の第２引数には配列の先頭を指定すればよいわけです。

これで、あなたのプログラムでベジェ曲線が描けることを確認できたと思います。このプログラムの全コードを下に掲載しておきます。この他にPicture1のプロパティの設定を間違っていると上手く描画できない場合がありますから上手くいかない人はそちらもチェックしてみてください。

３．スクリーンセーバー

次にベジェ曲線は一旦おいておいてスクリーンセーバーの説明をしましょう。ここはうだうだ説明していると収拾がつかなくなりそうなのでどんどんコードを例にあげながら説明していきます。みなさんも説明どおりにプログラムしながら読んでください。

ＳＴＥＰ１    エントリポイント

新しいプロジェクトを作成して、標準モジュールを追加してください。標準モジュールを追加するには[プロジェクト]メニューの「標準モジュールの追加」をクリックします。標準モジュールを追加したら次のように記述してください。

このプロシージャが今回のプログラムの最初に実行される部分（通常はForm_Load)となります。このプロシージャからプログラムが始まるようにするにはさらに次のような手順を踏む必要があります。[プロジェクト]メニューから「Project1のプロパティ」をクリックし、「全般」タブを押したら　スタートアップの設定　の欄でSub Main　を選択します。

ＳＴＥＰ２    コマンドラインの取得

スクリーンセーバーはシステムによって自動的に起動されますが、スクリーンセーバーが起動するときシステムからコマンドラインが渡されます。そのコマンドラインに応じて処理を変えます。渡されるコマンドラインは次のどれかでしょう。

パスワードチェックモードは分かりにくいかもしれませんが、これはスクリーンセーバーにパスワードをかけているときに表示されるパスワード入力画面のことです。

なお、実際のコマンドラインはこれらの後ろにパラメータが続いていますので注意が必要です。そのためこれらのコマンドラインを取得するために次のようにします。

これでコマンドラインを取得できるので次はその内容によって処理を分岐させます。

それから、どのモードで起動されたのか記憶しておく変数も後々必要になりますから今のうちに作っておきましょう。標準モジュールの宣言部に次のように変数を宣言してください。

Public PlayMode As String

そして、Case "/P","/p"の下の行に

PlayMode = "P"

Case "/S","/s"の下の行に

PlayMode = "S"

と記述しておけばよいでしょう。（他のモードでは起動されたモードを記録しておく必要はありません。）

ＳＴＥＰ３　通常モード

なんといっても通常モードがメインですから、まず通常モードを完成させてしまいましょう。スクリーンセーバーを実行するためにフォームの方をいじりましょう。まず、フォームの名前をfrmScreenに変えてください。そして通常モードで起動されたときはこのフォームを呼び出します。このため、上記のCase "/S","/s"の項目に次のように記述してください。

さらに、話が前後しますがスクリーンセーバーは２重起動しないようにしなければなりません。この処理もここでおこないます。２重起動というのは同じプログラムが２つ以上起動することでワードやエクセルなどは２つも３つも起動させてコピーしながら作業するという人もいるでしょう。しかし、スクリーンセーバーはこれができないようにしなければなりません。なぜなら、たとえば、スクリーンセーバが起動するまでの時間を１分に設定している場合、１０分後には１０個のスクリーンセーバーが起動してしまうからです。これを防止するには「自分がもう起動していたら終了せよ。」との命令が必要です。

自分がすでに起動しているかどうかの判断は、AppオブジェクトのPrevInstanceプロパティを調べれば分かります。たとえば、If App.PrevInstance Then End のようにすれば良いわけです。ところが、この技はスクリーンセーバーには使えないのです。なぜなら、プレビュー画面が表示されているときに本体が起動できなくなるからです。そこで、この便利で簡単な方法をあきらめてAPI関数を使って処理することにします。使うAPIはFindWindow関数でこの関数の宣言を標準モジュールの宣言部で次のように行ってください。

Private Declare Function FindWindow Lib "user32" Alias "FindWindowA" (ByVal lpClassName As String, ByVal lpWindowName As String) As Long

この関数はフォームのキャプションを調べてそのキャプションのウィンドウが存在するかを調べることができます。その事を利用して先ほどの PlayMode = "S" のすぐ上に次のように加えてください。

そして、プレビューモードの場合にはこれと対抗する処置を講じておきましょう。Case "/P","/p"　の下に次の１行を加えてください。

これで、やっとメインとなるフォームが呼び出されたわけです。具体的な描画処理はフォーム側で行うのが良いでしょう。このフォーム側のプログラムについては後で説明することにして、先に標準モジュール側のプログラムを完成させます。

ＳＴＥＰ４　プレビューモード

標準モジュール側で一番難しいのはこのプレビューモードで起動されたときの処理です。プレビューモードとはスクリーンセーバーの設定画面で小さく表示される画面のことです。下の画像を見れば「あぁこれか」とどなたも思われることでしょう。

この小さな窓に自分の作ったスクリーンセーバーを表示させる方法がすぐにひらめいた人は立派な上級者です。この小さな窓は画面の形をした領域（これ自身も実はウィンドウ）の子ウィンドウなのです。この辺のことは今回のテーマではないので軽くだけ説明しますが、要するに自分の作ったフォームをこのウィンドウの子ウィンドウに設定すればよいわけです。こ親フォームのウィンドウのハンドルはコマンドラインで送られてきますから、なにをするにもまず、そのハンドルを受け取る必要があります。ハンドルを受け取るには次のようにします。

親ウィンドウのハンドルを取ったら、まずfrmScreenのサイズを上の画面にぴったりはまるサイズに調節します。この「ぴったりはまるサイズ」とは他ならぬ「親ウィンドウと同じサイズ」ということですから、親ウィンドウのサイズを取得するのが次の課題です。これには前回も出てきたGetWindowRectを使いますから、標準モジュールの宣言部に次のように記述してください。

さらに、Mainプロシージャに変数の宣言を

Dim PreviewRect As RECT

のように加えたら、ParentWnd = Val(Mid(Command, 4))の下に続けて次のように記述します。

なんだか書くことがいろいろあってどこに何を書くのか分からなくなってしまったかもしれませんね。そういう方は先に上のほうにある完成版を眺めるのも良いでしょう。完成版は別のページにあってこのページに上のほうにそのページへのリンクがはってあります。

ともあれ、サイズの調節はこれで終了。次はやっと「自分のフォームを子ウィンドウに設定する」という難易度の高い技に挑戦です。この部分はこれだけで１回分の解説になってしまうのでここでは手順だけ示すことにします。

まず、標準モジュールの宣言部に次のように宣言します。

次に、Mainプロシージャで次のように変数の宣言をします。

最後に、frmScreen.Height = PreviewRect.Bottomの下に続けて次のように記述します。

これで子ウィンドウ化に成功です。最後はフォームを表示するためのコードを追加します。

frmScreen.Show

フォームが表示されれば、後の描画処理はフォーム側で行うので標準モジュール側の使命はほぼ終わりです。

ＳＴＥＰ５　その他のモード

パスワードチェックモードや設定モードで呼び出されたときはあまりこった処理をしなくていいので簡単です。今回は余力がないのでこのパスワードチェックモードには対応せず、設定モードもごく簡単に済ませてしまいます。

次のように記述すると良いでしょう。

４．終了処理

煩わしい標準モジュールのプログラムを終えてもまだちょっと作業が必要です。今度は終わるときの処理を書きましょう。スクリーンセーバーはキーボードのキーを押したり、マウスを動かしたら終了ですからfrmScreenに次のようにプログラムしましょう。なお、frmScreenのScaleModeプロパティは必ず　３-ピクセル　にしておいてください。

Private Sub Form_Click()

    If PlayMode = "S" Then End

End Sub

Private Sub Form_KeyDown(KeyCode As Integer, Shift As Integer)

    If PlayMode = "S" Then End

End Sub

Private Sub Form_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)

    Static IsSecond As Boolean
    Static LastX As Long
    Static LastY As Long
    
    
    If IsSecond = False Then
        LastX = X
        LastY = Y
        IsSecond = True
    Else
        If PlayMode = "S" Then
            If Abs(X - LastX) > 10 And Abs(Y - LastY) > 10 Then
                End
            Else
                LastX = X
                LastY = Y
            End If
        End If
    End If

End Sub

終わらせるだけの処理なのに以外と複雑に思われるかもしれません。クリックしたときとキーを押したときの処理は簡単です。「通常モードなら終了しろ」ということですね。プレビューモードが終了されてはこまりますから起動したモードを記録しておいたのはここのためなのです。ただ、注意することとしてfrmScreenのKeyPreviewプロパティを　True　にすることを忘れないでください。

マウスを動かしたら終了のほうはちょっとくせがあります。このMouseMoveイベントプロシージャはフォームが表示されると自動的に１度呼び出されるのです。だから、ここにそのまま　End　と書くと起動した直後に終了してしまうことになるのです。そこでこの最初の１回を無視するためにIsSecondというフラグを作り１回目の呼び出しは無効にするようにしています。

２回目以降は素直に終了させるようにプログラムしても良いと思いますが、ここではマウスを動かした距離が一定以上のときに終了するようにしています。要するにちょっとマウスが動いたくらいでは終了しないということです。

なお、このフォームが終了すると他に目に見える部品がなくなってしまう可能性があるので、メモリリークを防ぐ意味をこめて念のために次のように記述しておくことにします。

５．描画処理

長かった前処理・後処理の解説を終えてやっと本番です。ここからが楽しいところ。みなさん楽しんで自分のセンスを活用してすばらしいスクリーンセーバーを作りましょう。

今回のスクリーンセーバーはベジェ曲線がテーマですから、ベジェ曲線を描画するためにfrmScreenに次のように宣言してください。

まずは試作品ということで単純にベジェ曲線を描画するだけにしましょう。お試しのつもりで次のコードをコピーしてみてください。

Private Sub BezierDance()

    Dim K As Integer
    Dim M As Integer
    Dim Pnt(3) As POINTAPI
   
    Do
    
    Me.ForeColor = Randome(0, 60000)
    
    For K = 1 To 2000
        
        DoEvents   'これがないと描画中にイベントが発生しないので終了できない。
        
            For M = 0 To 3
                Pnt(M).X = Randome(0, ScaleWidth * 2) - (ScaleWidth \ 2)
                Pnt(M).Y = Randome(0, ScaleHeight * 2) - (ScaleHeight \ 2)
            Next M
        
        Call PolyBezier(Me.hdc, Pnt(0), 4)
    
    Next K
    
        frmScreen.Cls
    Loop
    
End Sub

Private Function Randome(Min As Long, Max As Long) As Long

    Randomize
    Randome = Fix(Rnd() * (Max - Min + 1)) + Min

End Function

Private Sub Form_Paint()

    BezierDance
    
End Sub

この他にfrmScreenのBorderStyleプロパティを　0　-　なし　に、BackColorプロパティを黒い色にしておいてください。

なお、Randome関数はMin以上Max以下の整数をランダムで生成する関数です。他のプログラムにも活用できます。

これで完成といえば完成です。あまり美しくないですが・・・。コードを手直しする前にこの状態でスクリーンセーバーとしてまともに動くかどうか一度試して見ましょう。

６．テスト

試用版を使っている方は多分次のようにして試せます。まず、[プロジェクト]メニューのProject1のプロパティをクリックしたら、「実行可能ファイルの作成」タブを選択します。その中にある　コマンドライン引数　の欄に　英語半角で　/S　と入力してください。そして、実行してみて全画面でベジェ曲線が描画されるようなら成功です。上手くいかなかった場合はここまでの過程のどれかを誤っていることになりますからもう一度チェックしてみてください。なお、申し訳ありませんが試用版を使っている方はプレビューモードを試すことはできません。（このことはこのページのコンセプトに反するのではないかとも思いましたが、スクリーンセーバー本体の方は試せるわけですから大目に見てもらえるものと判断しました）。

製品版を使っている方はコンパイルして実行可能ファイルを作ってください。名前は    Bezier.scr    です。拡張子がexeではなくscrである点に注意してください。一旦exeでコンパイルした後からscrに手動で直しても大丈夫です。コンパイルしたら実行可能ファイル(Bezier.scr)をWindowsフォルダに入れてください。そして、画面のプロパティからスクリーンセーバーの設定画面を表示させて、一覧の中にあなたのスクリーンセーバがあるか確認してみましょう。そして、ちゃんと動作するか試してみてください。

なお、失敗するとスクリーンセーバーが暴走することがありますから他のアプリケーションを終了させてから試してみてください。暴走したスクリーンセーバーは強制終了させてください。

７．マウスポインタを見えなくする

テストして見ると気が付いたかもしれませんが実はこのプログラムでは「マウスポインタを隠す」という処理をしていません。通常のスクリーンセーバーはマウスポインタも見えなくなるものです。このプログラムもマウスポインタを隠せるように変更しましょう。

マウスポインタを隠すにはAPI関数を使った面倒な処理がいるのですがそこはＶＢ、便利な抜け道があります。透明なマウスカーソルを用意してそれを表示させれば良いのです。透明なマウスカーソルはマウスカーソルを作成できるソフトを持っているなら簡単に作成できます。もし、そのようなソフトを持っていない場合はインターネット上にそういうソフトがあるのでダウンロードしてください。私はフリーのソフトを使っています。まったくただでこのような機能を提供してくれるのですからありがたい話です。

しかし、念のため私が作った透明なマウスカーソルをここからダウンロードできるようにしておきます。

TransMs.Cur

自分で透明なマウスカーソルを作った方は名前を TranMs.Cur にしてください。

さて、ではマウスカーソルを設定するコードを記述しましょう。

まず、[アドイン]メニューのアドインマネージャをクリックしてリソースエディタを選択してください。一覧にリソースエディタが表示されていない人やアドインマネージャが利用できない人は別の方法でやりますのでとりあえず読み進めてください。

さて、リソースエディタは選択すると利用可能になりますので、リソースエディタのアイコンをクリックしてリソースエディタを起動してください。リソースエディタのアイコンを念のために掲載しておきます。

この画像の真中の緑っぽいアイコンがそれです。

リソースエディタを起動したらマウスカーソルの追加を示すアイコンをクリックしてTransMs.Curを選択してください。TransMs.Curがリソースに追加されたことを確認したらそのIDの数字（横に表示される数字）も確認してください。多分 101 になっているはずです。

もし,101になっていない人はその番号を覚えておいてこれからの説明で 101 というところをその数字に置き換えてください。

そして、標準モジュール Case "/S","/s" の中の　frmScreen.Caption = "SCREEN BY NORMAL"　のすぐ下に次の２行を追加します。

これで通常モードで起動された場合はマウスカーソルは表示されなくなります。

さて、以上のようにリソースエディタやアドインマネージャを利用できない方は次のようにしてください。まず、プログラムを一旦保存して、プロジェクトファイル(拡張子がvbpのファイル。もちろん今作成中のスクリーンセーバープログラムのプロジェクトを指しています。)のあるフォルダの中に TransMs.Cur を入れます。標準モジュール Case "/S","/s" の中の　frmScreen.Caption = "SCREEN BY NORMAL"　のすぐ下に次の２行を追加します。

この場合はコンパイルしてスクリーンセーバーファイルを作ったときは　TransMs.Cur　をWindowsフォルダに入れることを忘れないでください。そうでないとプログラムは指定されたマウスアイコンが見つからないというエラーを出してしまいます。（なお、試用版を使っている人はコンパイルできません）。

８．より綺麗なベジェ曲線

以上でひとまず完成です。あまり美しくないという以外は普通のスクリーンセーバーと変わりません。これでようやく自分のセンスでスクリーンセーバーをデザインする時間が始まります。

ではどうやって綺麗なスクリーンセーバーにしましょうか？まぁそれは人しだいなのですがここでは私の考えた３つの例を載せておきます。いずれもBezierDanceプロシージャをそっくり入れ替えるだけでOKです。

例１    色を工夫する

これはほとんど変更の必要がありません。最初に作ったBezierDanceプロシージャと異なる部分は色を変えてあります。

これで、色はまぁ綺麗になりましたね。他にも綺麗な色のパターンはあるはずです。研究してみてください。

例２    描画パターンを工夫する

やはりランダムにベジェ曲線がばばばっと表示されるだけでは物足りません。ここでは放射状に表示されるようにプログラムを変えてみました。例１と異なる部分は色を変えてあります。

なんだかアニメに時々ある視覚効果みたいになりますね。

例３    シックなスクリーンセーバー

今までの例は綺麗かどうかはおいておいてもとにかく派手でした。今度はもっと落ち着いた感じにしてみました。今度は上の例から大幅に変わっていますから注意してください。

この例ではベジェ曲線を定義する４つの点のうち３つを固定して、１つを連続的に変化させています。どの１つを動かすかは順番で、ベジェ曲線を４０本描くごとに交代します。また、ベジェ曲線の描画スピードが速くてせわしないので１本のベジェ曲線を描いたら０．０１秒何もしないで待機するようにしています。

９．最後に

以上で今回の説明は終了です。スクリーンセーバーを作るのって結構大変だなと感じられたと思います。でも、最初の１つさえつくってしまえば２つ目からは描画処理の部分を変えるだけなので意外と楽にスクリーンセーバーが作れます。今回作ったスクリーンセーバーを雛型にしてどんどん綺麗なまたは面白いスクリーンセーバーを作ってください。

また、今回はベジェ曲線がテーマなのでスクリーンセーバーもベジェ曲線だけを使って描画しています。けれど、もちろんベジェ曲線にこだわらない別の作り方もありますからいろいろ試してみてくださいね。

それでは失礼します。