Skip to content

Collage Builder Example

Grisgram edited this page Jul 13, 2025 · 5 revisions

This code block shows building of a collage with a full definition of a multi-sprite sprite sheet.

It's as easy as that, no tech crunch, just add your content:

COLLAGE
.for_collage(sheet.name).create()
	.add_spritesheet(sheet.name, sheet.spriteFile) 
		.set_start_position(sheet.sheet_start_x, sheet.sheet_start_y)
		.set_frame_size(sheet.frame_width, sheet.frame_height)
		.set_origins(0, 0)
		.set_line_mode_rectangle()
		.set_alignment(sheet.horizontal_alignment)
		.set_remove_back(false)
		.set_smooth(false)
		.set_is3D(false)
		.add_sprite(sheet.sprites[0].name, sheet.sprites[0].frames, sheet.sprites[0].sfps)
		.add_sprite(sheet.sprites[1].name, sheet.sprites[1].frames, sheet.sprites[1].sfps)
		.add_sprite(sheet.sprites[2].name, sheet.sprites[2].frames, sheet.sprites[2].sfps)
		.add_sprite(sheet.sprites[3].name, sheet.sprites[3].frames, sheet.sprites[3].sfps)
		.add_sprite(sheet.sprites[4].name, sheet.sprites[4].frames, sheet.sprites[4].sfps)
		.add_sprite(sheet.sprites[5].name, sheet.sprites[5].frames, sheet.sprites[5].sfps)
		.add_sprite(sheet.sprites[6].name, sheet.sprites[6].frames, sheet.sprites[6].sfps)
	.build()
	.add_sprite("single_bat", sprTestBat)
	.add_file("file_bat", "collagetests/bat_right.png")
	.add_sprite("single_bat2", sprTestBat)
	.add_file_strip("strip", "collagetests/bat_right_strip4.png", 4, 8)
	.add_surface("surf1", application_surface)
	.add_surface_part("surf2", application_surface, 950, 200, 64, 64)
	.add_surface_strip("surf3", surfstriptest, 4, 8)
	.add_file("url", "https://www.coldrock.games/assets/coldrock-games-trans-shadow.png")
.build();

If you look close at the code above, you will see, that we even can add the application_surface to the collage, thus taking a screenshot to the texture page.

To be able to create a collage as beautiful as the above code, a little preparation is necessary. You see lots of access to a sheet struct above. Such a definition struct normally comes from a data file (json), from RichJson or any data source.

However, for the test scenario above, we created this definition struct and a canvas surface in code. It looks like this:

var sheet = {
	spriteFile		: "collagetests/bats_over_multiple_rows_with_padding.png",
	horizontal_alignment	: true,
	name			: "demo",
	frame_width		: 32,
	frame_height		: 32,
	sheet_start_x		: 10,
	sheet_start_y		: 15,
	sprites: [
		{ name: "spr_bat_dead_down" ,	frames: 1, sfps: 0},
		{ name: "spr_bat_fly_down"  ,	frames: 4, sfps: 4},
		{ name: "spr_bat_fly_right" ,	frames: 5, sfps: 8},
		{ name: "spr_bat_dead_right",	frames: 1, sfps: 0},
		{ name: "spr_bat_dead_up"   ,	frames: 1, sfps: 0},
		{ name: "spr_bat_dead_left" ,	frames: 1, sfps: 0},
		{ name: "spr_bat_fly_left"  ,	frames: 3, sfps: 4},
	],
};	

var surfstriptest = sprite_to_canvas(sprTestBat).canvas.GetSurfaceID();

Getting started

Raptor Tools (Work in Progress)

Raptor Free Modules

Image Raptor Pro Modules

Image Raptor Pro Libraries

Clone this wiki locally