Database Search
Browse 1,393 Games , 57,550 Screens and 2,050 Videos
The Ultimate reference tool for game designers.
RECENTLY ADDED
_Logo_10022022-014942.jpg){kind=logo}
LATEST NEWS
Welcome to your new Game UI Database!
Check out the changelog for a list of all the new features!
Something Cultish This Way Comes...
As part of a huge collaboration between Game UI Database and Lost in Cult, something big is coming very soon. Watch this space!
Filters
GAME FILTERS
Platform
Genre
Theme
Aesthetic
Camera
SCREEN FILTERS
Elements
UI Style
Patterns & Shapes
Materials & Textures
Colour
VIDEO FILTERS
Screen Transitions
Looping Animations
Screen Patterns
All content present on this website is explicitly prohibited from being employed in any manner pertaining to AI asset generation, machine learning or cryptocurrency initiatives.
All content present on this website is explicitly prohibited from being employed in any manner pertaining to machine learning or cryptocurrency initiatives.
');
enableInspector();
} else {
$('#guidbGallery_toggle').removeClass('enabled');
$('.guidbGallery_inspector').removeClass('enabled');
$("#overlay_container_inner").removeClass("inspector");
setTimeout(function() {
$('.overlay_left').css('display', 'flex');
$('.overlay_right').css('display', 'flex');
}, 300);
$('#guidbGallery_toggle').html('
');
disableInspector();
}
});
function enableInspector() {
$('.overlay_caption').addClass('inspector');
$('.overlay_top-bar').addClass('inspector');
$('.guidbGallery_mediaall').addClass('inspector');
$(".overlay_media").css('display', 'block');
$(".guidbGallery_overlay").animate({
opacity: '1'
}, {
duration: 500
});
$(".guidbGallery_mediaall").animate({
width: '70%'
}, {
duration: 300,
easing: "easeOutCirc"
});
$(".overlay_right").animate({
opacity: '0'
}, {
duration: 300,
easing: "easeOutCirc"
}, {
complete: function() {
$(".overlay_right").css('display', 'none');
}
});
$(".overlay_left").animate({
opacity: '0'
}, {
duration: 300,
easing: "easeOutCirc"
}, {
complete: function() {
$(".overlay_left").css('display', 'none');
}
});
$(".guidbGallery_inspector").html("");
if (imageGallery[thisGalleryID][currentImageIndex].video == true) {
$('video').prop('muted', false);
var src = $('video source').attr('src');
var iframedata = '';
$('.overlay_main div').html(iframedata);
$('.overlay_main > div').css('width', '');
$('.overlay_main').css('width', '');
} else {
$('div[id="ocr"]').remove();
$('.overlay_main').append("");
$('#ocr').load("galleryscript/inspector_OCR.php?id=" + imageGallery[thisGalleryID][currentImageIndex].imageID + "&w=" + imageGallery[thisGalleryID][currentImageIndex].width + "&h=" + imageGallery[thisGalleryID][currentImageIndex].height, function() {
if ($(window).width() > 767) {
$('[data-bs-toggle="tooltip"]').tooltip();
}
});
$('.overlay_main').css('width', 'max-content');
}
$.get("galleryscript/inspector.php?id=" + imageGallery[thisGalleryID][currentImageIndex].imageID, function(data) {
$(".guidbGallery_inspector").append(data);
updateColourHighlights();
});
$('.filmreel').removeClass('enabled');
$('.overlay_top-bar').css('top', '0px');
$('.overlay_caption').css('bottom', '0px');
if (window.location.href.indexOf('inspector=') == -1) {
var newURL = window.location.href;
if (window.location.href.indexOf('?') == -1) {
newURL += '?inspector=1';
} else {
newURL += '&inspector=1';
}
window.history.pushState({ path: newURL }, '', newURL);
}
}
function disableInspector() {
$('.overlay_caption').removeClass('inspector');
$('.overlay_top-bar').removeClass('inspector');
$('.guidbGallery_mediaall').removeClass('inspector');
$(".overlay_media").css('display', 'flex');
$(".overlay_left").css('display', 'flex');
$(".overlay_right").css('display', 'flex');
$('.overlay_main').css('width', '');
$(".guidbGallery_overlay").animate({
opacity: '0.95'
}, {
duration: 500
});
$(".guidbGallery_mediaall").animate({
width: '100%'
}, {
duration: 400,
easing: "easeOutCirc"
});
$(".overlay_right").animate({
opacity: '1'
}, {
duration: 100,
easing: "easeOutCirc"
});
$(".overlay_left").animate({
opacity: '1'
}, {
duration: 100,
easing: "easeOutCirc"
});
updateGallery();
if (window.location.href.indexOf('inspector=') != -1) {
var newURL = window.location.href.replace(/&?inspector=1/, '');
window.history.pushState({ path: newURL }, '', newURL);
}
}
function hideAllSubmenus() {
$(".visualizermenu").hide();
$(".gridmenu").hide();
}
$("#guidbGallery_visualizer").click(function() {
hideAllSubmenus();
$(".visualizermenu").toggle();
});
$("#guidbGallery_grid").click(function() {
hideAllSubmenus();
$(".gridmenu").toggle();
});
$(document).mouseup(function(e) {
var container = $(".hexSubmenu");
if (!container.is(e.target) && container.has(e.target).length === 0) {
container.hide();
}
});
var gridEnabled = 0;
$(".gridPlus").click(function() {
$(this).parent().find('input').val(parseInt($(this).parent().find('input').val()) + 1);
if ($(this).parent().find('input').val() < 1) {
$(this).parent().find('input').val(1);
}
updateGrid();
});
$(".gridMinus").click(function() {
$(this).parent().find('input').val(parseInt($(this).parent().find('input').val()) - 1);
if ($(this).parent().find('input').val() < 1) {
$(this).parent().find('input').val(1);
}
updateGrid();
});
$(".gridInput").change(function() {
updateGrid();
if ($(this).val() < 1) {
$(this).val(1);
}
});
function updateGrid() {
$('.grid .vertical').html('');
$('.grid .horizontal').html('');
var rows = parseInt($('#grid_horizontalCells').val());
var cols = parseInt($('#grid_verticalCells').val());
var totalGrid = rows * cols;
$('.gridcss').css('grid-template-columns', 'repeat(' + cols + ', 1fr)');
$('.gridcss').css('grid-template-rows', 'repeat(' + rows + ', 1fr)');
$('.gridcss').css('grid-column-gap', $('#grid_verticalGap').val() + 'px');
$('.gridcss').css('grid-row-gap', $('#grid_horizontalGap').val() + 'px');
$('.gridcss').html('');
for (i = 0; i < totalGrid; i++) {
var gridClasses = "";
if (i < (cols)) {
gridClasses += " toprow";
}
if (i > (totalGrid - cols - 1)) {
gridClasses += " bottomrow";
}
if (i % cols == 0) {
gridClasses += " leftcol";
}
if (i % cols == (cols - 1)) {
gridClasses += " rightcol";
}
$('.gridcss').append('');
}
if (totalGrid < 2) {
$('#gridOptions').hide();
gridEnabled = 0;
} else {
$('#gridOptions').show();
gridEnabled = 1;
}
if (inspectorView == 0 && (gridEnabled == 1)) {
$('.overlay_main > div').css('width', 'fit-content');
} else {
$('.overlay_main > div').css('width', '');
}
}
$('#resetGrid').click(function() {
$('#grid_verticalCells').val(1);
$('#grid_horizontalCells').val(1);
$('#gridOptions').hide();
updateGrid();
});
function convertGridToSVG(width, height) {
var ns = 'http://www.w3.org/2000/svg';
var svg = document.createElementNS(ns, 'svg');
svg.setAttributeNS(null, 'width', width);
svg.setAttributeNS(null, 'height', height);
let $grid = $('.gridcss');
let columns = $grid.css('grid-template-columns').split(' ').length;
let rows = $grid.css('grid-template-rows').split(' ').length;
for (let i = 1; i < rows; i++) {
let line = document.createElementNS(ns, 'line');
line.setAttributeNS(null, 'x1', '0%');
line.setAttributeNS(null, 'y1', (i * (100 / rows)) + '%');
line.setAttributeNS(null, 'x2', '100%');
line.setAttributeNS(null, 'y2', (i * (100 / rows)) + '%');
line.setAttributeNS(null, 'stroke', 'white');
svg.appendChild(line);
}
for (let i = 1; i < columns; i++) {
let line = document.createElementNS(ns, 'line');
line.setAttributeNS(null, 'x1', (i * (100 / columns)) + '%');
line.setAttributeNS(null, 'y1', '0%');
line.setAttributeNS(null, 'x2', (i * (100 / columns)) + '%');
line.setAttributeNS(null, 'y2', '100%');
line.setAttributeNS(null, 'stroke', 'white');
svg.appendChild(line);
}
var serializer = new XMLSerializer();
var svgString = serializer.serializeToString(svg);
var textarea = document.createElement('textarea');
document.body.appendChild(textarea);
textarea.value = svgString;
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
}
$('#exportGrid').click(function() {
convertGridToSVG(imageGallery[thisGalleryID][currentImageIndex].width, imageGallery[thisGalleryID][currentImageIndex].height);
});
$("input[name='gallery_visualizer']").on('change', function() {
removeAllFilters();
let filterType = $(this).val();
switch(filterType) {
case 'default':
removeAllFilters()
break;
case 'greyscale':
$('.guidbGallery_mediaall').addClass('filter_greyscale');
break;
case 'inversionFilter':
$('.guidbGallery_mediaall').addClass('filter_invert');
break;
case 'protanopiaFilter':
$('.guidbGallery_mediaall').addClass('filter_protanopia');
break;
case 'deutranopiaFilter':
$('.guidbGallery_mediaall').addClass('filter_deutranopia');
break;
case 'tritanopiaFilter':
$('.guidbGallery_mediaall').addClass('filter_tritanopia');
break;
case 'scanlineFilter':
$('.guidbGallery_mediaall').addClass('scanlines');
break;
case 'audienceFilter':
$('.visAudience').show();
break;
}
});
function removeAllFilters() {
$('.guidbGallery_mediaall').removeClass('filter_greyscale');
$('.guidbGallery_mediaall').removeClass('filter_invert');
$('.guidbGallery_mediaall').removeClass('filter_protanopia');
$('.guidbGallery_mediaall').removeClass('filter_deutranopia');
$('.guidbGallery_mediaall').removeClass('filter_tritanopia');
$('.guidbGallery_mediaall').removeClass('scanlines');
$('.visAudience').hide();
}
$('#guidbGallery_clipboard').click(async function() {
const $img = $('.overlay_main .image_final');
const img = $img.get(0);
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const imgElement = new Image();
imgElement.crossOrigin = 'Anonymous';
imgElement.src = img.src;
imgElement.onload = async function() {
canvas.width = imgElement.width;
canvas.height = imgElement.height;
ctx.drawImage(imgElement, 0, 0);
canvas.toBlob(async function(blob) {
try {
const data = [new ClipboardItem({ 'image/png': blob })];
await navigator.clipboard.write(data);
} catch (err) {
console.error('Failed to copy image: ', err);
}
}, 'image/png');
};
imgElement.onerror = function() {
console.error('Failed to load the image for copying.');
};
});
$('#guidbGallery_videoclipboard').click(async function() {
let video;
if (inspectorView == 1) {
const iframe = document.getElementById('inspectorImage');
const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
video = iframeDocument.querySelector('video');
} else {
const $video = $('.overlay_main video');
video = $video.get(0);
}
if (video) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
canvas.toBlob(async function(blob) {
try {
const data = [new ClipboardItem({ 'image/png': blob })];
await navigator.clipboard.write(data);
} catch (err) {
console.error('Failed to copy video frame: ', err);
}
}, 'image/png');
} else {
console.error('Video element not found.');
}
});
function playVideo() {
$('video').prop('muted', true);
$('video').get(0).play();
}
window.addEventListener("orientationchange", function() {
window.scrollTo(0, 0);
if ((window.orientation === 90) || (window.orientation === -90)) {
$('#test').html('Landscape');
} else {
$('#test').html('Portrait');
}
}, false);
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
function playPopcornSound(maxY) {
if ($("input[name='gallery_visualizer']:checked").val() != 'audienceFilter') {
return;
}
fetch('img/throw.wav')
.then(response => response.arrayBuffer())
.then(arrayBuffer => audioCtx.decodeAudioData(arrayBuffer))
.then(audioBuffer => {
var source = audioCtx.createBufferSource();
source.buffer = audioBuffer;
var playbackRate = 0 + (maxY / 1000) * 2;
source.playbackRate.value = playbackRate;
source.connect(audioCtx.destination);
source.start(0);
})
.catch(e => console.error(e));
}
$(document).keydown(function(e) {
if ($("input[name='gallery_visualizer']:checked").val() != 'audienceFilter') {
return;
}
if (e.key === "u" || e.key === "U") {
var startX = Math.random() * $(window).width();
var randX = (startX < ($(window).width() / 3)) ? -200 : 200;
var endX = startX + (Math.random() * 200 - randX);
var controlX = (startX + endX) / 2;
var maxY = ($(window).height() / 2) + (Math.random() * 700 - 50);
var startRotation = Math.random() * 360;
playPopcornSound(maxY);
var img = $("