Drawing images to vmu screen help.

[NeoGeoFreak2004]

Hey so anyways, I was wondering how do I draw bitmaps in asm on the vmu, because I’m sorta confused on how to draw bitmaps via the first lesson.

[Candle-Electric]

For sure! To start, you'll want an empty "Template" Code Base. This can be done by Creating a New Folder with main.asm, GameHeader.i, and the Entire lib/ Folder (which contains the Screen-Drawing Libraries we'll be using.) as the Contents, all of which can be pulled from the Lesson 1 Folder. Then, looking at main.asm, we only need to focus on the Main_Loop: Declaration and everything below it; everything above that is Set-Up Code that we don't need to change. So, looking at those Lines:

Main_Loop:
    P_Draw_Background_Constant Hello_World_BackGround
    P_Blit_Screen
    jmpf Main_Loop

;=======================;
;    Include  Images    ;
;=======================;
    .include        "./Hello_World_BackGround.asm"

That Call to P_Draw_Background_Constant is what will Draw the Bitmap. Hello_World_BackGround, which we can see roped in with the .include Call at the bottom, is the Bitmap that will be drawn. That File itself can be viewed in the Lesson 1 Folder, but you can draw any 48 X 32 Image that you'd like. It will just need to be in the Format of this Template (A Blank White Screen, in this case.), where 0s mark White Pixels and 1s mark Black Pixels:

Example_Blank_Screen:
.byte   48,32
.byte   %00000000,%00000000,%00000000,%00000000,%00000000,%00000000
.byte   %00000000,%00000000,%00000000,%00000000,%00000000,%00000000
.byte   %00000000,%00000000,%00000000,%00000000,%00000000,%00000000
.byte   %00000000,%00000000,%00000000,%00000000,%00000000,%00000000
.byte   %00000000,%00000000,%00000000,%00000000,%00000000,%00000000
.byte   %00000000,%00000000,%00000000,%00000000,%00000000,%00000000
.byte   %00000000,%00000000,%00000000,%00000000,%00000000,%00000000
.byte   %00000000,%00000000,%00000000,%00000000,%00000000,%00000000
.byte   %00000000,%00000000,%00000000,%00000000,%00000000,%00000000
.byte   %00000000,%00000000,%00000000,%00000000,%00000000,%00000000
.byte   %00000000,%00000000,%00000000,%00000000,%00000000,%00000000
.byte   %00000000,%00000000,%00000000,%00000000,%00000000,%00000000
.byte   %00000000,%00000000,%00000000,%00000000,%00000000,%00000000
.byte   %00000000,%00000000,%00000000,%00000000,%00000000,%00000000
.byte   %00000000,%00000000,%00000000,%00000000,%00000000,%00000000
.byte   %00000000,%00000000,%00000000,%00000000,%00000000,%00000000
.byte   %00000000,%00000000,%00000000,%00000000,%00000000,%00000000
.byte   %00000000,%00000000,%00000000,%00000000,%00000000,%00000000
.byte   %00000000,%00000000,%00000000,%00000000,%00000000,%00000000
.byte   %00000000,%00000000,%00000000,%00000000,%00000000,%00000000
.byte   %00000000,%00000000,%00000000,%00000000,%00000000,%00000000
.byte   %00000000,%00000000,%00000000,%00000000,%00000000,%00000000
.byte   %00000000,%00000000,%00000000,%00000000,%00000000,%00000000
.byte   %00000000,%00000000,%00000000,%00000000,%00000000,%00000000
.byte   %00000000,%00000000,%00000000,%00000000,%00000000,%00000000
.byte   %00000000,%00000000,%00000000,%00000000,%00000000,%00000000
.byte   %00000000,%00000000,%00000000,%00000000,%00000000,%00000000
.byte   %00000000,%00000000,%00000000,%00000000,%00000000,%00000000
.byte   %00000000,%00000000,%00000000,%00000000,%00000000,%00000000
.byte   %00000000,%00000000,%00000000,%00000000,%00000000,%00000000
.byte   %00000000,%00000000,%00000000,%00000000,%00000000,%00000000
.byte   %00000000,%00000000,%00000000,%00000000,%00000000,%00000000

That First Line is the Name of the Image. You'll want to Save the Image as an .ASM File, with a matching File Name. Then, you can .include that File and Call it in the Main Loop. So, if we wanted to draw that Blank Screen instead of the "Hello World BG," we could change the two Calls to P_Draw_Background_Constant Example_Blank_Screen and .include Example_Blank_Screen.asm respectively, before finally Compiling the Build in WaterBear. Let me know if this helps clear up any confusion. And thanks so much for reaching out!

[NeoGeoFreak2004]

Thanks, but here's the thing, how do I draw stuff (eg backgrounds , sprites) as bitmaps in ASM? That's the thing that is confusing. Do I have to press Ctrl+F then press the 1 key then press the insert key but then how do you draw on the screen like say highlight in ASM? Sorry if this sounds bad, I'm not good at vmu programming I'm a noob at this.

[Candle-Electric]

No worries at all, and no need to be sorry! You can draw them any way you like and in any Text Editor, all you need to change are the 0s and 1s that represent the Dots that comprise the Image. Hitting the Insert Key and then typing in the 1s where you want to fill in the Pixels is what I do, since it will directly overwrite the 0 without changing the spacing; every "Chunk" will need exactly 8 Digits in between the % and the Comma. The .ASM Images are akin to ASCII Art in many ways. For example, to draw this as an .ASM:

We'd do this:

Happy_Tuesday:
.byte   32,16
.byte   %00000010,%10000000,%00000000,%00000000
.byte   %00000010,%10000000,%00000000,%00000000
.byte   %00000011,%10011001,%10011001,%01000000
.byte   %00000010,%10101001,%01010101,%01000000
.byte   %00000010,%10010101,%10011000,%11000000
.byte   %00000000,%00000001,%00010000,%01000000
.byte   %00000000,%00000001,%00010000,%01000000
.byte   %00000000,%00000001,%00010001,%10000000
.byte   %00000000,%00000000,%00000000,%00000000
.byte   %01111100,%00000000,%00010000,%00000010
.byte   %00010000,%00010001,%00010000,%00000010
.byte   %00010010,%10111010,%00110010,%00101010
.byte   %00010010,%10100001,%01010101,%00101000
.byte   %00010001,%10011010,%00110010,%10011010
.byte   %00000000,%00000000,%00000000,%00001000
.byte   %00000000,%00000000,%00000000,%00110000

We'd then save that as an .ASM File, and Kresna's LibPerspective Code will handle the rest. As for hitting Ctrl+F, I like to do that to help me see the Drawn Image, since the Visual Studio IDE will highlight the Ones or Zeroes:

I see for sure why that was unclear in the Lesson 1 Article. Let me know if that helps!

[NeoGeoFreak2004]

Okay here's an update, so anyways I was wondering how do I convert sprites to the ASCII format so I can use them in my am files for the vmu?

[Candle-Electric]

Absolutely! As of now, I've been converting everything by hand, taking the blank template and drawing over it with each pixel as the 1s and 0s for Black and White Dots, respectively. I could work on writing up a quick tool to do it from a Bitmap or .PNG; also if you have any Sprites, I can convert them over for you and put them in here to give you a visual idea on it as well!

[NeoGeoFreak2004]

Sorry if I respond so late, but how about create some circle sprites that are small enough so you can see them on the vmu display. Why do I say that, well because I am thinking about making a vmu match 3 game with circles as my first project.