Mirage Source

Well, its only recently i have learnt how to do it and i am not going to pretend to be a master by any means; but it seems that blt'ing things onto the picscreen itself is a no go for many unexperienced users, and for that reason i stayed as far away as possible from anything that actually required me to blt anything onto the picscreen. Infact, i am not too sure what 'blt' means, or even how to pronounce it - but i do know the 'basics' as such and this tutorial should allow everyone out there to blt things happily till the cows come home, without having to constantly refere to this tutorial and cut and paste. Right, on we press!

Now what is the main reason people usually want to blt onto the picscreen? Well, in my experience at the beginning its wanting to put some nice icons at the top to represent their health, mana, etc. We are going to blt a nice little heart in the top left corner for the purpose of sitting next to the hp bar - why not blt the hp bar? Well, because i am unsure how to do it, and you can infact just drag the hp bar picbox onto the picscreen and it gives just the same effect; so thats how i have done it . Right, onto the tutorial itself .

For this tutorial we will be blt'ing a heart onto the picscreen, but not just any heart; an uber 1337 original creation from fox industries



Save this image into your client folder (the same directory as your client.exe), you can change the directory later if you want but for now i am not complicating things .

::::::::::::::::::::::::::::::
:::ALL CLIENT SIDE:::
::::::::::::::::::::::::::::::

First, we need to create the surface to blt our beautifull picture onto; we do this in moddirectX - and its suprisingly easy to do. Search for:

Public DDSD_BackBuffer As DDSURFACEDESC2



Underneath put this:

'onscreen heart
Public DD_HEARTSurf As DirectDrawSurface7

Public DDSD_HEART As DDSURFACEDESC2



Now, what we want to do next is move to the 'initsurfaces' sub of that module, and below:

' Initialize back buffer
DDSD_BackBuffer.lFlags = DDSD_CAPS Or DDSD_HEIGHT Or DDSD_WIDTH
DDSD_BackBuffer.ddsCaps.lCaps = DDSCAPS_OFFSCREENPLAIN Or DDSCAPS_SYSTEMMEMORY
DDSD_BackBuffer.lWidth = (MAX_MAPX + 1) * PIC_X
DDSD_BackBuffer.lHeight = (MAX_MAPY + 1) * PIC_Y
Set DD_BackBuffer = DD.CreateSurface(DDSD_BackBuffer)



We want to put:

' Init HEART ddsd type and load the bitmap
DDSD_HEART.lFlags = DDSD_CAPS
DDSD_HEART.ddsCaps.lCaps = DDSCAPS_OFFSCREENPLAIN Or DDSCAPS_SYSTEMMEMORY
Set DD_HEARTSurf = DD.CreateSurfaceFromFile(App.Path & "/HEART.bmp", DDSD_HEART)
DD_HEARTSurf.SetColorKey DDCKEY_SRCBLT, key



Now what this does (i think) is tells the client to create the 'surface' (think of it as a piece of paper) from "heart.bmp" and load it into your system memory. It also is telling it to use whatever your transparent color is set as on that image (again, so i think).

Now, we dont want that image being left in the system memory once we close the client down, so we need to tell it to unload it and wipe the surface (i think - notice alot of 'i thinks' as i am not 100% sure on anything, but i am pretty sure i am right.. if not close ^^), this is very easy. In that same module find:

Sub DestroyDirectX()
Set DX = Nothing
Set DD = Nothing
Set DD_PrimarySurf = Nothing
Set DD_SpriteSurf = Nothing
Set DD_TileSurf = Nothing
Set DD_ItemSurf = Nothing
End Sub



and underneath

Set DD_ItemSurf = Nothing



add

Set DD_HEARTSurf = Nothing



See? Perfectly logical, and not very hard to understand. So far we have told the game to create the surface, load the bmp into the system memory and then wipe the surface clean once the client is shutdown. How does the client know to look at subdestroydirectx when it closes down? Well, if you look in frm mirage and variouse other places around the source code when it is closed down its told to call 'gamedestroy'. Whats in there?

Sub GameDestroy()
Call DestroyDirectX
End
End Sub



Therefore excecuting sub destroydirectX and wiping our surfaces for us . Now, in order to make the client actually realise we want something to be happening constantly while we are running it, we look at the gameloop. This is really exactly what it says; whatever we put in there gets constantly excecuted, it goes through the sub doing everything we tell it then loops back to the beginning, performing this an infanite (spelt wrong?) number of times as long as the game is running. So, what are we trying to do here? We are going to be blt'ing an image onto the screen. We have prepaired the surfaces, we have loaded the image into the system memory; and now we are going to tell the game to coninuously put it there. Find:

' Blit out tile layer fringe
For y = 0 To MAX_MAPY
For x = 0 To MAX_MAPX
Call BltFringeTile(x, y)
Next x
Next y



Now look at the top right of your code window. Where are we? the marvelouse game loop! Underneath the code we just found, add:

'blt the HP/MP plx
Call BltHEART



[edit]Now i am adding this part to the tutorial as i was reading through it and noticed this may not be apparent to some readers. Why are we putting this code in this particular spot? Basically, the way this part works is it reads through what to blt and puts it all on top of each other, so we have the ground at the top of the code, then mask etc.. - now we dont want our amazing uber 1337 heart to be underneath the fringe, we want it to be above everything so we can always see it; so we tell it to blt the heart last. This is an important part of how mirage works, and i cant believe i missed it out first time round! Well, now you know! Sorry about that everyone [/edit]

Now what does this do? Remember earlier we saw that the game calls on a sub when it closes and it does whatever is in that sub? This is going to call our "sub bltheart" constantly and do whatever is in it - in this case we are going to tell it to take our image we have loaded into the memory and slap it onto our screen. How do we do that? Well, the first thing you should know is modgamelogic is where everything happens; if you add pretty much anything visual you are going to want to put it in here, it doesent matter where as our 'call bltheart' in the game loop isnt picky about finding things. I suggest we scroll right to the bottom of the sub, once there, add this:

Sub BltHEART()
rec.top = 0
rec.Bottom = 32
rec.Left = 0
rec.Right = 32

Call DD_BackBuffer.BltFast(10, 10, DD_HEARTSurf, rec, DDBLTFAST_WAIT Or DDBLTFAST_SRCCOLORKEY)
End Sub



Now here this looks complicated, and quite scary - but seriously; there isnt much to take in. The 'rec.top' etc is basically the size of your image, in general leave the left and top at 0. Depending on the size of your image change the "red.bottom =" to the height, and the "rec.right =" to the width. For this demonstration i have done this for you and its alwready set to the height and width of our heart.bmp .

Now the evil horrible looking bit, the call DD_Backbuffer~~, basically what i do here is ignore everything apart from

10, 10, DD_HEARTSurf



Now, see our word there? Heart? i have used heart throughout; if you are blt'ing say 'mana' all the instances where i have put 'heart' in this tutorial change it to mana, including this bit. This is telling the client to look at the heart surface we made in the directx bit earlier on, not hard to understand at all. The next bit we see is the two 10's. This is our .bmp's position on the picscreen (the picscreen is the game screen). The first digit is how far accross from the top left we want it to be, and the second is how far down from the top left we want it to be, both are in pixels. I chose 10 and 10 for this tutorial as it is a nice position to put the heart for use as an onscreen hp indicator GUI thingemagig.

Guess what? Your done! Boot up your game and log in, see the heart in the corner? Your geniouse! Now a whole world of oppertunities has opened up for you and your project, all you have to do now is make sure your hp bar is a picbox, then bring it to 'the front' in frmmirage by right clicking it and selecting 'bring to front', then dragging it over the picscreen. It can be very fiddly getting it to line up with your heart or whatever you are using, but trial and error eventually works!



You can see how i have used this same method in Konfuze in this screenshot, Notice i have mana there aswell? Follow the same method, but make it place the mana image further down by altering our "10,10" co-ordinates to get the same effect. Well, the world is your oister - i hope you can now confidently blt images onto the picscreen and position them; I am not the greatest tutorial writer as i am still learning alot myself, but i hope this has helped at least someone out there!

Thanks;
Fox