Skip to content

Commit 894f579

Browse files
author
Christian Radke
committed
Added tutorials
1 parent 2c5859d commit 894f579

File tree

43 files changed

+695
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+695
-0
lines changed

‎doc/VUE-MASTER Code Tutorial VBDE Light.html

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
<!doctype html>
2+
3+
<html lang="en">
4+
<head>
5+
<title>VUE-MASTER VBDE Light Tutorial</title>
6+
<meta charset="utf-8">
7+
8+
<link rel="stylesheet" href="css/style.css">
9+
</head>
10+
<body>
11+
12+
<div class="main-container">
13+
14+
<h1>
15+
VUE-MASTER VBDE Light Tutorial
16+
<span class="sub-title">How to make a ROM from your PNG files (VBDE Light)</span>
17+
<span class="author">By STEREO BOY</span>
18+
</h1>
19+
20+
<p>In this tutorial, I'm sharing my experiences with creating the <a href="http://www.planetvb.com/modules/newbb/viewtopic.php?topic_id=7005" target="_blank"><i>VUE-MASTER</i> Demo Reel</a>. I'm a CG graphics artist with nearly zero programming experience.</p>
21+
22+
<p>This tutorial shows how to make a VUE-MASTER reel in 6 easy steps using VBDE Light (which is recommended for non-programmers). If you're using VBDE Pro, please refer to <a href="VUE-MASTER Code Tutorial VBDE Pro.html">the respective tutorial</a>.<br>
23+
The tutorial describes the easiest way to use the VUE-MASTER template: by replacing the 7 existing demo images with your own files.</p>
24+
25+
<h2>What you will need:</h2>
26+
<ul>
27+
<li>VUE-prepared PNG files, matching the VB requirements (see the <a href="VUE-MASTER Graphics Tutorial.html">Graphics Tutorial</a>)</li>
28+
<li><a href="http://vbde.planetvb.com/" target="_blank">Download</a> and unpack the latest VBDE*</li>
29+
</ul>
30+
31+
<div class="note">
32+
*VBDE is a portable application, which means you can move it anywhere, but it's recommended to put it here: <i>C:\vbde\</i>
33+
</div>
34+
35+
<h2>Step 1 – Preparing the VBDE project folder</h2>
36+
37+
<figure>
38+
<img src="img/vbde/VUE-MA-VBDE_Img-01_rename.png"/>
39+
</figure>
40+
41+
<ul>
42+
<li>Browse <i>C:\vbde\samples\vuengine\</i> and make a copy of the "vue-master" template folder. Name it after your reel's project title.</li>
43+
</ul>
44+
45+
<figure>
46+
<img src="img/vbde/VUE-MA-VBDE_Img-02_replace-pngs.png"/>
47+
</figure>
48+
49+
<ul>
50+
<li>Replace the existing demo PNGs under: <i>assets\images\VueMasterImages\</i> with your own files.</li>
51+
</ul>
52+
53+
<figure>
54+
<img src="img/vbde/VUE-MA-VBDE_Img-03_delete-c-files.png"/>
55+
</figure>
56+
57+
<ul>
58+
<li>Delete all existing .c files under: <i>assets\images\VueMasterImages\VueMasterImage#\Binary\</i> for every image you've replaced.</li>
59+
</ul>
60+
61+
62+
<h2>Step 2 – Setting up the VBDE Light project</h2>
63+
64+
<ul>
65+
<li>If you have any instances of Notepad++ open, please close them before launching VBDE Light.</li>
66+
<li>Launch <i>C:\vbde\VBDE.exe</i></li>
67+
<li>If the Windows firewall gives you any warning like "Unknown Publisher" choose "more" > "run anyway".</li>
68+
</ul>
69+
70+
<figure>
71+
<img src="img/vbde/VUE-MA-VBDE_light_Img-04_add-fav.png"/>
72+
</figure>
73+
74+
<ul>
75+
<li>Browse your project path with VBDE Light Explorer, right click and add it to favorites.</li>
76+
</ul>
77+
78+
<figure>
79+
<img src="img/vbde/VUE-MA-VBDE_light_Img-05_name-fav.png"/>
80+
</figure>
81+
82+
<ul>
83+
<li>Give it a project title ...</li>
84+
<li>You can browse the project files in the left explorer window now.</li>
85+
</ul>
86+
87+
88+
<h2>Step 3 – Converting images to tiles</h2>
89+
90+
<ul>
91+
<li>Make sure to have a file from the VUE-MASTER path open when you hit "convert images".</li>
92+
</ul>
93+
94+
<figure>
95+
<img src="img/vbde/VUE-MA-VBDE_light_Img-06_convert-images.png"/>
96+
</figure>
97+
98+
<ul>
99+
<li>Execute: <i>"Run" > "CONVERT images"</i> (or just use the quick button in the top left corner).</li>
100+
<li>New .c files were created in the <i>"Binary"</i> folders.</li>
101+
</ul>
102+
103+
104+
<h2>Step 4 – Transferring tiles count (for every image)</h2>
105+
106+
<figure>
107+
<img src="img/vbde/VUE-MA-VBDE_light_Img-07_copy-tiles.PNG"/>
108+
</figure>
109+
110+
<ul>
111+
<li>Open: <i>assets\images\VueMasterImages\VueMasterImage1\Binary\VueMasterImage1.c</i> (neither <i>"..Left.c"</i> nor <i>"..Right.c"</i>)
112+
<ul>
113+
<li>If the "tiles" count from the header comment (line 7) is 2033 or less: copy it.</li>
114+
<li>If the tiles count is more than 2033, refer to <a href="VUE-MASTER Graphics Tutorial.html#2">Part 2 of the Graphics Tutorial</a>.</li>
115+
</ul></li>
116+
<li>Open: <i>assets\images\VueMasterImages\VueMasterImage1\Definition\VueMasterImage1Definition.c</i></li>
117+
</ul>
118+
119+
<figure>
120+
<img src="img/vbde/VUE-MA-VBDE_light_Img-08_paste-tiles.PNG"/>
121+
</figure>
122+
123+
<ul>
124+
<li>Paste/replace the tiles count of image 1 under "CharSetROMDef" (line 49).</li>
125+
<li>Now repeat this procedure (Step 4) for every image, that you have replaced before&hellip;</li>
126+
</ul>
127+
128+
129+
<h2>Step 5 – Adding titles to the main menu</h2>
130+
131+
<ul>
132+
<li>Open: <i>\assets\languages\Language_EN.c”</i></li>
133+
</ul>
134+
135+
<figure>
136+
<img src="img/vbde/VUE-MA-VBDE_light_Img-09_add-titles.PNG"/>
137+
</figure>
138+
139+
<ul>
140+
<li>Add your reel's title at line 49.</li>
141+
<li>Add your reel's description text or credits at line 51.</li>
142+
<li>Keep your text inside the quotation marks.</li>
143+
<li>You can add line breaks by pasting <i>\n</i>.</li>
144+
</ul>
145+
146+
147+
<h2>Step 6 – Creating the ROM</h2>
148+
149+
<ul>
150+
<li>Make sure to have a file from the VUE-MASTER path open when you hit compile.</li>
151+
</ul>
152+
153+
<figure>
154+
<img src="img/vbde/VUE-MA-VBDE_light_Img-10_compile.png"/>
155+
</figure>
156+
157+
<ul>
158+
<li>Execute: "Run" > "COMPILE" (or just use the quick button in the top left corner).</li>
159+
<li>Compiling is done when the DOS window closes.</li>
160+
</ul>
161+
162+
163+
<h2>Enjoy your stereo reel!</h2>
164+
165+
<ul>
166+
<li>You will find your VUE-MASTER reel under: <i>...\build\output.vb</i></li>
167+
<li>Test the ROM with an emulator and flash it to your FlashBoy!</li>
168+
</ul>
169+
170+
</div>
171+
172+
</body>
173+
</html>

‎doc/VUE-MASTER Code Tutorial VBDE Pro.html

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
<!doctype html>
2+
3+
<html lang="en">
4+
<head>
5+
<title>VUE-MASTER VBDE Pro Tutorial</title>
6+
<meta charset="utf-8">
7+
8+
<link rel="stylesheet" href="css/style.css">
9+
</head>
10+
<body>
11+
12+
<div class="main-container">
13+
14+
<h1>
15+
VUE-MASTER VBDE Pro Tutorial
16+
<span class="sub-title">How to make a ROM from your PNG files (VBDE Pro)</span>
17+
<span class="author">By STEREO BOY</span>
18+
</h1>
19+
20+
<p>In this tutorial, I'm sharing my experiences with creating the <a href="http://www.planetvb.com/modules/newbb/viewtopic.php?topic_id=7005" target="_blank"><i>VUE-MASTER</i> Demo Reel</a>. I'm a CG graphics artist with nearly zero programming experience.</p>
21+
22+
<p>This tutorial shows how to make a VUE-MASTER reel in 6 easy steps using VBDE Pro. If you're using VBDE Light, please refer to <a href="VUE-MASTER Code Tutorial VBDE Light.html">the respective tutorial</a>.<br>
23+
The tutorial describes the easiest way to use the VUE-MASTER template: by replacing the 7 existing demo images with your own files.</p>
24+
25+
<h2>What you will need:</h2>
26+
<ul>
27+
<li>VUE-prepared PNG files, matching the VB requirements (see the <a href="VUE-MASTER Graphics Tutorial.html">Graphics Tutorial</a>)</li>
28+
<li><a href="http://vbde.planetvb.com/" target="_blank">Download</a> and unpack the latest VBDE*</li>
29+
</ul>
30+
31+
<div class="note">
32+
*VBDE is a portable application, which means you can move it anywhere, but it's recommended to put it here: <i>C:\vbde\</i>
33+
</div>
34+
35+
<h2>Step 1 – Preparing the VBDE project folder</h2>
36+
37+
<figure>
38+
<img src="img/vbde/VUE-MA-VBDE_Img-01_rename.png"/>
39+
</figure>
40+
41+
<ul>
42+
<li>Browse <i>C:\vbde\samples\vuengine\</i> and make a copy of the "vue-master" template folder. Name it after your reel's project title.</li>
43+
</ul>
44+
45+
<figure>
46+
<img src="img/vbde/VUE-MA-VBDE_Img-02_replace-pngs.png"/>
47+
</figure>
48+
49+
<ul>
50+
<li>Replace the existing demo PNGs under: <i>assets\images\VueMasterImages\</i> with your own files.</li>
51+
</ul>
52+
53+
<figure>
54+
<img src="img/vbde/VUE-MA-VBDE_Img-03_delete-c-files.png"/>
55+
</figure>
56+
57+
<ul>
58+
<li>Delete all existing .c files under: <i>assets\images\VueMasterImages\VueMasterImage#\Binary\</i> for every image you've replaced.</li>
59+
</ul>
60+
61+
62+
<h2>Step 2 – Setting up the VBDE Pro project</h2>
63+
64+
<ul>
65+
<li>Launch <i>C:\vbde\VBDE.exe</i></li>
66+
<li>If the Windows firewall gives you any warning like "Unknown Publisher" choose "more" > "run anyway".</li>
67+
</ul>
68+
69+
<figure>
70+
<img src="img/vbde/VUE-MA-VBDE_pro_Img-04_Open-project-path.PNG"/>
71+
</figure>
72+
73+
<ul>
74+
<li>Open the VUE-MASTER template path as a project with VBDE Pro.</li>
75+
</ul>
76+
77+
<figure>
78+
<img src="img/vbde/VUE-MA-VBDE_pro_Img-05_Browse-project.PNG"/>
79+
</figure>
80+
81+
<ul>
82+
<li>You can browse the project files in the left explorer window now.</li>
83+
</ul>
84+
85+
86+
<h2>Step 3 – Converting images to tiles</h2>
87+
88+
<figure>
89+
<img src="img/vbde/VUE-MA-VBDE_pro_Img-06_convert-images.png"/>
90+
</figure>
91+
92+
<ul>
93+
<li>Execute: <i>"Tools" > "External Tools" > "CONVERT images"</i> (or just use the quick button in the top right corner).</li>
94+
<li>New .c files were created in the <i>"Binary"</i> folders.</li>
95+
</ul>
96+
97+
98+
<h2>Step 4 – Transferring tiles count (for every image)</h2>
99+
100+
<figure>
101+
<img src="img/vbde/VUE-MA-VBDE_pro_Img-07_copy-tiles.PNG"/>
102+
</figure>
103+
104+
<ul>
105+
<li>Open: <i>assets\images\VueMasterImages\VueMasterImage1\Binary\VueMasterImage1.c</i> (neither <i>"..Left.c"</i> nor <i>"..Right.c"</i>)
106+
<ul>
107+
<li>If the "tiles" count from the header comment (line 7) is 2033 or less: copy it.</li>
108+
<li>If the tiles count is more than 2033, refer to <a href="VUE-MASTER Graphics Tutorial.html#2">Part 2 of the Graphics Tutorial</a>.</li>
109+
</ul></li>
110+
<li>Open: <i>assets\images\VueMasterImages\VueMasterImage1\Definition\VueMasterImage1Definition.c</i></li>
111+
</ul>
112+
113+
<figure>
114+
<img src="img/vbde/VUE-MA-VBDE_pro_Img-08_paste-tiles.PNG"/>
115+
</figure>
116+
117+
<ul>
118+
<li>Paste/replace the tiles count of image 1 under "CharSetROMDef" (line 49).</li>
119+
<li>Now repeat this procedure (Step 4) for every image, that you have replaced before...</li>
120+
</ul>
121+
122+
<h2>Step 5 – Adding titles to the main menu</h2>
123+
124+
<ul>
125+
<li>Open: <i>assets\languages\Language_EN.c</i></li>
126+
</ul>
127+
128+
<figure>
129+
<img src="img/vbde/VUE-MA-VBDE_pro_Img-09_add-titles.PNG"/>
130+
</figure>
131+
132+
<ul>
133+
<li>Add your reel's title at line 49.</li>
134+
<li>Add your reel's description text or credits at line 51.</li>
135+
<li>Keep your text inside the quotation marks.</li>
136+
<li>You can add line breaks by pasting <i>\n</i>.</li>
137+
</ul>
138+
139+
140+
<h2>Step 6 – Creating the ROM</h2>
141+
142+
<figure>
143+
<img src="img/vbde/VUE-MA-VBDE_pro_Img-10_compile.png"/>
144+
</figure>
145+
146+
<ul>
147+
<li>Execute: "Run" > "External Tools" > "COMPILE" (or just use the quick button in the top right corner).</li>
148+
<li>Compiling is done when this message appears in the console: "Process finished with exit code 0".</li>
149+
</ul>
150+
151+
152+
<h2>Enjoy your stereo reel!</h2>
153+
154+
<ul>
155+
<li>You will find your VUE-MASTER reel under: <i>...\build\output.vb</i></li>
156+
<li>Test the ROM with an emulator and flash it to your FlashBoy!</li>
157+
</ul>
158+
159+
</div>
160+
161+
</body>
162+
</html>

0 commit comments

Comments
 (0)