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.

[NeoGeoFreak2004]

Hi there, sorry to bug you but I was wondering if you could send me the image tool to convert PNG or bitmap images to the vmu. Thanks and have a great night

[Candle-Electric]

No worries at all, Thanks for reaching out and Sorry for the late response! Sadly i haven't coded up the Image Conversion Tool yet. I can start on that after the New Year though. In the meantime though, i'd be happy to draw up .ASM Files for some Circle Sprites for you to get started. What Dimensions would you like the Circles to be? For example, here's an 8X8 Circle, & a 9X9 Circle + Mask:

Circle_Example:
.byte	8,8
	.byte	%00011000
	.byte	%00100100
	.byte	%01000010
	.byte	%10000001
	.byte	%10000001
	.byte	%01000010
	.byte	%00100100
	.byte	%00011000

Circle_Example_Mask:
  .byte	11,11
	.byte	%11110001,%11111111
	.byte	%11101110,%11111111
	.byte	%11000000,%01111111
	.byte	%10000000,%00111111
	.byte	%00000000,%00011111
	.byte	%00000000,%00011111
	.byte	%00000000,%00011111
	.byte	%10000000,%00111111
	.byte	%11000000,%01111111
	.byte	%11100000,%11111111
	.byte	%11110001,%11111111
	.byte	%00000000,%00000000
	.byte	%00001110,%00000000
	.byte	%00010001,%00000000
	.byte	%00100000,%10000000
	.byte	%01000000,%01000000
	.byte	%01000000,%01000000
	.byte	%01000000,%01000000
	.byte	%00100000,%10000000
	.byte	%00010001,%00000000
	.byte	%00001110,%00000000
	.byte	%00000000,%00000000

[NeoGeoFreak2004]

Hi there sorry if I ass you this but is the image converter to the vmu ready to be released? Also, here's a idea. How about a VMU tile editor kinda like the Gameboy tile designer? That's my 2 cents into that idea. Thanks and have a great day

[Candle-Electric]

Nothing to be sorry about, my Friend! Thank you for the Suggestion! The VMU Image Converter For LibPerspective Format is available here now. It's currently in an early state, and more is planned for the Future, such as Masking the Sprites. After Downloading the .EXE, you can place a .PNG Input Image in the same Directory, and then via the Command Line Run:
VMU_LibPerspective_Sprite_Generator.exe InputFile.PNG
Then, it'll populate that Directory with InputFile.ASM, which you can use with Kresna's LibPerspective. I'll Update the Tutorial as well with more details as the Program comes along. Please Feel Free to Reach Out with any Questions!