GBDK Sprite Tutorial - Revision history

Bbbbbr: Change from including .c source files to .h header files

2023-11-12T20:28:57Z

Change from including .c source files to .h header files

Caseyweederman: /* Drawing sprites to the screen */

2016-06-29T00:55:28Z

‎Drawing sprites to the screen

Zubie: /* Drawing sprites to the screen */

2016-06-29T00:27:51Z

‎Drawing sprites to the screen

Caseyweederman: /* Tools */ Adding internal links

2016-06-24T12:49:34Z

‎Tools: Adding internal links

Caseyweederman: /* The right half */ fixing for new template changes

2016-06-24T11:04:49Z

‎The right half: fixing for new template changes

Caseyweederman: /* The right half */ new notes template, note on DMG/GBC for sprites

2016-06-24T10:41:04Z

‎The right half: new notes template, note on DMG/GBC for sprites

Caseyweederman: /* Exercises */ Moving some stuff around, linking to the sweet joypad tutorial

2016-06-15T23:11:26Z

‎Exercises: Moving some stuff around, linking to the sweet joypad tutorial

Caseyweederman: /* Exercises */

2016-06-15T23:06:31Z

‎Exercises

Caseyweederman: Added the images in

2016-06-15T00:06:12Z

Added the images in

Caseyweederman: Another suggestion. I think I'll turn that one into its own tutorial.

2016-06-12T07:03:51Z

Another suggestion. I think I'll turn that one into its own tutorial.

@@ Line 43: / Line 43: @@
 GBTE just translated the pixels into an array with the name you wrote in the Label slot.
-We'll be including the .c file in the code we're about to write.
+We'll be including the .h header file for this sprite data in the code we're about to write.
@@ Line 51: / Line 51: @@
-Fire up your text editor and include the necessary files:
+Fire up your text editor and include the necessary header files:
 <pre>
 #include <gb/gb.h>  //Angle brackets check the compiler's include folders
-#include "smile.c" //double quotes check the folder of the code that's being compiled
+#include "smile.h" //double quotes check the folder of the code that's being compiled
 </pre>
-{{note|In some cases, it may be necessary to include the complete file path (ex. <code>"C:\{file path}\smile.c"</code>) in the <code>#include</code> statement for smile.c}}
+{{note|In some cases, it may be necessary to include the complete file path (ex. <code>"C:\{file path}\smile.c"</code>) in the <code>#include</code> statement for smile.h}}
 Every C script needs a <code>main</code> function, so throw one of those in:
@@ Line 89: / Line 89: @@
 <pre>
 #include <gb/gb.h>
-#include "smile.c"
+#include "smile.h"
 void main(){
@@ Line 99: / Line 99: @@
+}
 </pre>
-Save that to <code>filename.c</code>, and compile it with <code>/path/to/GBDK/bin/lcc -o gamename.gb filename.c</code> from the command line.
+Save that to <code>filename.c</code>, and compile it and the smile.c file with <code>/path/to/GBDK/bin/lcc -o gamename.gb filename.c smile.c</code> from the command line.
 Run BGB and load the gamename.gb rom. Progress!
@@ Line 163: / Line 163: @@
 <pre>
 #include <gb/gb.h>
-#include "smile.c"
+#include "smile.h"
 void main(){
@@ Line 237: / Line 237: @@
 <pre>
 #include <gb/gb.h>
-#include "smile.c"
+#include "smile.h"
-#include "frown.c"
+#include "frown.h"
 void main(){
@@ Line 272: / Line 272: @@
 * While the smiley switches between sprite data 2 (and 3) and 6 (and 7), the frown is cycling between 8 (and 9) and 12 (and 13) on the left side and 10 (and 11) and 14 (and 15) on the right, both sides at once.
-Compile it and check it out in VRAM viewer!
+Compile it and the smile.c and frown.c files with <code>/path/to/GBDK/bin/lcc -o gamename.gb filename.c smile.c frown.c</code> from the command line.
 [[File:07bgbsmilefrown.gif]]

@@ Line 58: / Line 58: @@
 </pre>
-Note: in some cases, it may be necessary to include the complete file path (ex. <code>"C:\{file path}\smile.c"</code>) in the <code>#include</code> statement for smile.c
+{{note|In some cases, it may be necessary to include the complete file path (ex. <code>"C:\{file path}\smile.c"</code>) in the <code>#include</code> statement for smile.c}}
 Every C script needs a <code>main</code> function, so throw one of those in:

@@ Line 57: / Line 57: @@
 #include "smile.c" //double quotes check the folder of the code that's being compiled
 </pre>
 Every C script needs a <code>main</code> function, so throw one of those in:

@@ Line 3: / Line 3: @@
 ==Tools==
-You will need: [[GBDK]], a text editor, [http://www.devrs.com/gb/hmgd/gbtd.html GB Tile Designer], and an emulator ([http://bgb.bircd.org/ BGB] is recommended for its many debug features), and any level of knowledge of C.
+You will need: [[GBDK]], a text editor, [[Game Boy Tile Designer]], and an emulator ([[BGB]] is recommended for its many debug features), and any level of knowledge of C.
 Substitute your preferred tools if you want, but this tutorial is assuming you have those listed above.

← Older revision		Revision as of 11:04, 24 June 2016
Line 126:		Line 126:


−	{{note}} Careful! The DMG and the GBC handle sprite layering differently. The DMG draws whichever sprite has the lowest X value on top, while the GBC draws the sprite with the lowest sprite tile value on top. This will cause inconsistency if you're developing for both.	+	{{note\|Careful! The DMG and the GBC handle sprite layering differently. The DMG draws whichever sprite has the lowest X value on top, while the GBC draws the sprite with the lowest sprite tile value on top. This will cause inconsistency if you're developing for both.}}

	==Step three: Animate==		==Step three: Animate==

← Older revision		Revision as of 10:41, 24 June 2016
Line 125:		Line 125:
	Compile that and run it and check it out in the VRAM viewer.		Compile that and run it and check it out in the VRAM viewer.

		+
		+	{{note}} Careful! The DMG and the GBC handle sprite layering differently. The DMG draws whichever sprite has the lowest X value on top, while the GBC draws the sprite with the lowest sprite tile value on top. This will cause inconsistency if you're developing for both.

	==Step three: Animate==		==Step three: Animate==

@@ Line 277: / Line 277: @@
 ==Exercises==
 Try some of these modifications out:
 * Move the faces around by calling <code>move_sprite()</code> in the <code>while</code> loop
 * Come up with a way to track where sprites are stored, and refer to them by <code>offset + frame number</code>
 * Switch to <code>SPRITES_8x8</code> and animate each quadrant separately, and optimize the sprite data
-* Combine this with <code>[[GBDK Joypad Tutorial|joypad()]]</code> and wire the expressions to button inputs instead of a set timer
+* Add [[GBDK Layers Tutorial|backgrounds]] and experiment with sprites overlapping them (and fill in the faces so they're not transparent)
-* Add [[GBDK Background Tutorial|backgrounds]] and experiment with sprites overlapping them (and fill in the faces so they're not transparent)
 * Do it in color! Play it loud!
 * While in color, overlap two sprites for a total of eight colors.
 * Add sounds
 * Write your own tutorial and post it to the wiki

@@ Line 10: / Line 10: @@
 * Run GBTD. Click View, Tile Size, 16x16.
-<!-- [[File:01gbtd16x16.png]] -->
+[[File:01gbtd16x16.png]]
 * Draw an image, copy and paste it into the second tile slot, and change that to make a two-frame animation. We'll be switching back and forth between these.
-<!-- 02gbtdtwotiles.png -->
+[[File:02gbtdtwotiles.png]]
 * Click File, Export To, change Type toGBDK C file (*.c) and To to 1. I've also changed Filename and Label to "smile". Hit OK.
-<!-- 03gbtdexport.png -->
+[[File:03gbtdexport.png]]
 ** This creates a .c and a .h file. The .c file should look something like this:
 <pre>
@@ Line 99: / Line 99: @@
 Run BGB and load the gamename.gb rom. Progress!
-<!-- 04BGBhalfsmile.png -->
 There's only half a face!
@@ Line 108: / Line 109: @@
 In BGB, with the rom you've written loaded and running, right-click, mouseover <code>Other</code>, click <code>VRAM viewer</code>.
-<!-- 05bgbvramviewer.png -->
+[[File:05bgbvramviewer.png]]
 Here you can see the sprites we set with set_sprite_data arranged in 8x8 tiles. The two on the far left, 0 and 1, are lit up to indicate that they're in use. What we want is to set a second tile, fill it with the right half of the face, and line that up with the left half.
@@ Line 179: / Line 180: @@
 Compile that and run it. It works!
-<!-- 06bgbwink.gif -->
+[[File:06bgbwink.gif]]
 Check it out in the VRAM viewer to watch the tiles switch in real time.
@@ Line 268: / Line 269: @@
 Compile it and check it out in VRAM viewer!
-<!-- 07bgbsmilefrown.gif -->
+[[File:07bgbsmilefrown.gif]]