[ 前へ | 目次 | 次へ ]
Now Loading...
ダウンロード
PC (※スマートフォンでは動きません) でダウンロードし、ZIPファイルを右クリックメニューから展開して、できたフォルダ内の「 VCSSL.bat(バッチファイル) 」をダブルクリックすると起動します。 Linux等では「 VCSSL.jar 」をコマンド実行してください。
» 詳しい使用方法や、エラーで展開できない際の対応方法などはこちら

[公式ガイドサンプル] 各種の図形や画像を描画する

このプログラムは、 「 VCSSL 2DCG開発ガイド 」 の 「 直接描画 」 の回に登場するサンプルコードです。 ここでは、そのサンプルコードを実行環境ごとダウンロードして、実際に実行してみる事ができます。 プログラミングガイド的な詳しい解説については、上記ページをご参照ください。

使用方法

ダウンロードと展開(解凍)

まず、PC(スマホは未対応)で上の画面の「 ダウンロード 」ボタンを押してください。 するとZIP形式で圧縮されたファイルがダウンロードされます。

Windows をご使用の方は、ここでまずZIPファイルを右クリックし、「プロパティ」を選んで開かれる画面で、 下の方にあるセキュリティ項目の「許可する」にチェックを入れて「OK」で閉じてください。 これを行わないと、ZIP展開やソフト起動時に、警告メッセージが出て展開完了/起動できない場合があります。

その後、ZIPファイルを右クリックして「すべて展開」や「ここに展開」などで展開(解凍)してください。 展開が成功すると、ZIPファイルと同じ名前のフォルダができ、その中にZIPファイルの中身が入っています。

» 展開がエラーで止まってしまう場合や、ファイル名が文字化けしてしまう場合は…

プログラムの起動

Windows をご使用の場合

上記でZIPファイルを展開したフォルダ内にある、以下のバッチファイルをダブルクリック実行してください:

VCSSL__ダブルクリックでプログラム実行.bat

もしプログラムを書き変えながら使いたい場合は、代わりに「 VCSSL_Editor__プログラム編集はこちら.bat 」を実行してください。

正常に起動できると、初回のみ、Java実行環境を入手するか等を尋ねられるので、適時答えて済ませると、プログラムが起動します。 2回目以降はすぐに起動します。

» うまく起動できずにエラーになってしまう場合は…

Linux 等をご使用の場合

ZIPファイルを展開したフォルダ内へコマンドライン端末で cd して、以下の通り入力して実行してください:

java -jar VCSSL.jar
(プログラムの内容を書き変えながら使いたい場合は、代わりに VCSSL_Editor.jar を実行)

» javaコマンドが使用できない等のエラーが表示される場合は…

起動後

起動するとウィンドウが表れ、そこに2Dの描画内容が表示されます(下図)。

表示されるウィンドウ
表示されるウィンドウ
2Dの描画内容が表示されます。

コード解説

このプログラムのコードはVCSSLで記述されています。

内容を書き変えて改造したい場合には、 プログラムのコード「 Draw.vcssl 」をテキストエディタで開いて改造してください。 スクリプト言語なので、コンパイラなどの別ソフトは不要で、コードを書き換えるだけでOKです。 VCSSLはC系の単純な文法の言語なので、C言語などに触れた事のある方なら簡単に読めると思います。

コード全体

コード全体は以下の通りです。


coding UTF-8 ; // 文字化け対策

// 必要なライブラリの読み込み
import Graphics ;
import Graphics2D ;
import GUI ;


// グラフィックスデータとレンダラーの生成
int graphicsID = newGraphics( ) ;
int rendererID = newGraphics2DRenderer( 800, 600, graphicsID ) ;

// 表示画面の生成
int windowID = newWindow( 0, 0, 800, 600, " Hello 2DCG ! " );
int labelID = newImageLabel( 0, 0, 800, 600, graphicsID ) ;
mountComponent( labelID, windowID );

// 背景色を白に設定してクリア
setGraphics2DColor( rendererID, 255, 255, 255, 255 ) ;
clearGraphics2D( rendererID ) ;


// =========================
// 描画処理 ここから
// =========================


// (0,0)と(100,100)を結ぶ線を描画(赤色)
setDrawColor( rendererID, 255, 0, 0, 255 ) ;
drawLine( rendererID, 0, 0, 100, 100 ) ;


// (100,100)を左上とする(500×300)の長方形を描画(青色)
setDrawColor( rendererID, 0, 0, 255, 255 ) ;
drawRectangle( rendererID, 100, 100, 500, 300, true ) ;


// (100,300) を左上とする(300×200)の楕円を描画(マゼンタ)
setDrawColor( rendererID, 255, 0, 255, 255 ) ;
drawEllipse( rendererID, 100, 300, 300, 200, true ) ;


// 多角形、折れ線スプライト用のx 配列、y 配列を用意
int x[ 3 ] ; x[ 0 ] = 100 ; x[ 1 ] = 300 ; x[ 2 ] = 300 ;
int y[ 3 ] ; y[ 0 ] = 100 ; y[ 1 ] = 100 ; y[ 2 ] = 300 ;

// x 配列、y 配列を頂点とする多角形を描画(黄色)
setDrawColor( rendererID, 255, 255, 0, 255 ) ;
drawPolygon( rendererID, x, y, true ) ;


// x 配列、y 配列を頂点とする折れ線を描画(赤色)
setDrawColor( rendererID, 255, 0, 0, 255 ) ;
drawPolyline( rendererID, x, y ) ;


// (300,50)にテキストを描画(黒色)
setDrawFontSize( rendererID, 30 ) ; //文字サイズを30pt に
string text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ" ;
setDrawColor( rendererID, 0, 0, 0, 255 ) ;
drawText( rendererID, 300, 50, 250, 35, text ) ;


// 画像ファイル「Test.png」を読み込んで描画
int testGraphics = newGraphics( "Test.png" ) ;
drawImage( rendererID, 300, 100, 300, 300, testGraphics ) ;


// =========================
// 描画処理 ここまで
// =========================


// 画面の描画
paintComponent( labelID ) ;
paintComponent( windowID ) ;
Draw.vcssl

以上です。

コード全体では76行ありますが、その中では複数の図形/画像をまとめて描いているので、各図形/画像を描いている部分はそれぞれ 2 〜 4 行ずつくらいです。

なお、このコードは 「 VCSSL 2DCG開発ガイド 」 の 「 直接描画 」 の回に登場するサンプルコードなので、3D機能の土台からの説明は、上記の開発ガイドをご参照ください。

先頭: 文字コード宣言とライブラリの読み込み

以下では、各行で何をやっているのかを見ていきます。 まずは先頭です:


coding UTF-8 ; // 文字化け対策

// 必要なライブラリの読み込み
import Graphics ;
import Graphics2D ;
import GUI ;
import.txt

最初の行は文字化け対策で、コードを書いてあるファイルの文字コードが「UTF-8」である事を明示しています。

その後の2行は、VCSSLの標準ライブラリから、2D描画処理やGUIを扱うための 「 Graphics2D 」ライブラリや 「 GUI 」ライブラリなどを読み込んでいます。

表示画面の作成やレンダラー(描画エンジン)の用意など

続きです:


// グラフィックスデータとレンダラーの生成
int graphicsID = newGraphics( ) ;
int rendererID = newGraphics2DRenderer( 800, 600, graphicsID ) ;

// 表示画面の生成
int windowID = newWindow( 0, 0, 800, 600, " Hello 2DCG ! " );
int labelID = newImageLabel( 0, 0, 800, 600, graphicsID ) ;
mountComponent( labelID, windowID );

// 背景色を白に設定してクリア
setGraphics2DColor( rendererID, 255, 255, 255, 255 ) ;
clearGraphics2D( rendererID ) ;
init.txt

ここではコメントの通り、描画処理を担うレンダラー(描画エンジン)を生成したり、描画内容を表示するための画面を構築したりといった、土台の準備を行っています。

例えば、newGraphics2DRenderer 関数は2D描画用のレンダラーを生成し、それに固有のID番号を割り振って返します(描画関数の引数に使います)。 同じように、newWindow 関数はウィンドウを生成し、それに固有のID番号を割り振って返します。 上記では、生成と同時に、ID番号を変数に格納しています。

ところで、単に画面上に2Dで絵を描きたいというだけなら、上記のような下準備を自動で行ってくれるフレームワークも標準で利用できます(使い方はこちらを参照)。 ただ、2Dの描画を行いたい時って、描画内容そのものがメインというよりは、「 GUIのツールを作っていて、ここにこういう図を入れたい 」みたいな用途も多いと思います。 典型的には、このコーナーで前々回に公開した、以下のツールなどです:

上記は、角度の変換を行うためのGUIツールですが、その角度を図示するために、画面の一部で2D描画処理を行っています。 このように、2D描画の利用時は、画面などを自作するケースの方が恐らく多いため、今回のサンプルコードでもあえてそうしています。

2D描画処理

その次は、メインとなる2D描画処理が続きます:


// =========================
// 描画処理 ここから
// =========================


// (0,0)と(100,100)を結ぶ線を描画(赤色)
setDrawColor( rendererID, 255, 0, 0, 255 ) ;
drawLine( rendererID, 0, 0, 100, 100 ) ;


// (100,100)を左上とする(500×300)の長方形を描画(青色)
setDrawColor( rendererID, 0, 0, 255, 255 ) ;
drawRectangle( rendererID, 100, 100, 500, 300, true ) ;


// (100,300) を左上とする(300×200)の楕円を描画(マゼンタ)
setDrawColor( rendererID, 255, 0, 255, 255 ) ;
drawEllipse( rendererID, 100, 300, 300, 200, true ) ;


// 多角形、折れ線スプライト用のx 配列、y 配列を用意
int x[ 3 ] ; x[ 0 ] = 100 ; x[ 1 ] = 300 ; x[ 2 ] = 300 ;
int y[ 3 ] ; y[ 0 ] = 100 ; y[ 1 ] = 100 ; y[ 2 ] = 300 ;

// x 配列、y 配列を頂点とする多角形を描画(黄色)
setDrawColor( rendererID, 255, 255, 0, 255 ) ;
drawPolygon( rendererID, x, y, true ) ;


// x 配列、y 配列を頂点とする折れ線を描画(赤色)
setDrawColor( rendererID, 255, 0, 0, 255 ) ;
drawPolyline( rendererID, x, y ) ;


// (300,50)にテキストを描画(黒色)
setDrawFontSize( rendererID, 30 ) ; //文字サイズを30pt に
string text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ" ;
setDrawColor( rendererID, 0, 0, 0, 255 ) ;
drawText( rendererID, 300, 50, 250, 35, text ) ;


// 画像ファイル「Test.png」を読み込んで描画
int testGraphics = newGraphics( "Test.png" ) ;
drawImage( rendererID, 300, 100, 300, 300, testGraphics ) ;


// =========================
// 描画処理 ここまで
// =========================
draw.txt

ここでは、線や四角形などの図形を描く関数、画像を描画するための関数などを、サンプル用にまとめて並べて使っています。

基本的にはコメント通りですが、各関数の引数などについては、下記ページをご参照ください。

必要に応じて、上記のコードを部分部分でコメントアウトや編集しながら、「どの描画処理が何をどう描いているのか」を確認してみるのもおすすめです。

表示画面の更新

さて、最後です。ここでは、表示画面のGUIコンポーネントと、ウィンドウの表示を更新(再描画)しています。


// 画面の描画
paintComponent( labelID ) ;
paintComponent( windowID ) ;
paint_component.txt

GUI関連の表示内容は、いくつかの適当なタイミングで自動更新も行われるのですが、今回のように描画処理を扱う場合は「 いま確実に更新してほしい 」といったタイミングが生じてきます。 そういった際に、上のように明示的に表示を更新させる事ができます。

今回のコード内容は以上です。 他の2D関連処理も一通り知りたいという方は、 VCSSL 2DCG開発ガイド のコーナーをご覧ください。

ライセンス

このVCSSL/Vnanoコード( 拡張子が「.vcssl」や「.vnano」のファイル )は実質的な著作権フリー(パブリックドメイン) である CC0 の状態で公開しています。 記事中にC言語/C++/Java言語などでのサンプルコードが掲載されいてる場合は、それらについても同様です。 そのままでのご利用はもちろん、改造や流用などもご自由に行ってください。

※ ただし、このコードの配布フォルダ内には、ダウンロード後すぐに実行できるように、 VCSSLの実行環境も同梱されており、そのライセンス文書は「 License 」フォルダ内に同梱されています (要約すると、商用・非商用問わず自由に使用できますが、使用の結果に対して開発元は一切の責任を負いません、といった具合の内容です)。 配布フォルダ内の各構成物の一覧やライセンスについては「 ReadMe_使用方法_必ずお読みください.txt 」をご参照ください。

※ Vnano の実行環境については、別途スクリプトエンジンのソースコードも一般公開しており、 何らかのソフトウェア内に組み込んでご利用いただく事も可能です。詳細はこちらをご参照ください。

この記事中の商標などについて

  • OracleとJavaは、Oracle Corporation 及びその子会社、関連会社の米国及びその他の国における登録商標です。文中の社名、商品名等は各社の商標または登録商標である場合があります。
  • Windows は、米国 Microsoft Corporation の米国およびその他の国における登録商標です。この記事は独立著作物であり、Microsoft Corporation と関連のある、もしくはスポンサーを受けるものではありません。
  • Linux は、Linus Torvalds 氏の米国およびその他の国における商標または登録商標です。
  • その他、文中に使用されている商標は、その商標を保持する各社の各国における商標または登録商標です。

[ 前へ | 目次 | 次へ ]
[an error occurred while processing this directive]
RINEARN からのお知らせ
※ VCSSL は RINEARN が開発しています。

各ソフトやVCSSLの英語版ドキュメント整備がほぼ完了
2025-06-30 - RINEARNでは2年前から、AIの補助による英語版ドキュメントの大幅拡充計画を進めてきました。今回、主要ドキュメント&コンテンツの英訳がほぼ完了し、一応の目標水準に達しました。詳細をお知らせします。

VCSSLの最新版をリリース: 外部プログラムとの連携機能を少し強化、他
2025-05-25 - VCSSL 3.4.52をリリースしました。外部プログラム(C言語製の実行ファイル等)との連携機能を少し強化し、文字化け対策やOS判別などを可能にしました。他にも細かい機能追加があります。詳細をお知らせします。

VCSSLの最新版をリリース、Java 24上での非互換な挙動を対処
2025-04-22 - VCSSL 3.4.50をリリースしました。Java 24環境上でのネットワークドライブ関連のファイルパス解決で、従来環境とは異なる挙動が生じていたのを解消しました。詳細をお知らせします。

リニアングラフやVCSSLの最新版をリリース、目盛りの位置や内容を自由に指定可能に!
2024-11-24 - リニアングラフ3D/2Dを更新し、自由な位置に、自由な表記内容の目盛りを描けるようになりました! 併せて、Java言語やVCSSLでの、プログラム制御用APIも拡張しています。詳細をお知らせします。

Exevalator 2.2 をリリース、TypeScript 対応によりWebブラウザ上で動作可能に
2024-10-22 - オープンソースの式計算ライブラリ「Exevalator(エグゼバレータ)」の2.1をリリースしました。新たに TypeScript に対応し、Webブラウザ上での式計算にも使えるようになりました。詳細を解説します。

アシスタントAI作成の舞台裏(その2、作成編)
2024-10-12 - アシスタントAIの作成方法解説の後編です。実際にChatGPTの「GPTs」機能を用いて、アシスタントAIを作成する手順や、独自の知識をもたせたり、精度を出すためのノウハウなどを解説しています。

アシスタントAI作成の舞台裏(その1、基礎知識編)
2024-10-07 - アシスタントAI作成方法解説の前編です。今回はまず、アシスタントAIを作る前に抑えておきたい、基礎知識を延々と解説しています。そもそもLLM型AIとはどんな存在か? RAGとは何か? 等々です。

ソフトの利用をサポートしてくれるアシスタントAIを提供開始!
2024-09-20 - RINEARN製ソフトの使い方の質問応答や、一部作業のお手伝いをしてくれる、アシスタントAIを提供開始しました。ChatGPTアカウントさえあれば、誰でも無料で使用できます。使い方を解説します。

Exevalator 2.1 をリリース、新たに Visual Basic に対応
2024-07-28 - オープンソースの式計算ライブラリ「Exevalator(エグゼバレータ)」の2.1をリリースしました。今回から、新たに Visual Basic(VB.NET)でも使用できるようになりました。詳細を解説します。

関数電卓 RINPn(りんぷん)、Esc キーで計算式の一発クリアが可能に
2024-07-20 - 関数電 RINPn の Ver.1.0.2 をリリースしました。今回から、キーボードの「 Esc 」キーを押すと、入力中の計算式を一発でクリアできるようになりました。詳細を解説します。