ArduboyG Tutorial - Revision history

Filmote: /* Creating Grey Scale Graphics */

2024-08-13T11:55:58Z

Creating Grey Scale Graphics

← Older revision		Revision as of 11:55, 13 August 2024
Line 149:		Line 149:

	The <code>convert_srites.py</code> script converts one or more .png files into the correct format for the library. It is quite good at converting the images but occasionally gets confused if the colours are too close together. To prevent any confusion, I typically use a palette using the following RGB values:		The <code>convert_srites.py</code> script converts one or more .png files into the correct format for the library. It is quite good at converting the images but occasionally gets confused if the colours are too close together. To prevent any confusion, I typically use a palette using the following RGB values:
			{\| class="wikitable"
	~~<pre>~~		\|+
	White #FFFFFF ~~or decimal~~ 255, 255, 255		!
	Light Grey #939393 ~~or decimal~~ 147, 147, 147		!Hex (RGB)
	Dark Grey #555555 ~~or decimal~~ 85, 85, 85		!Decimal (RGB)
	Black #000000 ~~or decimal~~ 0, 0, 0		\|-
	~~</pre>~~		\|White
			\|#FFFFFF
			\|255, 255, 255
			\|-
			\|Light Grey
			\|#939393
			\|147, 147, 147
			\|-
			\|Dark Grey
			\|#555555
			\|85, 85, 85
			\|-
			\|Black
			\|#000000
			\|0, 0, 0
			\|}
	Once your graphics are complete, place them within the <code>\fxdata\images</code> directory.		Once your graphics are complete, place them within the <code>\fxdata\images</code> directory.

Filmote: /* Hints and Tricks */

2024-08-06T11:36:04Z

Hints and Tricks

@@ Line 271: / Line 271: @@
 <pre>
 SpritesU::drawOverwriteFX(0, 0, PPOT, (frameToRender * 3) + currentPlane);
 </pre>

Filmote: /* Hints and Tricks */

2024-08-06T11:26:47Z

Hints and Tricks

← Older revision		Revision as of 11:26, 6 August 2024
Line 241:		Line 241:
	=== Using Transparencies ===		=== Using Transparencies ===

	~~===~~ Images can contain a transparent background. ~~THe ===~~		Images can contain a transparent background. The <code>convert_sprites.py</code>script will detect the existence of any transparency and convert the image accordingly.

			Images can be displayed using the following code:

			<pre>
			SpritesU::drawPlusMaskFX(0, 0, imgName, currentPlane);
			</pre>


	=== Using Images with Multiple Frames / Tile Sets ===		=== Using Images with Multiple Frames / Tile Sets ===

Filmote: /* Hints and Tricks */

2024-08-06T11:24:44Z

Hints and Tricks

← Older revision		Revision as of 11:24, 6 August 2024
Line 238:		Line 238:

	== Hints and Tricks ==		== Hints and Tricks ==

			=== Using Transparencies ===

			=== Images can contain a transparent background. THe ===

	=== Using Images with Multiple Frames / Tile Sets ===		=== Using Images with Multiple Frames / Tile Sets ===

Filmote: /* Getting Started */

2024-08-05T10:40:14Z

Getting Started

← Older revision		Revision as of 10:40, 5 August 2024
Line 21:		Line 21:
	A typical Arduboy2 program might look like this:		A typical Arduboy2 program might look like this:

	<~~syntaxhighlight lang="c++" line="1" start="1"~~>		<pre>
	#include <Arduboy2.h>		000 #include <Arduboy2.h>
			010
	Arduboy2 arduboy;		020 Arduboy2 arduboy;
	uint8_t y = 0;		030 uint8_t y = 0;
			040
	void setuo() {		050 void setuo() {
	arduboy.begin();		060 arduboy.begin();
	arduboy.setFrameRate(60);		070 arduboy.setFrameRate(60);
	}		080 }
			090
	void loop() {		100 void loop() {
			110
	if (!(arduboy.nextFrame())) return;		120 if (!(arduboy.nextFrame())) return;
			130
	arduboy.clear();		140 arduboy.clear();
			150
	// Handle movements ..		160 // Handle movements ..
			170
	if (arduboy.pressed(UP_BUTTON) && y > 0) {		180 if (arduboy.pressed(UP_BUTTON) && y > 0) {
	y--;		190 y--;
	}		200 }
			210
	if (arduboy.pressed(DOWN_BUTTON) && y < 56) {		220 if (arduboy.pressed(DOWN_BUTTON) && y < 56) {
	y++;		230 y++;
	}		240 }
			250
	// Render image at y position ..		260 // Render image at y position ..
			270
	Sprites::drawOverwrite(64, y, img, 0);		280 Sprites::drawOverwrite(64, y, img, 0);
			290
	arduboy.display();		300 arduboy.display();
			310
	}		320 }
	</~~syntaxhighlight~~>		</pre>

	Let's pull that sketch apart.		Let's pull that sketch apart.
Line 61:		Line 61:
	At line <code>000</code> we import the standard Arduboy2 library and create an instance of it at line <code>020</code>. Within the <code>setup()</code> function, we initalise the library and set any other parameters - such as setting the frame rate to 60 FPS, at line <code>070</code>. This should all be familiar code so far.		At line <code>000</code> we import the standard Arduboy2 library and create an instance of it at line <code>020</code>. Within the <code>setup()</code> function, we initalise the library and set any other parameters - such as setting the frame rate to 60 FPS, at line <code>070</code>. This should all be familiar code so far.

	In the <code>loop()</code> function, we enforce the frame rate using the standard Arduboy2 approach (line <code>120</code>). If it is time to render the next frame, the screen buffer is ~~clear~~ at line <code>140</code> before updating the game logic, such as handling any user input, before rendering images and other graphics into the screen buffer (line <code>~~260~~</code>). Finally we push the screen buffer to the actual screen at line <code>~~280~~</code> and clear the buffer ready for the next iteration.		In the <code>loop()</code> function, we enforce the frame rate using the standard Arduboy2 approach (line <code>120</code>). If it is time to render the next frame, the screen buffer is cleared at line <code>140</code> before updating the game logic, such as handling any user input, before rendering images and other graphics into the screen buffer (line <code>280</code>). Finally we push the screen buffer to the actual screen at line <code>300</code> and clear the buffer ready for the next iteration.

	The cycle of applying game logic, updating player positions then rendering the screen is a typical pattern for Arduboy2 games.		The cycle of applying game logic, updating player positions then rendering the screen is a typical pattern for Arduboy2 games.
Line 71:		Line 71:
	010 #include "src/SpritesU.hpp"		010 #include "src/SpritesU.hpp"
	020		020
	030 ~~extern~~ ArduboyGBase_Config<ABG_Mode::L4_Triplane> arduboy;		030 ArduboyGBase_Config<ABG_Mode::L4_Triplane> arduboy;
	040 ~~decltype(arduboy) arduboy;~~		040
	050 uint8_t y;		050 uint8_t y;
	060		060

Filmote: /* Getting Started */

2024-08-05T10:07:39Z

Getting Started

← Older revision		Revision as of 10:07, 5 August 2024
Line 21:		Line 21:
	A typical Arduboy2 program might look like this:		A typical Arduboy2 program might look like this:

	<syntaxhighlight lang="c++" line="1" start="0">		<syntaxhighlight lang="c++" line="1" start="1">
	#include <Arduboy2.h>		#include <Arduboy2.h>

Filmote: /* Getting Started */

2024-08-05T10:02:18Z

Getting Started

← Older revision		Revision as of 10:02, 5 August 2024
Line 21:		Line 21:
	A typical Arduboy2 program might look like this:		A typical Arduboy2 program might look like this:

	<syntaxhighlight lang="~~python3~~" line="1" start="0">		<syntaxhighlight lang="c++" line="1" start="0">
	#include <Arduboy2.h>		#include <Arduboy2.h>

Filmote: /* Getting Started */

2024-08-05T10:01:59Z

Getting Started

← Older revision		Revision as of 10:01, 5 August 2024
Line 21:		Line 21:
	A typical Arduboy2 program might look like this:		A typical Arduboy2 program might look like this:

	<syntaxhighlight lang="~~c++~~" line="1" start="0">		<syntaxhighlight lang="python3" line="1" start="0">
	#include <Arduboy2.h>		#include <Arduboy2.h>

Filmote: /* Getting Started */

2024-08-05T10:00:22Z

Getting Started

← Older revision		Revision as of 10:00, 5 August 2024
Line 21:		Line 21:
	A typical Arduboy2 program might look like this:		A typical Arduboy2 program might look like this:

	<syntaxhighlight lang="c++" line="1" start="~~000~~">		<syntaxhighlight lang="c++" line="1" start="0">
	#include <Arduboy2.h>		#include <Arduboy2.h>

Filmote: /* Getting Started */

2024-08-05T09:59:59Z

Getting Started

← Older revision		Revision as of 09:59, 5 August 2024
Line 21:		Line 21:
	A typical Arduboy2 program might look like this:		A typical Arduboy2 program might look like this:

	<syntaxhighlight lang="c++" line="1" start="10">		<syntaxhighlight lang="c++" line="1" start="000">
	#include <Arduboy2.h>		#include <Arduboy2.h>