Scribd
Upload
11 views5 pages

Message

The document is a userscript for the game Sploop.io that enhances visuals by adding hitbox markers and adjustable transparency for various objects. It includes a user interface with controls for toggling hitboxes and adjusting the opacity of farms, traps, and hats. The script modifies the canvas rendering to apply these visual enhancements and manage user interactions.

Uploaded by

liamoleary0909
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
11 views5 pages

Message

The document is a userscript for the game Sploop.io that enhances visuals by adding hitbox markers and adjustable transparency for various objects. It includes a user interface with controls for toggling hitboxes and adjusting the opacity of farms, traps, and hats. The script modifies the canvas rendering to apply these visual enhancements and manage user interactions.

Uploaded by

liamoleary0909
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

// ==UserScript==

// @name Sploop.io Enhanced Visuals


// @version 1.7
// @description Hitbox markers + adjustable transparency for objects (Improved UI)
// @namespace EHD
// @match *://sploop.io/
// @grant none
// ==/UserScript==

// ===== Configuration =====


let hitboxesVisible = true;
let controlsVisible = true;

// Transparency settings
let FARM_OPACITY = 0.4;
let TS_OPACITY = 1;
let HAT_OPACITY = 1;

// Hitbox settings
const item_radius = {
// Placed objects
trap: 40,
spike: 45,
hard_spike: 45,
big_spike: 42,
boost: 40,
wall: 45,
wood_farm: 80,
wood_farm_cherry: 80,
stone_farm: 60,
bush: 50,

// Held items
trap_item: 40,
spike_item: 45,
hard_spike_item: 45,
big_spike_item: 42,
boost_item: 40,
wall_item: 45,
wood_farm_item: 80,
wood_farm_cherry_item: 80,
stone_farm_item: 60,
berry_farm: 50
};

const hitboxColor = '#50C878';

// ===== UI Elements =====


// Create main controls container
const controlsContainer = document.createElement('div');
controlsContainer.style.position = 'fixed';
controlsContainer.style.top = '10px';
controlsContainer.style.left = '10px';
controlsContainer.style.zIndex = '9999';
controlsContainer.style.backgroundColor = 'rgba(0, 0, 0, 0.85)';
controlsContainer.style.padding = '12px 15px';
controlsContainer.style.borderRadius = '8px';
controlsContainer.style.color = 'white';
controlsContainer.style.fontFamily = 'Arial, sans-serif';
controlsContainer.style.transition = 'opacity 0.3s ease';
controlsContainer.style.boxShadow = '0 2px 10px rgba(0,0,0,0.3)';
controlsContainer.style.width = '220px';

// Header
const header = document.createElement('div');
header.innerHTML = 'Sploop.io Visual Tools';
header.style.fontWeight = 'bold';
header.style.fontSize = '14px';
header.style.marginBottom = '12px';
header.style.borderBottom = '1px solid rgba(255,255,255,0.2)';
header.style.paddingBottom = '8px';

// Hitbox toggle button


const hitboxToggle = document.createElement('button');
hitboxToggle.innerHTML = 'Hitboxes: ON';
hitboxToggle.style.cursor = 'pointer';
hitboxToggle.style.backgroundColor = '#50C878';
hitboxToggle.style.border = 'none';
hitboxToggle.style.padding = '8px 12px';
hitboxToggle.style.borderRadius = '6px';
hitboxToggle.style.color = 'white';
hitboxToggle.style.marginBottom = '15px';
hitboxToggle.style.width = '100%';
hitboxToggle.style.fontWeight = 'bold';
hitboxToggle.style.transition = 'all 0.2s ease';

// Transparency controls header


const transparencyHeader = document.createElement('div');
transparencyHeader.innerHTML = 'Transparency Settings:';
transparencyHeader.style.marginBottom = '10px';
transparencyHeader.style.fontWeight = 'bold';
transparencyHeader.style.fontSize = '13px';
transparencyHeader.style.opacity = '0.9';

// Function to create slider


function createSlider(labelText, value, id) {
const container = document.createElement('div');
container.style.marginBottom = '12px';

const label = document.createElement('div');


label.innerHTML = labelText;
label.style.marginBottom = '5px';
label.style.fontSize = '12px';
label.style.display = 'flex';
label.style.justifyContent = 'space-between';

const valueDisplay = document.createElement('span');


valueDisplay.innerHTML = value;
valueDisplay.style.fontWeight = 'bold';
valueDisplay.id = id + '-value';

label.appendChild(valueDisplay);

const slider = document.createElement('input');


slider.type = 'range';
slider.min = '0';
slider.max = '1';
slider.step = '0.01';
slider.value = value;
slider.style.width = '100%';
slider.style.height = '6px';
slider.style.borderRadius = '3px';
slider.style.background = 'rgba(255,255,255,0.2)';
slider.style.outline = 'none';
slider.style.webkitAppearance = 'none';
slider.id = id;

// Custom slider styling


slider.style.background = `linear-gradient(to right, #50C878 0%, #50C878 $
{value * 100}%, rgba(255,255,255,0.2) ${value * 100}%, rgba(255,255,255,0.2)
100%)`;

slider.addEventListener('input', (e) => {


valueDisplay.innerHTML = parseFloat(e.target.value).toFixed(2);
slider.style.background = `linear-gradient(to right, #50C878 0%, #50C878 $
{e.target.value * 100}%, rgba(255,255,255,0.2) ${e.target.value * 100}%,
rgba(255,255,255,0.2) 100%)`;
});

container.appendChild(label);
container.appendChild(slider);

return { container, slider };


}

// Create sliders
const farmSlider = createSlider('Farms/Bushes:', FARM_OPACITY, 'farm-opacity');
const tsSlider = createSlider('Spikes/Traps:', TS_OPACITY, 'ts-opacity');
const hatSlider = createSlider('Hats:', HAT_OPACITY, 'hat-opacity');

// Assemble UI
controlsContainer.appendChild(header);
controlsContainer.appendChild(hitboxToggle);
controlsContainer.appendChild(transparencyHeader);
controlsContainer.appendChild(farmSlider.container);
controlsContainer.appendChild(tsSlider.container);
controlsContainer.appendChild(hatSlider.container);
document.body.appendChild(controlsContainer);

// ===== Functions =====


function toggleHitboxes() {
hitboxesVisible = !hitboxesVisible;
hitboxToggle.innerHTML = `Hitboxes: ${hitboxesVisible ? 'ON' : 'OFF'}`;
hitboxToggle.style.backgroundColor = hitboxesVisible ? '#50C878' : '#FF4444';
}

function toggleControlsVisibility() {
controlsVisible = !controlsVisible;
controlsContainer.style.opacity = controlsVisible ? '1' : '0';
controlsContainer.style.pointerEvents = controlsVisible ? 'all' : 'none';
}

// ===== Event Listeners =====


hitboxToggle.addEventListener('click', toggleHitboxes);
document.addEventListener('keydown', (e) => {
if (e.key.toLowerCase() === '`') {
toggleControlsVisibility();
}
});

// Update opacities when sliders change


farmSlider.slider.addEventListener('input', (e) => {
FARM_OPACITY = parseFloat(e.target.value);
});

tsSlider.slider.addEventListener('input', (e) => {


TS_OPACITY = parseFloat(e.target.value);
});

hatSlider.slider.addEventListener('input', (e) => {


HAT_OPACITY = parseFloat(e.target.value);
});

// ===== Modified drawImage =====


const originalDrawImage = CanvasRenderingContext2D.prototype.drawImage;
CanvasRenderingContext2D.prototype.drawImage = function(image, x, y, width, height)
{
let isFarm = false;
let isTS = false;
let isHat = false;

// First handle transparency


try {
if (image.src) {
const path = new URL(image.src).pathname;
isFarm = path.includes('wood_farm') ||
path.includes('stone_farm') ||
path.includes('bush') ||
path.includes('berry_farm');

isTS = path.includes('spike') ||
path.includes('trap') ||
path.includes('turret') ||
path.includes('bullet');

isHat = path.includes('hat');
}
} catch(e) {}

if (isFarm || isTS || isHat) {


this.save();
if (isFarm) this.globalAlpha = FARM_OPACITY;
if (isTS) this.globalAlpha = TS_OPACITY;
if (isHat) this.globalAlpha = HAT_OPACITY;

originalDrawImage.call(this, image, x, y, width, height);


this.restore();
} else {
originalDrawImage.apply(this, arguments);
}

// Then handle hitboxes if enabled


if (!hitboxesVisible) return;

if (image.src) {
try {
const path = new URL(image.src).pathname;
const isHeldItem = path.includes('/item/');
const object = path.split('/').pop().split('.')[0];
const radius = item_radius[object];

if (radius) {
this.save();
this.beginPath();
this.strokeStyle = hitboxColor;
this.globalAlpha = isHeldItem ? 0.4 : 0.6;
this.lineWidth = 2;

const centerX = x + (width/2);


const centerY = y + (height/2);
this.arc(centerX, centerY, radius, 0, Math.PI * 2);
this.stroke();
this.restore();
}
} catch(e) {
console.error('Error processing image:', e);
}
}
};

You might also like