This is an unfortunate side effect of using GDI+. It's processor based rather than GPU based, so it doesn't use your video hardware adequately, thus its performance varies from computer to computer. For amped up performance, you're going to want to use a graphics framework like XNA. Your FPS will likely increase by thousands (of course you'll want to throttle it back to 60.
"Im not very good at this" "i could do better" BRO YOUR THE BEST! Honestly You're the only one that actually had a solution to my problems in programming.
Thank you! I actually made that post the moment I ran into the problem and didn't stop to think about it. I actually figured it out myself a few minutes later. Sorry for the fake out and thanks for the help :)
nice tut bro . I just got interested with creating a game using VB with atleast little pictures moving or etc in the screen but after watching your tuts, It just took me in and made me more interested in it. Good Job making this bro .. Thumbs Up!!
The problem with game makers is that they're limited, and you still need to have knowledge of scripting to have custom content (if any).. Thank you Aardaerimus for teaching us how to code for real. Also coding in a language like VB or C++ allows you to have more than any game maker out there.
Thank you, Mitchell! You're quite right. :-) Which also means that BMP files are going to have a much larger footprint and consume more resources. PNG files will also carry alpha (transparency) values, eliminating the need for masking. I was still very new to this at the time I made this tutorial.
Exactly! :-D Some people just want to make games fast and are content to use game makers. I'm not content to just make games. I'm curious by nature and want to understand HOW it all works. Once you understand it, there are no limits to what you can achieve. This appeals to me much more than being confined to a structure that someone else built. I want to have the knowledge and ability to change the very foundations of that structure, for better or worse.
You can use both images and even different picture boxes. You just have to specify the proper image source when you draw the image. Because they're both tilesets, it may be much easier to combine them than to try to create conditions to make it choose one or the other.
Hello, Brian. In some later tutorials I cover this exact topic as well as showing how to compress and load the file data. In a nutshell, you'll want to create a tile class so that each tile object has its own set of properties and methods.
Im a software developer and have been working with VB since I was 13 (im now 31), never tried developing games involving graphics before its been mainly been telecoms, server based applications however im keen to learn how to do games as a hobby Didnt like the missing GFX tutorial, I downloaded it in your URL in the description but feel i now need to get to understand what the GFX file contains and how it works to get a full idea of how this game gets developed, whilst im following a tutorial im learning a long the way, if im just inserting bits of script you have developed elsewhere then i cannot say ive learnt to make a game, just merely call upon 3rd party api scripts. also a tip would be to improve the wording of your variables Ie start every integer with int, every boolean with bl Such as dim intResWidth as Integer = me.width dim intResHeight as Integer = me.height dim stGameTitle as string = "First Game" dim blRunning as boolean = true This way later on in the code you can tell what each variable is simply by its name Ive rated this video a thumbs down simply because of the GFX part, everything else has been thumbs up up until now hope i dont come across any more nasty surprises that end up putting me off as the end result of your videos seems pretty good which has got me wanting to learn how its done
In that case, I hope you're wildly successful! ;-D If you're planning on making a distributable game, I highly recommend using a more efficient framework rather than using GDI. XNA will give much better performance. Of course, GDI is great for "low action" games, like card games and such. At any rate, I wish you great success with your projects!
To stack tiles, you're going to end up needing to draw in layers. You could layer your tiles individually and draw them in a specific order. What I intend to try is storing "objects" (barrels, signposts, etc.) to a separate list and draw them over the map, before drawing the toon.
What I recommend is starting simple. First practice and learn your way around the IDE. Make simple form applications and understand objects, properties, methods, and events. Teach yourself by making the objects interact. Then learn how to create your own objects (classes). When you achieve your simple goal, destroy your project and start from the beginning on the next goal. The repetition will make the ideas stick in your brain. When comfortable, try something more complex. :-)
For the select case about 20:00 minutes in, I just wrote the math into the code instead of trying to do it in my head. Select Case Map(x, y, 0) Case 0 ' grass sRect = New Rectangle(1 * 32, 0 * 32, TileSize, TileSize) Case 1 ' tree sRect = New Rectangle(1 * 32, 4 * 32, TileSize, TileSize) Case 2 ' mountain sRect = New Rectangle(5 * 32, 4 * 32, TileSize, TileSize) End Select It saves hunting down errors later on, if your math happens to be off a bit. Plus it's quicker.
PNG Files are probably the best files for tiles. PNG Files store the colors in groups, where as BMPs, they storage the color of every single pixel, therefore, you are better off using PNG for better FPS, load times and disk space.
I think I was using an 800x600 image for my tile source pallet. The size really doesn't matter, though. You can use any size you like, since our source rectangles will only be grabbing pieces of the whole image anyway. :-)
Hmmm That's going to be a lot to go over. This is an olllld GDI+ video and I think I was just storing an array of integers to represent tiles, rather than actually storing an array of tile objects. In that case you could store the "layer" as an additional vector in the array: Old: Map(X,Y) New: Map(X,Y,Z) - Use the Z index as the layer. Every new value of Z creates an entire new layer of X/Y values. It's better to create tile objects (see Adventures in XNA), then add a layer property to them.
I kinda sorta did at the very end of the video. I do love the feedback and comments, but I hate to be spammy, so I rarely actually send out requests for views and likes. I appreciate the comment, Rishimahey! :-D
@TheOrneryNerd MS Paint is defintely not your friend for sprites and tiles. GraphicsGale is free and actually designed for pixel by pixel editing. It has a grid and preview window. It's really as small and simple as MS paint, but designed specifically for pixel art. It can also be used to animate. The right-click color selector is helpful once you make yourself a small gradient pallet (most tiles have very few colors). Gimp is also free and way more powerful, but may too much for pixel art.
@ToastedCreeper This is a common problem with using GDI, unfortunately. It's incredibly inefficient. To overcome this, you may have to trim up your screen size and reduce the scope of the map array. Try setting Map(100,100,10) to Map(100,100,1). Then reduce the size of your FOR X and FOR Y drawing loops. Try For X = 0 to 10 and for Y = 0 to 5 and work your way up to see where your performance dies out.
@thestalkinghead I'm glad that you found a workaround. sadly GDI fails to utilize your graphics hardware for rendering, so it is typically very sluggish. It also helps to greatly reduce the number of tiles that you render in your "For X/Y" loop, and reduce the form size. On the bright side, I'm working on starting up a short series of tutorials on XNA. I'm currently drawing 13 by 10, 48x48 tiles and getting an insane 4400TPS. What OS are you on?
I'm using Visual Basic 2010, which is part Microsoft Visual Studio. If you don't wish to pay for the professional edition you can download the free Express Edition directly from Microsoft. :-)
@SuperRandomshit101 I make a terrible programming partner, as I'm super busy most of the time, but you're always welcome to fire me a PM or email and I'm happy to assist or answer questions when I find time. A board game tutorial is really a great idea, though a bit involved. I will certainly consider this idea in the future. :-D The good news is that these tutorials really can be used to get you started. The only real difference is that a game board is usually one image rather than a tile map
That's what almost all of my videos are about. :-D What kind of game do you hope to create? GDI is most simple, but is not good for games with a great deal of movement and animation. It's great for puzzle games, card games, etc. My oldest videos cover this topic. If your games have a lot of movement and animation, you'll need a more robust framework, like XNA. My newer videos demonstrate the use of XNA. :-)
I love these series.. can VB 2013 Express do these? can you explain the difference between some of the versions in capabilites? Also, what is the GFX? you started with the tiles already there... would be nice to see how you made your source bitmap, and how it gets put into the visual studio.
You _should_ be able to do all of these things in VB.NET 2013.I haven't had much opportunity to play with 2013, but I don't think that the differences between 2010 and 2013 are very significant, save that the IDE has been altered (I prefer the 2010 interface). I'm sure that that are some differences, but over all the syntax seems to be virtually identical. As for the GFX class - that was a production mistake on my part. These old GDI tutorials are really dated and rather poorly executed... lol There is still much to learn from them, but many of the practices used were rather inefficient and could be (and have been) significantly improved upon.
Hey I love your tutorials , thank you! I have a question, did you make any tutorial about how to draw on screen? I'm gladly following your visual basic tutorials, but i stopped at the n 3 because i don't know how to draw on screen :/ (like mountains, or trees or other objects) thanks!
Helloo, Jensina! :-) I'm sorry for the slow reply. Here is a similar reply I made to MrNigpls about this a while back: "I'm thinking I made a mistake in the video there and it just magically appeared. :-P You can right click on your project and add a new form and name it GFX.vb. I think I was just using that to store the tile pallet in this old demonstration."
What should I do if I want to populate a certain range of tiles with images? Like I have a wall image and a floor image but I don't know how to make the floor show up like the default case
Hello :-) I'm having a little trouble understanding what you're trying to do. Do you mean that you have transparent sprites that you wish to draw on top of the tiles (layers)?
Hello, Hersheyvin. :-) What you're running into is the limitations of using Windows GDI. Unfortunately, it is not hardware rendered - meaning that it does not utilize the capabilities of your graphics hardware and thus is not good for games that have a lot of movement, animation, and redrawing of the screen. This severely restricts the resolution and performance. For such games, I highly recommend moving to a hardware rendered framework like XNA, SDL, or SFML.
@TheOrneryNerd MS Paint is definitely not your friend for sprites and tiles. GraphicsGale is free and actually designed for pixel by pixel editing. It has a grid and preview window. It's really as small and simple as MS paint, but designed specifically for pixel art. It can also be used to animate. The right-click color selector is helpful once you make yourself a small gradient pallet (most tiles have very few colors). Gimp is also free and way more powerful, but may too much for pixel art.
Thank you for the work you have put into this. I'm fairly new to VB and programming and it is really helping me alot! I do however have a question. I notice you put your bitmap image (the one with the tiles in it) in another form and in thats picturebox. Isn't it possible to call it directly from resources? I'm trying to call it direct, but i keep getting errors. It's this code: bmpTile = New Bitmap(GFX.pbGFX.Image) I have tried this, but doesn't works. New Bitmap("tileset.bmp")
Thank you! :-) I apologize for the error in this video. It was supposed to display how to add some of those graphics, though the techniques I used in this video are very old and I hope to soon be releasing a much better way to do these things. Feel free to send me a private message if you have a specific problem I can help with. I'll try my best to help. You can also download the source code from the link. :-)
@SuperRandomshit101 Hey there! It's TOTALLY doable. In fact, I was just toying with this recently. :-D It's actually much easier to produce a board game than most other games since the graphics and backdrop tend to be static. Most of your work will go into your cards, shuffling, setting up player turns, etc. Moving pieces around the board is fairly easy, depending upon your approach.
@nankurunaisa6567 I don't have any tutorials on this yet, but I may try to do something like it in the near future. What are you using for your "canvas"?
Great stuff man. I am a c++ programmer and I commend you for being able to work with VB syntax... When I see it, it makes me want to shoot myself lol. I used to use VB back in the day when I was making strictly GUI apps but I never got into the advanced VB programming like you have. It's so strange after the amount of time I have spent programming to see just how incredibly foreign VB seems.
@FinnishRonaldo Good catch! I have no idea how that cut off there. :-O All I did was add another form to the project. Simply Right-click your project name, in the solution explorer, select "Add" --> Windows Form. Name it GFX. Then you can add your Picturebox to it. Sorry about the confusion!
@nankurunaisa6567 I think that the best way to do this would be to create a Class, then a set of properties to store Image Source, Source Rectangle (If using a PictureBox), X/Y as destination or Form coordinates, Width, and Height, etc... Then use the mouse down/up events to check the coordinates of the mouse against the coordinates of the object and lock them to the mouse coordinates. Store each new object to an array, and loop through it to redraw each object at its specified X/Y coordinates.
Your Solution Explorer, how did you get you added a folder and called it Resources? You add a new item which is a Windows Form file I assume, and named it GFX (dot) vb? add a picture box a put the tile image into the picture box? But what is that tileset (dot) bmp
24:17 sRect = New Rectangle(5 * TileSize, 4 * TileSize, TileSize, TileSize) Would have been much simpler. Plus if you change the tilesize later, it's already coded in.
Hi Aardaerimus, I'm thinking of making a 2D Game like your making now. I've followed all the steps and it's really nice! However, how would I code a foe? I'm a newbie - I've only watched your videos for coding and I've tried my best to understand them. What kind of codes would you need for a moving npc? I'm not sure at all, could you help? (Hope you understand what I mean :P)
@YouMadJellyBro No offense taken. :-) You're absolutely right, and if your intentions are to quickly create games and don't mind utilizing already available frameworks, this is a great approach. What I focus on primarily is teaching how the code flow works and what is involved in coding your own environment. This grants the creator unparalleled control of their environment, so the sky is the limit. :-) It's the hard way, but in the end, more knowledge is more power.
Sounds good! Is there anything special I need to do with ms paint like set dimensions? Any recommendations? I don't care if it's pretty or not; I just want it to work.
There's really nothing more to it. :-) Naturally, you'll set your dimensions to whatever is needed for the number of tiles you wish to design. The only really important thing is making certain that your grid aligns with the tile size that you intended to use in your game. I'm not certain if you can show your grid in paint, but it's a really helpful feature for alignment.
Sack, I believe that what you're experiencing is due to the fact that GDI is incredibly inefficient at drawing as it does not utilize the functions and capabilities of your graphical hardware. You can improve it slightly by dramatically reducing the drawing size of your form and the over all number of tiles drawn to the screen. Beyond that, to build faster games with higher resolution you're going to need a framework that is built to function with your graphics hardware (XNA, DirectX, OpenGL)
I don't understand, I'm using Corel Paint shop proX5 and i cant follow with what your doing, or what hot keys you pressed to copy the image or how you put all of those pictures on one page layout.
You will want to familiarize yourself with the language, and then follow the XNA series. Alternatively, you can use SFML, though XNA stomps it in terms of performance.
sir aardaerimus may i ask a question? i made the form larger and when i load it the form seems to be slow and "choppy" especially when i move the character.. do i need to maintain the exact resolution of your work? how do i adjust in making the screen larger to make the program less laggy?
aww thats really bad. but another question sir. is there a simple way to talk to an npc? what i did was just adding the sprite to the tilemap(the getsourcerect) and i am fine even though they dont move. i just want to trigger a dialog when facing them. is there a simple way of doing that?
Yeah, I'm sorry about that. I made this tutorial a long time ago and made some mistakes in production. If there's anything specific I can help out with, let me know. :-)
I was trying to create this myself and followed your instructions. I even went back and followed them 4 times before I wrote this comment. Basically nothing appears on the screen when I run it. It stays blank as though it is not drawing anything at all. Did you miss something out in the video?
@kshitij721 It almost sounds to me like either your graphics loop is not cycling properly, or your backbuffer is not being cleared, else your mouse click event is not set properly. Those are the things I'd check first off.
So I have 2 images that i want to use as tilesets but VB is only using the first one which is named pbGFX. How do I use both images? Does it have to be one picture?
Hi I'm having an issue with bmpTile = New Bitmap(GFX.pbGFX.Image) Its saying no accessible "New" can be called without narrowing the conversation. Any thoughts?
Hello sir, I followed your instructions in this video, and the code functions properly. However, the performance has been reduced drastically. My frames per second dropped to 1; it is incredibly slow. Any ideas to increase efficiency?
I tried PNG format so I could create Transparent Graphics. PNG does work, but the Transparenccy is NOT kept when reformated to BMP by program. However, a picture box can hold transparent PNG files, so if you need a transparent background for a block, put it in a Picture Box Visibility = False, when needed, edit is Location and Visibility. Hope this can help!
@Aardaerimus Thanks! I'll be honest and say that painting the graphics 'correctly' by the tiles is basicly the hard part for me, as I'm using Microsoft paint (200,200 pixels).... the coordinates part to find the part of the picture i'm looking is pretty difficult!
@philipwalsh1999 The menus are a bit different but it has all of the same options. View Menu has: Show Grid, and Snap to Grid. Image Menu has: Configure Grid (to set grid size). Edit Menu has: Cut Copy Paste as --> New Layer Hope this helps :-)
Thanx because i was looking for jasc in not able to find a free one, i wanted to give up. Again i was wodering inthis vedio hw you calculted you x and y coordinates for th image?
@TutsModding Sorry, Tutsmodding. :-( I haven't used VB6 in ages, so I don't have any VB6 tutorials. I only use VB2010. You can download VB2010 Express for free, from Microsoft. If you don't have Vista or Windows 7, you may only be able to use VB2008 Express, though.
I am looking this tutorial because i want to learn VB and i know nothing about it, but i do know C++ and Java and i was looking at 22:35 in the GetSourceRect function Instead of always counting the number of pixel, coudnt you just have the program do it for ex : you defined as GetSourceRect(X,Y,w,h).....so in your switch (case) have the pixel values in the new rectangle call be multiplied by TIleSize so instead of New Rectangle(32,0,TileSize,TileSize) --> New Rectangle (1*TileSize, 0*TileSize, TileSize, TileSize)(and not forgetting to Math.floor it) which woudl alway multiply it by the tile size and factually make you life easier, so you coudl use your graphics map the same way calling the rectangle 0,0 for example and not have to calculate the pixel everytime.
@thestalkinghead Ahhh Sadly, I don't think XNA will install on XP. :-( GDI+ should suffice so long as the game isn't too complex and you keep the resolution low. On a netbook, this shouldn't be too much of a bad thing, since the screens are really small anyway. I have some code that can also reduce the monitor resolution during run time, which should make the game screen bigger and easier to see, and might also dramatically improve your TPS. I would love to see how it worked on a netbook. :-D
I have Gimp, but I'm a complete n00b f4g and don't know what the heck I'm doing. Is there any place I can go to, to get pre-made sprites and terrain designs like his or something?
how do you set images to replace the red and blue tile on the right side. in the code it is set to G.FillRectangle(Brushes.red, 21 * TileSize, 4 * TileSize, TileSize, TileSize) but i want to replace the colored tile with the image of the tile that you are placing on the map
@thestalkinghead :-( Sorry to hear that. I've noticed that some machines have a very tough time processing the GDI DrawImage when too many pixels are at play. I've also noticed that on certain machines it will throw an error when closing the app. This is because it's killing the form in the middle of the Draw routine but not actually terminating the drawing thread, so it continues to try to draw even after the resources have been unloaded. Send me a PM, I'll try to help with the slowness. :-)
Hello, FTDbruce64. :-) I'm honored you'd consider me; However I work a full time job and my coding time is severely restricted. Because of this I don't think that I would be a very good choice for a team.
Hello! I'm a little new to Layer Graphics and I have gimp but never used it. Can I draw the graphics in ms paint and then edit with gimp or can I do what you did in gimp alone? Can I just use paint and that's it? Just wondering why layering is important? Thanks in advance!
Hi there, Soulkiss31! You can use just Paint, if you like. :-) Gimp is a bit more powerful and has far more options (maybe a little too much at times), but Paint will do just fine for pixel art. GraphicsGale works well, too. I think that Gimp has better alpha channel control (for transparency, etc). I recommend saving your files in a PNG format. :-)
@xCrosSLightx Did you hand code it or use my source code? I noticed when I loaded my source on other computers, some of them didn't like it. There may be setting in one of my files hanging it up. :-( Another possibility is that you're using too many tiles. If your X/Y loop and your tile size is coming out to too many pixels, the GDI can really bog down. You're welcome to send me a private message with your loop source and I'll be happy to help if I can. :-)
This is an unfortunate side effect of using GDI+. It's processor based rather than GPU based, so it doesn't use your video hardware adequately, thus its performance varies from computer to computer.
For amped up performance, you're going to want to use a graphics framework like XNA. Your FPS will likely increase by thousands (of course you'll want to throttle it back to 60.
"Im not very good at this" "i could do better" BRO YOUR THE BEST! Honestly You're the only one that actually had a solution to my problems in programming.
Thank you! I actually made that post the moment I ran into the problem and didn't stop to think about it. I actually figured it out myself a few minutes later. Sorry for the fake out and thanks for the help :)
nice tut bro . I just got interested with creating a game using VB with
atleast little pictures moving or etc in the screen but after watching your tuts, It just
took me in and made me more interested in it. Good Job making this bro .. Thumbs Up!!
The problem with game makers is that they're limited, and you still need to have knowledge of scripting to have custom content (if any).. Thank you Aardaerimus for teaching us how to code for real.
Also coding in a language like VB or C++ allows you to have more than any game maker out there.
@xSileNT612x Awesome! Thank you for stopping by! I do hope we'll be seeing some project vids. :-D
Thank you, Mitchell! You're quite right. :-) Which also means that BMP files are going to have a much larger footprint and consume more resources. PNG files will also carry alpha (transparency) values, eliminating the need for masking.
I was still very new to this at the time I made this tutorial.
Exactly! :-D Some people just want to make games fast and are content to use game makers.
I'm not content to just make games. I'm curious by nature and want to understand HOW it all works.
Once you understand it, there are no limits to what you can achieve. This appeals to me much more than being confined to a structure that someone else built. I want to have the knowledge and ability to change the very foundations of that structure, for better or worse.
You can use both images and even different picture boxes. You just have to specify the proper image source when you draw the image. Because they're both tilesets, it may be much easier to combine them than to try to create conditions to make it choose one or the other.
Hello, Brian. In some later tutorials I cover this exact topic as well as showing how to compress and load the file data.
In a nutshell, you'll want to create a tile class so that each tile object has its own set of properties and methods.
Im a software developer and have been working with VB since I was 13 (im now 31), never tried developing games involving graphics before its been mainly been telecoms, server based applications however im keen to learn how to do games as a hobby
Didnt like the missing GFX tutorial, I downloaded it in your URL in the description but feel i now need to get to understand what the GFX file contains and how it works to get a full idea of how this game gets developed, whilst im following a tutorial im learning a long the way, if im just inserting bits of script you have developed elsewhere then i cannot say ive learnt to make a game, just merely call upon 3rd party api scripts.
also a tip would be to improve the wording of your variables
Ie start every integer with int, every boolean with bl
Such as
dim intResWidth as Integer = me.width
dim intResHeight as Integer = me.height
dim stGameTitle as string = "First Game"
dim blRunning as boolean = true
This way later on in the code you can tell what each variable is simply by its name
Ive rated this video a thumbs down simply because of the GFX part, everything else has been thumbs up up until now hope i dont come across any more nasty surprises that end up putting me off as the end result of your videos seems pretty good which has got me wanting to learn how its done
In that case, I hope you're wildly successful! ;-D
If you're planning on making a distributable game, I highly recommend using a more efficient framework rather than using GDI. XNA will give much better performance. Of course, GDI is great for "low action" games, like card games and such.
At any rate, I wish you great success with your projects!
To stack tiles, you're going to end up needing to draw in layers. You could layer your tiles individually and draw them in a specific order. What I intend to try is storing "objects" (barrels, signposts, etc.) to a separate list and draw them over the map, before drawing the toon.
What I recommend is starting simple. First practice and learn your way around the IDE. Make simple form applications and understand objects, properties, methods, and events. Teach yourself by making the objects interact.
Then learn how to create your own objects (classes). When you achieve your simple goal, destroy your project and start from the beginning on the next goal.
The repetition will make the ideas stick in your brain. When comfortable, try something more complex. :-)
pbGFX is just a PictureBox control added to the the GFX form and named "pbGFX". The "Image" property will your tile set picture. :-) Hope that helps.
For the select case about 20:00 minutes in, I just wrote the math into the code instead of trying to do it in my head.
Select Case Map(x, y, 0)
Case 0 ' grass
sRect = New Rectangle(1 * 32, 0 * 32, TileSize, TileSize)
Case 1 ' tree
sRect = New Rectangle(1 * 32, 4 * 32, TileSize, TileSize)
Case 2 ' mountain
sRect = New Rectangle(5 * 32, 4 * 32, TileSize, TileSize)
End Select
It saves hunting down errors later on, if your math happens to be off a bit. Plus it's quicker.
PNG Files are probably the best files for tiles.
PNG Files store the colors in groups, where as BMPs, they storage the color of every single pixel, therefore, you are better off using PNG for better FPS, load times and disk space.
thx For Tutorial i will try it this week but if have school
@4Antonis Right you are, and thanks for pointing it out. :-D
I think I was using an 800x600 image for my tile source pallet. The size really doesn't matter, though. You can use any size you like, since our source rectangles will only be grabbing pieces of the whole image anyway. :-)
Thanks for the Tutorial... your tutorials really helpful for graphic and so organize the code :D
Hmmm That's going to be a lot to go over. This is an olllld GDI+ video and I think I was just storing an array of integers to represent tiles, rather than actually storing an array of tile objects.
In that case you could store the "layer" as an additional vector in the array:
Old: Map(X,Y)
New: Map(X,Y,Z) - Use the Z index as the layer. Every new value of Z creates an entire new layer of X/Y values.
It's better to create tile objects (see Adventures in XNA), then add a layer property to them.
I kinda sorta did at the very end of the video. I do love the feedback and comments, but I hate to be spammy, so I rarely actually send out requests for views and likes. I appreciate the comment, Rishimahey! :-D
Figured it out, and for real this time!
@TheOrneryNerd MS Paint is defintely not your friend for sprites and tiles. GraphicsGale is free and actually designed for pixel by pixel editing. It has a grid and preview window. It's really as small and simple as MS paint, but designed specifically for pixel art. It can also be used to animate. The right-click color selector is helpful once you make yourself a small gradient pallet (most tiles have very few colors).
Gimp is also free and way more powerful, but may too much for pixel art.
Thank you for the Tutorial! It's a very usefull for me!
@ToastedCreeper This is a common problem with using GDI, unfortunately. It's incredibly inefficient. To overcome this, you may have to trim up your screen size and reduce the scope of the map array.
Try setting Map(100,100,10) to Map(100,100,1). Then reduce the size of your FOR X and FOR Y drawing loops.
Try For X = 0 to 10 and for Y = 0 to 5 and work your way up to see where your performance dies out.
@thestalkinghead I'm glad that you found a workaround. sadly GDI fails to utilize your graphics hardware for rendering, so it is typically very sluggish. It also helps to greatly reduce the number of tiles that you render in your "For X/Y" loop, and reduce the form size.
On the bright side, I'm working on starting up a short series of tutorials on XNA. I'm currently drawing 13 by 10, 48x48 tiles and getting an insane 4400TPS.
What OS are you on?
I'm using Visual Basic 2010, which is part Microsoft Visual Studio. If you don't wish to pay for the professional edition you can download the free Express Edition directly from Microsoft. :-)
@SuperRandomshit101 I make a terrible programming partner, as I'm super busy most of the time, but you're always welcome to fire me a PM or email and I'm happy to assist or answer questions when I find time.
A board game tutorial is really a great idea, though a bit involved. I will certainly consider this idea in the future. :-D
The good news is that these tutorials really can be used to get you started. The only real difference is that a game board is usually one image rather than a tile map
That's what almost all of my videos are about. :-D What kind of game do you hope to create? GDI is most simple, but is not good for games with a great deal of movement and animation. It's great for puzzle games, card games, etc. My oldest videos cover this topic.
If your games have a lot of movement and animation, you'll need a more robust framework, like XNA. My newer videos demonstrate the use of XNA. :-)
These are so helpful thanks so much!!!!
I love these series.. can VB 2013 Express do these? can you explain the difference between some of the versions in capabilites? Also, what is the GFX? you started with the tiles already there... would be nice to see how you made your source bitmap, and how it gets put into the visual studio.
You _should_ be able to do all of these things in VB.NET 2013.I haven't had much opportunity to play with 2013, but I don't think that the differences between 2010 and 2013 are very significant, save that the IDE has been altered (I prefer the 2010 interface). I'm sure that that are some differences, but over all the syntax seems to be virtually identical.
As for the GFX class - that was a production mistake on my part. These old GDI tutorials are really dated and rather poorly executed... lol There is still much to learn from them, but many of the practices used were rather inefficient and could be (and have been) significantly improved upon.
@Aardaerimus you're welcome :p awesome tutorial btw
thanks a lot for your help :), i'm not sure but i think i know how it works now
@FinnishRonaldo Awesome! Glad I could help. :-)
Hey I love your tutorials , thank you! I have a question, did you make any tutorial about how to draw on screen? I'm gladly following your visual basic tutorials, but i stopped at the n 3 because i don't know how to draw on screen :/ (like mountains, or trees or other objects) thanks!
Helloo, Jensina! :-) I'm sorry for the slow reply. Here is a similar reply I made to MrNigpls about this a while back:
"I'm thinking I made a mistake in the video there and it just magically appeared. :-P You can right click on your project and add a new form and name it GFX.vb. I think I was just using that to store the tile pallet in this old demonstration."
What should I do if I want to populate a certain range of tiles with images? Like I have a wall image and a floor image but I don't know how to make the floor show up like the default case
Hello :-) I'm having a little trouble understanding what you're trying to do. Do you mean that you have transparent sprites that you wish to draw on top of the tiles (layers)?
Hello, Hersheyvin. :-) What you're running into is the limitations of using Windows GDI. Unfortunately, it is not hardware rendered - meaning that it does not utilize the capabilities of your graphics hardware and thus is not good for games that have a lot of movement, animation, and redrawing of the screen. This severely restricts the resolution and performance.
For such games, I highly recommend moving to a hardware rendered framework like XNA, SDL, or SFML.
your videos are awesome man.
@TheOrneryNerd MS Paint is definitely not your friend for sprites and tiles. GraphicsGale is free and actually designed for pixel by pixel editing. It has a grid and preview window. It's really as small and simple as MS paint, but designed specifically for pixel art. It can also be used to animate. The right-click color selector is helpful once you make yourself a small gradient pallet (most tiles have very few colors).
Gimp is also free and way more powerful, but may too much for pixel art.
Awesome vid!
what version of Jasc you're using?
Thank you for the work you have put into this. I'm fairly new to VB and programming and it is really helping me alot!
I do however have a question. I notice you put your bitmap image (the one with the tiles in it) in another form and in thats picturebox. Isn't it possible to call it directly from resources?
I'm trying to call it direct, but i keep getting errors.
It's this code:
bmpTile = New Bitmap(GFX.pbGFX.Image)
I have tried this, but doesn't works.
New Bitmap("tileset.bmp")
Thank you! :-) I apologize for the error in this video. It was supposed to display how to add some of those graphics, though the techniques I used in this video are very old and I hope to soon be releasing a much better way to do these things. Feel free to send me a private message if you have a specific problem I can help with. I'll try my best to help. You can also download the source code from the link. :-)
Yes and no. I plan to do the layered mapping; However, we'll initially be doing a single layer map with a fully structured tile system.
Yea I like your video it's helpful but I just have to keep going back to check to see if i do it right
@SuperRandomshit101 Hey there! It's TOTALLY doable. In fact, I was just toying with this recently. :-D It's actually much easier to produce a board game than most other games since the graphics and backdrop tend to be static. Most of your work will go into your cards, shuffling, setting up player turns, etc. Moving pieces around the board is fairly easy, depending upon your approach.
@nankurunaisa6567 I don't have any tutorials on this yet, but I may try to do something like it in the near future.
What are you using for your "canvas"?
Great stuff man. I am a c++ programmer and I commend you for being able to work with VB syntax... When I see it, it makes me want to shoot myself lol. I used to use VB back in the day when I was making strictly GUI apps but I never got into the advanced VB programming like you have. It's so strange after the amount of time I have spent programming to see just how incredibly foreign VB seems.
@FinnishRonaldo Good catch! I have no idea how that cut off there. :-O
All I did was add another form to the project. Simply Right-click your project name, in the solution explorer, select "Add" --> Windows Form. Name it GFX. Then you can add your Picturebox to it.
Sorry about the confusion!
@nankurunaisa6567 I think that the best way to do this would be to create a Class, then a set of properties to store Image Source, Source Rectangle (If using a PictureBox), X/Y as destination or Form coordinates, Width, and Height, etc... Then use the mouse down/up events to check the coordinates of the mouse against the coordinates of the object and lock them to the mouse coordinates. Store each new object to an array, and loop through it to redraw each object at its specified X/Y coordinates.
Your Solution Explorer, how did you get you added a folder and called it Resources? You add a new item which is a Windows Form file I assume, and named it GFX (dot) vb? add a picture box a put the tile image into the picture box? But what is that tileset (dot) bmp
24:17
sRect = New Rectangle(5 * TileSize, 4 * TileSize, TileSize, TileSize)
Would have been much simpler. Plus if you change the tilesize later, it's already coded in.
Hi Aardaerimus, I'm thinking of making a 2D Game like your making now. I've followed all the steps and it's really nice! However, how would I code a foe? I'm a newbie - I've only watched your videos for coding and I've tried my best to understand them. What kind of codes would you need for a moving npc? I'm not sure at all, could you help? (Hope you understand what I mean :P)
@YouMadJellyBro No offense taken. :-) You're absolutely right, and if your intentions are to quickly create games and don't mind utilizing already available frameworks, this is a great approach.
What I focus on primarily is teaching how the code flow works and what is involved in coding your own environment. This grants the creator unparalleled control of their environment, so the sky is the limit. :-) It's the hard way, but in the end, more knowledge is more power.
Are you talking about the mouse rectangle remaining at the edge of your screen even after your mouse has completely left the game window?
We going to be getting tile layers in the next set of tutorials?
Thank you! :-)
Hmm That's certainly perplexing... So the tiles are following the mouse cursor? Are you drawing the tiles to the mouse coordinates?
Sounds good! Is there anything special I need to do with ms paint like set dimensions? Any recommendations? I don't care if it's pretty or not; I just want it to work.
There's really nothing more to it. :-) Naturally, you'll set your dimensions to whatever is needed for the number of tiles you wish to design. The only really important thing is making certain that your grid aligns with the tile size that you intended to use in your game. I'm not certain if you can show your grid in paint, but it's a really helpful feature for alignment.
Sack, I believe that what you're experiencing is due to the fact that GDI is incredibly inefficient at drawing as it does not utilize the functions and capabilities of your graphical hardware.
You can improve it slightly by dramatically reducing the drawing size of your form and the over all number of tiles drawn to the screen.
Beyond that, to build faster games with higher resolution you're going to need a framework that is built to function with your graphics hardware (XNA, DirectX, OpenGL)
ITS WORKING WITH .png IMAGE. I Write Map In Paint And Save It .png And I Follow Tutorial And Its Work :D
I don't understand, I'm using Corel Paint shop proX5 and i cant follow with what your doing, or what hot keys you pressed to copy the image or how you put all of those pictures on one page layout.
thank you this is helpful to me
You will want to familiarize yourself with the language, and then follow the XNA series. Alternatively, you can use SFML, though XNA stomps it in terms of performance.
im having trouble with bmpTile = New BitMap(GFX.pbGFX.Image), pls help
Did u ever figure it out?
sir aardaerimus may i ask a question? i made the form larger and when i load it the form seems to be slow and "choppy" especially when i move the character.. do i need to maintain the exact resolution of your work? how do i adjust in making the screen larger to make the program less laggy?
aww thats really bad. but another question sir. is there a simple way to talk to an npc? what i did was just adding the sprite to the tilemap(the getsourcerect) and i am fine even though they dont move. i just want to trigger a dialog when facing them. is there a simple way of doing that?
Yeah, I'm sorry about that. I made this tutorial a long time ago and made some mistakes in production. If there's anything specific I can help out with, let me know. :-)
Thank you. Got it figured :)
I was trying to create this myself and followed your instructions. I even went back and followed them 4 times before I wrote this comment. Basically nothing appears on the screen when I run it. It stays blank as though it is not drawing anything at all. Did you miss something out in the video?
When You First create the first image where all of your textures are on what the size of the main page?
I did make the form but I don't know how you got the image in there. May I ask, how did you do that?
I've been thinking about doing a series for complete beginners. You should be able to pick up a bit from my videos, hopefully. Good luck! :-)
So I am just a 15 yr old and fairly new to VB. What would the code look like for this?
i am re-making this in Python on my Game Engine
@kshitij721 It almost sounds to me like either your graphics loop is not cycling properly, or your backbuffer is not being cleared, else your mouse click event is not set properly.
Those are the things I'd check first off.
How do I put a tile on top of another tile if the first tile is an image (ex:barrel) with a transparent background.
So I have 2 images that i want to use as tilesets but VB is only using the first one which is named pbGFX. How do I use both images? Does it have to be one picture?
@raffantt Hey, thanks! I appreciate the comment. :-D
Hi I'm having an issue with bmpTile = New Bitmap(GFX.pbGFX.Image)
Its saying no accessible "New" can be called without narrowing the conversation.
Any thoughts?
Did you ever fix this?
Hello sir, I followed your instructions in this video, and the code functions properly. However, the performance has been reduced drastically. My frames per second dropped to 1; it is incredibly slow. Any ideas to increase efficiency?
I tried PNG format so I could create Transparent Graphics. PNG does work, but the Transparenccy is NOT kept when reformated to BMP by program. However, a picture box can hold transparent PNG files, so if you need a transparent background for a block, put it in a Picture Box Visibility = False, when needed, edit is Location and Visibility. Hope this can help!
@Aardaerimus
Thanks! I'll be honest and say that painting the graphics 'correctly' by the tiles is basicly the hard part for me, as I'm using Microsoft paint (200,200 pixels).... the coordinates part to find the part of the picture i'm looking is pretty difficult!
Could you lets say import a tile map made in this program into a different game engine, such as Unity?
@philipwalsh1999 The menus are a bit different but it has all of the same options. View Menu has: Show Grid, and Snap to Grid.
Image Menu has: Configure Grid (to set grid size).
Edit Menu has: Cut Copy Paste as --> New Layer Hope this helps :-)
Thanx because i was looking for jasc in not able to find a free one, i wanted to give up.
Again i was wodering inthis vedio hw you calculted you x and y coordinates for th image?
I Love the credits:D
@TutsModding Sorry, Tutsmodding. :-( I haven't used VB6 in ages, so I don't have any VB6 tutorials. I only use VB2010.
You can download VB2010 Express for free, from Microsoft. If you don't have Vista or Windows 7, you may only be able to use VB2008 Express, though.
I am looking this tutorial because i want to learn VB and i know nothing about it, but i do know C++ and Java and i was looking at 22:35 in the GetSourceRect function
Instead of always counting the number of pixel, coudnt you just have the program do it for
ex : you defined as GetSourceRect(X,Y,w,h).....so in your switch (case) have the pixel values in the new rectangle call be multiplied by TIleSize so instead of New Rectangle(32,0,TileSize,TileSize) --> New Rectangle (1*TileSize, 0*TileSize, TileSize, TileSize)(and not forgetting to Math.floor it) which woudl alway multiply it by the tile size and factually make you life easier, so you coudl use your graphics map the same way calling the rectangle 0,0 for example and not have to calculate the pixel everytime.
@thestalkinghead Ahhh Sadly, I don't think XNA will install on XP. :-( GDI+ should suffice so long as the game isn't too complex and you keep the resolution low. On a netbook, this shouldn't be too much of a bad thing, since the screens are really small anyway.
I have some code that can also reduce the monitor resolution during run time, which should make the game screen bigger and easier to see, and might also dramatically improve your TPS. I would love to see how it worked on a netbook. :-D
I have Gimp, but I'm a complete n00b f4g and don't know what the heck I'm doing. Is there any place I can go to, to get pre-made sprites and terrain designs like his or something?
how do you set images to replace the red and blue tile on the right side.
in the code it is set to
G.FillRectangle(Brushes.red, 21 * TileSize, 4 * TileSize, TileSize, TileSize)
but i want to replace the colored tile with the image of the tile that you are placing on the map
@thestalkinghead :-( Sorry to hear that. I've noticed that some machines have a very tough time processing the GDI DrawImage when too many pixels are at play. I've also noticed that on certain machines it will throw an error when closing the app. This is because it's killing the form in the middle of the Draw routine but not actually terminating the drawing thread, so it continues to try to draw even after the resources have been unloaded.
Send me a PM, I'll try to help with the slowness. :-)
Hello, FTDbruce64. :-) I'm honored you'd consider me; However I work a full time job and my coding time is severely restricted. Because of this I don't think that I would be a very good choice for a team.
why cant i open my bmp or png image in visual basic? ( I have made it in graphichsgale and snapped it together with GIMP )
Hello! I'm a little new to
Layer Graphics and I have gimp but never used it. Can I
draw the graphics in ms paint and then edit with gimp or can I do what you did in gimp alone? Can I just use paint and that's it? Just wondering why layering is important? Thanks in advance!
Hi there, Soulkiss31! You can use just Paint, if you like. :-) Gimp is a bit more powerful and has far more options (maybe a little too much at times), but Paint will do just fine for pixel art. GraphicsGale works well, too. I think that Gimp has better alpha channel control (for transparency, etc). I recommend saving your files in a PNG format. :-)
What program did u use for coding
i cannot get the image to come up on visual studio like yours does, it come up with the same image twice and i can zoom in and stuff,
@xCrosSLightx Did you hand code it or use my source code? I noticed when I loaded my source on other computers, some of them didn't like it. There may be setting in one of my files hanging it up. :-(
Another possibility is that you're using too many tiles. If your X/Y loop and your tile size is coming out to too many pixels, the GDI can really bog down.
You're welcome to send me a private message with your loop source and I'll be happy to help if I can. :-)