Branding Logo HTML5 branding implementation

The branding logo should be implemented on menu pages, pause pages and other non-game-play pages. We do not want a branding logo to appear when the user is actually playing the game. When using the first method below the API allows you to show and hide the logo whenever you command it to.

For logo implementation we offer two methods: a Basic logo layer and an Advanced integration. For both methods you can set a custom configuration when initializing the Admeen object. More information about the configuration object can be found at the bottom of this page.


1. Basic

The logo will be added as div-layer on top of your (canvas) game inside the <body> tag. The type of logo that will be used depend on the user's browser capabilities. The prioriy is as follows: SVG > WEBP > PNG.

When rotating the orientation or resizing the screen the Admeen API will redraw the branding logo to make sure it is positioned according to your configuration. The size of the logo can be set per device type (tablet/smartphone, portrait/landscape).

A simple call to showLogo will show the logo, and hiding the logo can be done with hideLogo.

// Call the showLogo functionality to show the branding logo
admeen("showLogo");
// Call the hideLogo functionality to hide the branding logo
admeen("hideLogo");

2. Advanced

This method gives more freedom for developers, but needs advanced javascript skills. Using the getLogo function will return an object containing the data of the logo. For retina displays an image will be served which is two times the size of the config width, so please make sure to fix the logo size for retina devices.

var brandingLogo = admeen("getLogo");

The following data will be returned by this function:

  Type Description
enabled boolean When enabled is returning false the logo should not appear inside the game. We use this option to hide the logo on our whitelisted domains.
url string Full url of the image. The image type (WEBP > PNG) depends on the browser capabilities and the logo size depends on your configuration.
action function Callback that should be used as click event listener. Assuming that you store the object data in a variable named brandingLogo you can use the following example (don't worry about double event firing, we took care of that):
logo.addEventListener("click", brandingLogo.action);
logo.addEventListener("touchend", brandingLogo.action);

Configuration

The options below give you extra configuration possibilities. The logo configuration must be set in the Admeen object initialization, as part of the configuration object.

var admeenData = {
	name: "Great HTML5 game", //Name of the game
	config: {
		logo: {
			...
		}
	}
};
admeen("init", admeenData);

Defaults

The default positions are displayed below. All the positions, offsets and widths are overwritable.

logo: {
	other: { // desktop
		align: {
			x: "right", y: "top"
		},
		offset: {
			x: 3, y: 3
		},
		width: 100
	},
	smartphone: {
		portrait: {
			align: {
				x: "right", y: "top"
			},
			offset: {
				x: 3, y: 3
			},
			width: 60
		},
		landscape: {
			align: {
				x: "right", y: "top"
			},
			offset: {
				x: 3, y: 3
			},
			width: 60
		}
	},
	tablet: {
		portrait: {
			align: {
				x: "right", y: "top"
			},
			offset: {
				x: 3, y: 3
			},
			width: 80
		},
		landscape: {
			align: {
				x: "right", y: "top"
			},
			offset: {
				x: 3, y: 3
			},
			width: 80
		}
	}
}

Overwrite 'all'

In the example below we set the image width to 100 with center positions without offset. For portrait smartphones we want a smaller image width. The "all" device type can be used to reset all device types and orientations at once. For retina devices the logo will still be 2x the given size!

logo: {
	all: {
		align: {
			x: "center", y: "center"
		},
		offset: {
			x: 0, y: 0
		},
		width: 100
	},
	smartphone: {
		portrait: {
			width: 60
		}
	}
}

Full example case

In this (basic) example we want the logo to be shown in the center bottom with 10 pixels offset and a width of 120 pixels for all devices, except for portrait smartphones and tablets. For smartphones and tablets in portrait orientation we want to align the image in the right top corner.

<script src="https://media.admeen.com/branding/api.js"></script>
var admeenData = {
	name: "Great HTML5 game", // Give your game an unique name
	config: {
		logo: {
			all: { // resets all device types
				align: {
					x: "center", y: "bottom"
				},
				offset: {
					x: 0, y: 10
				},
				width: 120
			},
			smartphone: {
				portrait: {
					align: {
						x: "right", y: "top"
					},
					offset: {
						x: 10, y: 10
					},
					width: 60
				},
				landscape: {
					width: 60
				}
			},
			tablet: {
				portrait: {
					align: {
						x: "right", y: "top"
					},
					offset: {
						x: 10, y: 10
					},
					width: 80
				},
				landscape: {
					width: 80
				}
			}
		}
	}
};
admeen("init", admeenData);

// Show the logo
admeen("showLogo");