Difference between revisions of "Developing with Graphics/ja"

From Lazarus wiki
Jump to navigationJump to search
m
m
Line 106: Line 106:
  
 
Now we will examine the options we have for drawing to a Canvas:
 
Now we will examine the options we have for drawing to a Canvas:
 +
 +
 +
 +
 +
 +
TImageに描画する。
 +
TImageに描画するのにOnPaintイベントを使ってはいけません。
 +
TImageはバッファされていますので、必要なことはとにかく描画したり変更すれば、持続します。
 +
しかし、コンスタントに再描画をおこなえば、チラツキが発生するでしょう。
 +
この場合に、ほかのオプションを試します。
 +
TImageに描画することは、ほかの方法よりも遅いとみなせます。
 +
 +
OnPaintイベントで描画する
 +
このケースでは、フォームのOnPaintイベントで、すべての描画が終了しなければなりません。
 +
この方法では、TImageのように、バッファには残りません。
 +
 +
自分自身を描画するカスタムコントロールを作成する
 +
カスタムコントロールを作成することは、あなたのコードを構造化し、そのコントロールを再利用できる利点があります。
 +
この方法はとても高速ですが、TBitmapに先に描画して、canvasに描画しなければ、チラツキを発生することがあります。
 +
この方法では、コントロールのOnPaintイベントを必要としません。
 +
カスタムコントロールの例:
 +
 +
 +
<< コード例
 +
 +
 +
 +
 +
(英文による 原文)
 +
 +
Draw to a TImage
 +
Never use the OnPaint event to draw to a TImage. A TImage is buffered so all you need to do is draw to it from anywhere and the change is there forever. However, if you are constantly redrawing, the image will flicker. In this case you can try the other options. Drawing to a TImage is considered slower then the other approaches.
 +
 +
 +
 +
Draw on the OnPaint event
 +
In this case all the drawing has to be done on the OnPaint event of the form. It doesn't remain on the buffer, like on the TImage.
 +
 +
Create a custom control which draws itself
 +
Creating a custom control has the advantage of structuring your code and you can reuse the control. This approach is very fast, but it can still generate flickering if you don't draw to a TBitmap first and then draw to the canvas. On this case there is no need to use the OnPaint event of the control.
 +
 +
Here is an example custom control:
 +
 +
 +
フォーム上で生成する方法
 +
 +
(英文による 原文)
 +
and how we create it on the form:
 +
 +
<< コード例
 +
 +
 +
destroyを忘れてはいけない。
 +
(訳注: CreateでFormを指定しているから、いらないはずだが?)
 +
 +
(英文による 原文)
 +
just don´t forget to destroy it:
 +
 +
 +
 +
TopとLeftは、0が標準の位置なので、かならずしも設定する必要はありません。
 +
しかし、これは、コントロールが置かれる位置を再設定します。
 +
 +
"MyDrawingControl.Parent := Self;"は、とても重要です。これを書かなくては、コントロールが表示されません。
 +
 +
"MyDrawingControl.DoubleBuffered := True;" は、Windows上でチラツキを防止するためのものです。gtk上では何の効果もありません。
 +
(訳注:効果がないのか、そもそも、そのような必要がないのか?)
 +
 +
 +
(英文による 原文)
 +
 +
Setting Top and Left to zero is not necessary, since this is the standard position, but is done so to reinforce where the control will be put.
 +
 +
"MyDrawingControl.Parent := Self;" is very important and you won't see your control if you don't do so.
 +
 +
"MyDrawingControl.DoubleBuffered := True;" is required to avoid flickering on Windows. It has no effect on gtk.
 +
 +
 +
A.J.Venterのgamepack
 +
gamepackによる方法は、すべてのものを、1つのダブルバッファされたcanvasに描画してしまおう、というものです。あなたが更新を準備できた時点で、、見えるcanvasの変更をおこなうことができます。
 +
これは、多少コードを必要とします。しかし、多くのスプライトをもつシーンに、大きく高速に更新できる、という利点があります。
 +
もし、このアプローチを使いたいなら、Lazarusのゲーム開発コンポーネントセットであるA.J.Venterのgamepackに興味をもったかもしれません。それは、スプライト同様、ダブルバッファを表示するエリアを提供してくれますし、ひとつひとつが、大変よく統合されています。
 +
gamepackはsubversionを通して得ることができます。
 +
svn co svn://silentcoder.co.za/lazarus/gamepack
 +
 +
 +
 +
(英文による 原文)
 +
 +
Using A.J. Venter's gamepack
 +
The gamepack approach is to draw everything to one double-buffered canvas, which only gets updated to the visible canvas when you are ready. This takes quite a bit of code, but it has the advantage of being able to do large rapidly changing scenes with multiple sprites on them. If you wish to use this approach, you may be interested in A.J. Venter's gamepack, a set of components for game development in Lazarus, which provides a double-buffered display area component as well as a sprite component, designed to integrate well with one another. You can get gamepack via subversion:
 +
svn co svn://silentcoder.co.za/lazarus/gamepack
 +
 +
Retrieved from "http://wiki.lazarus.freepascal.org/index.php/Developing_with_Graphics"

Revision as of 10:03, 20 March 2006

このページは、どのようにビットマップや、その他のグラフィックスを扱うかのチュートリアルの最初のページになるでしょう。 私はグラフィクスに携わっていないので、専門的な経験を披露してくれる皆さんを招待します。 次の項目にリンクやページを追加して、Wikiを製作してください。

このページで、一般的なお知らせをすることがあります。

(訳注:すみません、Wikiでうまく「日本語」ページとしてリンクが出来ていません。どうすればいいのでしょうか。)


(英文による 原文) This page will be the start of tutorials with regard to manipulating Bitmaps and other graphics. As I am not a graphics programmer, I invite all who are to share their expertise! Just add a link to the next section, add a page and create your own WiKi article.

On this page some general information will be given.


ビットマップ上の作業 (訳注:本来は別セクションとして記述) Working with TBitmap


最初に思い出してほしいのは、Lazarusはプラットホームに対して独立しているということです。 ですから、WindowsAPIの機能を使うメソッドは言うまでもありません。 Scanlineを使うメソッドは、Lazarusではサポートしません。 なぜなら、ScanlineはDevice Independant Bitmap(DIB)を扱い、GDI32.dllを使うことになるからです。

もし、あなたがTBitmapにwidth,heightを特定しないなら、デフォルトはかなり小さいものになっているので、気をつけてください。

フェーディングの例 フェーディングするピクチャを作りたい場合、Delphiでは、このように書けます。


(英文による 原文) The first thing to remember is that Lazarus is meant to be platform independent, so any methods using Windows API functionality are out of the question. So a method like ScanLine is not supported by Lazarus because it is intended for Device Independant Bitmap and uses functions from the GDI32.dll.

Be careful that if you do not specify the width and height of your TBitmap it will have the standard one, which is quite small.

A fading example Say you want to make a Fading picture. In Delphi you could do something like:

<< コード例


上の関数は、Lazarusでは、このように実装します。

(英文による 原文) This function in Lazarus could be implemented like:

(英文による 原文)

Notice the memory operations performed with the TMemoryStream. They are necessary to ensure the correct loading of the image.


<< コード例


このページのLazarusのコードは、 $LazarusPath/examples/lazintfimage/fadein1.lpi のプロジェクトから取ってきたものです。 もし、あなたが画像処理プログラムで早いスタートをしたいなら、この例に注目してください。

色が透明なビットマップを描く

Lazarus 0.9.11で実装された新しい機能で、色透明ビットマップを描画することができます。 ビットマップファイル(*.BMP)は、透明性のどんな情報を持つことができません。しかし、ビットマップ上のある色を透明色と選択すれば、色透明ビットマップにすることができます。これは、Win32アプリケーションでよくつかわれてきたトリックです。

次のサンプルはWindowsのリソースからビットマップをロードし、透明となる色(clFuchsia)を指定し、canvasに描画します。


(英文による 原文) The Lazarus code on this page has been taken from the $LazarusPath/examples/lazintfimage/fadein1.lpi project. So if you want a flying start with graphics programming take a closer look at this example.


Drawing color transparent bitmaps

new feature, implemented on Lazarus 0.9.11, is color transparent bitmaps. Bitmap files (*.BMP) cannot store any information about transparency, but they can work as they had if you select a color on them to represent the transparent area. This is a common trick used on Win32 applications. 

The following example loads a bitmap from a Windows resource, selects a color to be transparent (clFuchsia) and then draws it to a canvas.


(英文による 原文) TMemoryStreamでメモリ操作を行っていることに注意してください。 それらは、読み込んだイメージを確実に操作するのに必要です。

Notice the memory operations performed with the TMemoryStream. They are necessary to ensure the correct loading of the image.


動きのある画像 - チラツキを防止する方法

多くのプログラムが、2D画像としてGUIを描画します。 それらの画像は、高速に変更する必要がある場合、すぐ次のような問題に直面します。高速に更新する画像は、しばしばスクリーン上でチラツキをおこします。 時々、全体的なイメージをユーザーが見ている時、ほんの一部分だけ描画される時、発生します。 それは、描画の作業に時間がかかるのでおこります。

しかし、どのようにしたらチラツキを防止し、最善の描画速度を得ることができるのでしょうか。もちろん、OpenGLを使ったハードウエアアクセラレーションを使うこともできます。しかし、この方法は小さなプログラムや古いコンピュータには、大変重いものです。 このチュートリアルでは、TCanvasに描画する方法に焦点をしぼります。 もし、OpenGLの助けが必要であれば、Lazarusについてくるサンプルを見てください。ほかにも、ダブルバッファをサポートしたcanvasや、スプライトコンポーネントのあるA.J.Venterのgamepackを使うこともできます。

それでは、Canvasに描画するオプションを調べてみましょう。


(英文による 原文)

Motion Graphics - How to Avoid flickering Many programs draw their output to the GUI as 2D graphics. If those graphics need to change quickly you will soon face a problem: quickly changing graphics often flicker on the screen. This happens when the users sometimes sees the hole images and sometimes sees it when it is only partially drawn. It occurs because the painting process requires time.

But how can I avoid the flickering and get the best drawing speed? Of course you could work with hardware acceleration using OpenGL, but this approach is quite heavy for small programs or old computers. This tutorial will focus on drawing to a TCanvas. If you need help with OpenGL, take a look at the example that comes with Lazarus. You can also use A.J. Venter's gamepack, witch provides a double-buffered canvas and a sprite component.

Now we will examine the options we have for drawing to a Canvas:



TImageに描画する。 TImageに描画するのにOnPaintイベントを使ってはいけません。 TImageはバッファされていますので、必要なことはとにかく描画したり変更すれば、持続します。 しかし、コンスタントに再描画をおこなえば、チラツキが発生するでしょう。 この場合に、ほかのオプションを試します。 TImageに描画することは、ほかの方法よりも遅いとみなせます。

OnPaintイベントで描画する このケースでは、フォームのOnPaintイベントで、すべての描画が終了しなければなりません。 この方法では、TImageのように、バッファには残りません。

自分自身を描画するカスタムコントロールを作成する カスタムコントロールを作成することは、あなたのコードを構造化し、そのコントロールを再利用できる利点があります。 この方法はとても高速ですが、TBitmapに先に描画して、canvasに描画しなければ、チラツキを発生することがあります。 この方法では、コントロールのOnPaintイベントを必要としません。 カスタムコントロールの例:


<< コード例



(英文による 原文)

Draw to a TImage Never use the OnPaint event to draw to a TImage. A TImage is buffered so all you need to do is draw to it from anywhere and the change is there forever. However, if you are constantly redrawing, the image will flicker. In this case you can try the other options. Drawing to a TImage is considered slower then the other approaches.


Draw on the OnPaint event In this case all the drawing has to be done on the OnPaint event of the form. It doesn't remain on the buffer, like on the TImage.

Create a custom control which draws itself Creating a custom control has the advantage of structuring your code and you can reuse the control. This approach is very fast, but it can still generate flickering if you don't draw to a TBitmap first and then draw to the canvas. On this case there is no need to use the OnPaint event of the control.

Here is an example custom control:


フォーム上で生成する方法

(英文による 原文) and how we create it on the form:

<< コード例


destroyを忘れてはいけない。 (訳注: CreateでFormを指定しているから、いらないはずだが?)

(英文による 原文) just don´t forget to destroy it:


TopとLeftは、0が標準の位置なので、かならずしも設定する必要はありません。 しかし、これは、コントロールが置かれる位置を再設定します。

"MyDrawingControl.Parent := Self;"は、とても重要です。これを書かなくては、コントロールが表示されません。

"MyDrawingControl.DoubleBuffered := True;" は、Windows上でチラツキを防止するためのものです。gtk上では何の効果もありません。 (訳注:効果がないのか、そもそも、そのような必要がないのか?)


(英文による 原文)

Setting Top and Left to zero is not necessary, since this is the standard position, but is done so to reinforce where the control will be put.

"MyDrawingControl.Parent := Self;" is very important and you won't see your control if you don't do so.

"MyDrawingControl.DoubleBuffered := True;" is required to avoid flickering on Windows. It has no effect on gtk.


A.J.Venterのgamepack gamepackによる方法は、すべてのものを、1つのダブルバッファされたcanvasに描画してしまおう、というものです。あなたが更新を準備できた時点で、、見えるcanvasの変更をおこなうことができます。 これは、多少コードを必要とします。しかし、多くのスプライトをもつシーンに、大きく高速に更新できる、という利点があります。 もし、このアプローチを使いたいなら、Lazarusのゲーム開発コンポーネントセットであるA.J.Venterのgamepackに興味をもったかもしれません。それは、スプライト同様、ダブルバッファを表示するエリアを提供してくれますし、ひとつひとつが、大変よく統合されています。 gamepackはsubversionを通して得ることができます。 svn co svn://silentcoder.co.za/lazarus/gamepack


(英文による 原文)

Using A.J. Venter's gamepack The gamepack approach is to draw everything to one double-buffered canvas, which only gets updated to the visible canvas when you are ready. This takes quite a bit of code, but it has the advantage of being able to do large rapidly changing scenes with multiple sprites on them. If you wish to use this approach, you may be interested in A.J. Venter's gamepack, a set of components for game development in Lazarus, which provides a double-buffered display area component as well as a sprite component, designed to integrate well with one another. You can get gamepack via subversion: svn co svn://silentcoder.co.za/lazarus/gamepack

Retrieved from "http://wiki.lazarus.freepascal.org/index.php/Developing_with_Graphics"