Decal Development Forums

[Saitoh_TD]

Howto: Drawing Images in a Decal using Visual Basic

**Warning: This is for last ditch, "I absolutely need to do this!" drawing. You can hose alot of thing doing this." There is an image control in the works as well as an unfinished DerethMap control. So, unless you absotively, posolutely must do drawing, be patient and wait for those controls. **

Definitions:

Canvas - The area you draw on, just like the real life equivalent
tagRECT - The box around an image
tagSIZE - The size in bytes of an image
tagPOINT - The top-left corner position
Render - Perform a draw
Blt - Put this to there

Concepts:

Since most of us VB'ers aren't used to dealing with Rendering, there are a few things to know. Images have to be drawn every time a frame is rendered. When a frame is rendered, your plugin will receive a call to IRenderSink_CustomDraw. This is when you specify to draw your image(canvas). This is not the time to load your image or do any major manipulations. You will want to limit the amount of processing during this subroutine to the bare minimum.

I've noticed some inconsistencies with the DecalPlugins.tagPOINT and DecalControls.tagPOINT that VB really doesn't like. So some of the definitions may seem strange.

In this tutorial, we will draw an image to a canvas and overlay it with a series of images. We will also toggle our image on and off.

What you need:

You will need 2 images in Windows BMP format. If you create them in Paint, you are fine. Make one 200x200 and the other 2x2.

Header:

The first thing you need is to tell your plugin to use IRenderSink and define your Canvas and Image.

Code:

Implements IRenderSink

'Plugin View
Private WithEvents MainView As DecalPlugins.View

'Define Canvas
Private MyCanvas As Canvas
Private MyCanvasSize As tagSIZE
Private MyCanvasDest As DecalPlugins.tagPOINT
Private MyCanvasRect As DecalPlugins.tagRECT

'Define Image
Private MapImage As IImageCache
Private MapImageRect As tagRECT
Private MapImageDest As tagPOINT
Private MapImageSize As DecalPlugins.tagSIZE

'Define MiniImage
Private PointImage As IImageCache
Private PointImageRect As tagRECT
Private PointImageDest As tagPOINT
Private PointImageSize As DecalPlugins.tagSIZE

'Other Parts
Private DrawEnabled as Boolean
Private ImageReady as boolean



Initialize:

Now that we have a canvas and two images, we need to fill them with images. While this could be done anywhere, it is best to put it into IPlugin_Initialize. If your images aren't properly loaded and you attempt to draw, it either won't show or you will crash. It can be anything from a simple pop-up message to a lockup.

Code:


'Define a canvas, this should be the max area you want to draw onto.
'It will be clear in color, so don't worry about oversizeing.

'Size of Canvas
MyCanvasSize.cx = 210
MyCanvasSize.cy = 210

'Position of canvas on 3D area
MyCanvasDest.x = 0
MyCanvasDest.y = 30

'Inner Size of Canvas
MyCanvasRect.Left = 0
MyCanvasRect.Right = MyCanvasRect.Left + MyCanvasSize.cx
MyCanvasRect.Top = 0
MyCanvasRect.bottom = MyCanvasRect.Top + MyCanvasSize.cy

'Create it
Set MyCanvas = PluginSite.CreateCanvas(MyCanvasSize)



Now that we have a canvas, we perform similiar steps on the two images:
Code:

'Load an image from your plugins folder
Set MapImage = PluginSite.LoadBitmapFile(App.Path & "\MyImage.bmp")

'Position of the image
MapImageDest.x = 0
MapImageDest.y = 0

'Inner Size of the Image
MapImageRect.Left = 0
MapImageRect.Right = MapImageRect.Left + MapImage.Size.cx
MapImageRect.Top = 0
MapImageRect.bottom = MapImageRect.Top + MapImage.Size.cy

'Repeat for the small image
Set PointImage = PluginSite.LoadBitmapFile(App.Path & "\MyPoint.bmp")
PointImageDest.x = 0
PointImageDest.y = 0
PointImageRect.Left = 0
PointImageRect.Right = PointImageRect.Left + PointImage.Size.cx
PointImageRect.Top = 0
PointImageRect.bottom = PointImageRect.Top + PointImage.Size.cy




And don't forget:
Code:

DrawEnabled = False



Now, I know you might be thinking "Why not put the image on to the canvas now?" Basically, you can't. All you will get is blank. So....

Drawing Part 1:

I've found the best time to set your image, is when your plugin opens.

During your MainView_Activate() or whatever you call it:

Code:

'Wipe the Canvas by filling it with Purple
MyCanvas.Fill MyCanvasRect, RGB(0, 255, 255)

'Put the image on the Canvas
MapImage.Blt MapImageRect, MyCanvas, MapImageDest

'Put the mini images on top of the image on the Canvas
For Counter = 1 to 100
PointImageDest.x = Counter
PointImageDest.y = Counter
PointImage.Blt PointImageRect, MyCanvas, PointImageDest
Next

'Let the Renderer know to draw
DrawEnabled = True



To turn off your image, you just need to toggle a flag. Since were are drawing when our plugin is active, we should stop when our plugin is not active.

So, during Mainview_Deactivate()

Code:

DrawEnabled = False



Drawing Part 2:

We've got a canvas that's ready to go. Now what do we do with it? We draw it to the screen. Remeber the line Implements IRendersink? This is where it is important.

Code:

Private Sub IRenderSink_CustomDraw(ByVal pCanvas As DecalPlugins.ICanvas)
Dim Counter As Long
On Error GoTo Error_Handler:
If DrawEnabled = True Then
pCanvas.Alpha = 255

'Put the Canvas on the Screen Canvas
pCanvas.Blt MyCanvasRect, MyCanvas, MyCanvasDest
End If
Exit Sub
Error_Handler:
wtcw "IRenderSink_CustomDraw - " & Err.Description
Resume Next
End Sub



Summary:

That's it. You have just drawn an image with 100 little images drawn across it in a line.

Here are some quick steps to rememeber:

Canvas: Size->Position->Create
Images: Load->Size->Position->BLT
Blt'ing: Image->Canvas->Screen
_________________
- Navi - Navi II - Navi III -
http://www.saigumi.net
http://navi3.sourceforge.net

[God Almighty]

Awesomen
_________________

[Moputu]

This is an awesome example, Saitoh.

Something I've run into wile working with the IRendersink, though, is that if the canvas, image, icon and font objects and the, tagRects, tagPoints and tagSize types aren't declared as private within the class module that holds the Implements line (normally your main public class), that it will not draw anything at all

This really bites because I spent some time writing some wrapper classes for some of these objects only to find out that it wouldn't work that way

Just wondering if you've found a workaround for this. This limitation is causing all kinds of headaches for me.

[Guest]

Mopotu, its not only that, if you misassign something (in my case setting my control), irendersink fails to draw

[Saitoh_TD]

Moputu, haven't tried breaking my IRenderSink into another class, since I haven't switched over to the Hub style architecture. I'll take a look at it though.

Although, I've been playing around with making a control, but since I don't know C, I have to do it in VB and VB isn't liking the things I have to do, although it might get dwarfed with the Image Decal Control that Elph is working on.
_________________
- Navi - Navi II - Navi III -
http://www.saigumi.net
http://navi3.sourceforge.net

[Moputu]

I got it working with with some objects contained in another class module.

It looks like the canvas object and related types(tagRect, tagPoint and tagSize) need to be declared on the main class as private, but all other objects can be placed into another class (declared private of course).

You just need to pass a reference of the canvas and types to this class. Then you can expose all of the private types in this class via properties and function/subs.

You can perform all of the drawing to canvas (not the drawing OF the canvas, mind you) of the various objects within this class, making it possible for the other classes and modules to trigger drawing events and whatnot.

I hope that helps.

[guest]

Is there a method to load an image from a VB resource file rather than a BMP file?

[guest]

or even better to load from the portal.dat