🚀 Sticker Menu Drawaria
🎯 What does this script do? / ¿Qué hace este script?
English: This script introduces a sticker menu to Drawaria, allowing users to select and apply stickers directly to the game canvas. It provides a fixed-size menu containing various sticker images, which can be toggled open or closed via a button. When a sticker is clicked, it is drawn onto the Drawaria canvas, replacing the current drawing. The script also resizes the game canvas to a fixed resolution for consistent sticker display.
Español: Este script introduce un menú de stickers en Drawaria, permitiendo a los usuarios seleccionar y aplicar stickers directamente en el lienzo del juego. Proporciona un menú de tamaño fijo que contiene varias imágenes de stickers, las cuales se pueden abrir o cerrar mediante un botón. Al hacer clic en un sticker, este se dibuja en el lienzo de Drawaria, reemplazando el dibujo actual. El script también redimensiona el lienzo del juego a una resolución fija para una visualización consistente de los stickers.
✨ Features / Características
Sticker Integration & Canvas Drawing
- 🔧 Sticker Menu - A fixed-size panel containing a selection of stickers.
- ⚡ Toggable Menu - A button allows users to show or hide the sticker menu.
- 🎨 Direct Canvas Drawing - Clicking a sticker draws it onto the Drawaria canvas.
- 🚀 Fixed Canvas Size - Resizes the game canvas to 780x650 pixels.
- 💡 User-Friendly Interface - Simple and intuitive controls for applying stickers.
- 🔒 Predefined Sticker List - Utilizes a hardcoded array of sticker image URLs.
Español:
- 🔧 Menú de Stickers - Un panel de tamaño fijo que contiene una selección de stickers.
- ⚡ Menú Plegable - Un botón permite a los usuarios mostrar u ocultar el menú de stickers.
- 🎨 Dibujo Directo en el Lienzo - Al hacer clic en un sticker, este se dibuja en el lienzo de Drawaria.
- 🚀 Tamaño Fijo del Lienzo - Redimensiona el lienzo del juego a 780x650 píxeles.
- 💡 Interfaz Fácil de Usar - Controles simples e intuitivos para aplicar stickers.
- 🔒 Lista Predefinida de Stickers - Utiliza un array codificado de URLs de imágenes de stickers.
📥 Installation / Instalación
| 🇺🇸 English Instructions | 🇪🇸 Instrucciones en Español |
- Install the Tampermonkey extension (or a similar userscript manager) in your browser.
- Create a new userscript and paste the provided code into the editor.
- Save the script.
- Navigate to the Drawaria website (
https://drawaria.online/). - The sticker menu and toggle button will appear on the screen. The canvas will resize automatically.
| - Instala la extensión Tampermonkey (o un gestor de userscripts similar) en tu navegador.
- Crea un nuevo userscript y pega el código proporcionado en el editor.
- Guarda el script.
- Navega al sitio web de Drawaria (
https://drawaria.online/). - El menú de stickers y el botón de alternancia aparecerán en la pantalla. El lienzo se redimensionará automáticamente.
|
🎮 How to Use / Cómo Usar
- 🔵 Step 1: The sticker menu and canvas resizing are applied automatically upon loading the Drawaria page.
Paso 1: El menú de stickers y el redimensionamiento del lienzo se aplican automáticamente al cargar la página de Drawaria. - 🟢 Step 2: Click the "Stickers" button to show or hide the sticker menu.
Paso 2: Haz clic en el botón "Stickers" para mostrar u ocultar el menú de stickers. - 🟣 Step 3: Click on any sticker within the menu.
Paso 3: Haz clic en cualquier sticker dentro del menú. - 🟠 Step 4: The selected sticker will be drawn onto the Drawaria canvas, replacing the current content.
Paso 4: El sticker seleccionado se dibujará en el lienzo de Drawaria, reemplazando el contenido actual.
🛠️ Technical Details / Detalles Técnicos
| Feature / Característica | Details / Detalles |
| Canvas Resizing | Directly modifies the `height` and `width` properties of the canvas element. |
| DOM Manipulation | Creates and appends the sticker menu and toggle button to the document body. |
| Image Loading & Drawing | Uses `new Image()` and `ctx.drawImage()` to load and render stickers onto the canvas. |
| CSS Styling | Applies inline styles for positioning, appearance, and behavior of the menu and button. |
⚠️ Important Warnings / Advertencias Importantes
- 🚨 The sticker list is hardcoded. To add more stickers, you need to edit the script directly.
- 🚨 Clicking a sticker replaces the entire canvas content. There is no undo functionality.
- 🚨 Ensure Drawaria's website structure remains unchanged; updates may break the script's functionality.
- 🚨 The canvas size is fixed; this might affect other drawing tools or scripts.
Español:
- 🚨 La lista de stickers está codificada. Para añadir más stickers, necesitas editar el script directamente.
- 🚨 Al hacer clic en un sticker, se reemplaza todo el contenido del lienzo. No hay funcionalidad de deshacer.
- 🚨 Asegúrate de que la estructura del sitio web de Drawaria permanezca sin cambios; las actualizaciones podrían afectar la funcionalidad del script.
- 🚨 El tamaño del lienzo es fijo; esto podría afectar otras herramientas de dibujo o scripts.
🔧 Troubleshooting / Solución de Problemas
✅ The sticker menu appears, stickers can be clicked, and they draw onto the canvas. The canvas resizes correctly.
✅ El menú de stickers aparece, los stickers se pueden hacer clic y se dibujan en el lienzo. El lienzo se redimensiona correctamente.
⚠️ If the menu or buttons are not visible, ensure Tampermonkey is enabled and the script is correctly installed. Check the browser console for errors.
⚠️ Si el menú o los botones no son visibles, asegúrate de que Tampermonkey esté habilitado y el script esté instalado correctamente. Revisa la consola del navegador en busca de errores.
❌ If stickers don't draw onto the canvas or the canvas doesn't resize, check the browser console for errors related to canvas context or element selection.
❌ Si los stickers no se dibujan en el lienzo o el lienzo no se redimensiona, revisa la consola del navegador en busca de errores relacionados con el contexto del lienzo o la selección de elementos.
📊 Compatibility / Compatibilidad
| ✅ Compatible Browsers / Navegadores Compatibles | ✅ Required Extensions / Extensiones Requeridas |
Chrome, Firefox, Edge, Opera (Browsers supporting userscripts, HTML5 Canvas, and basic DOM manipulation) | Tampermonkey or similar userscript manager (Required for script execution) |
🔄 How to Disable / Cómo Desactivar
Method 1 - Script Manager: Open your userscript manager (e.g., Tampermonkey), find "Sticker Menu Drawaria", and disable or delete it.
Método 1 - Gestor de Scripts: Abre tu gestor de userscripts (ej. Tampermonkey), busca "Sticker Menu Drawaria" y desactívalo o elimínalo.
Method 2 - Hide Menu: Click the "Stickers" button to hide the menu. This does not disable the script's functionality or canvas resizing.
Método 2 - Ocultar Menú: Haz clic en el botón "Stickers" para ocultar el menú. Esto no deshabilita la funcionalidad del script ni el redimensionamiento del lienzo.
💡 Pro Tips / Consejos Profesionales
- Add More Stickers: Edit the `stickers` array in the script to include URLs of your favorite stickers.
- Customize Sticker Size: Adjust the `width` and `height` styles for `stickerImg` to change the size of stickers in the menu.
- Adjust Canvas Size: Modify the `canvas.height` and `canvas.width` values if you prefer different canvas dimensions.
- Sticker Placement: Change the `ctx.drawImage()` parameters to control where the sticker is placed on the canvas (currently it's at 0,0).
- Integrate with Drag-and-Drop: Combine this with a drag-and-drop image importer script to allow dropping stickers directly onto the canvas without using the menu.
Español:
- Añade Más Stickers: Edita el array `stickers` en el script para incluir URLs de tus stickers favoritos.
- Personaliza Tamaño de Stickers: Ajusta los estilos `width` y `height` para `stickerImg` para cambiar el tamaño de los stickers en el menú.
- Ajusta Tamaño del Lienzo: Modifica los valores de `canvas.height` y `canvas.width` si prefieres diferentes dimensiones para el lienzo.
- Colocación de Stickers: Cambia los parámetros de `ctx.drawImage()` para controlar dónde se coloca el sticker en el lienzo (actualmente está en 0,0).
- Integra con Arrastrar y Soltar: Combina esto con un script importador de imágenes por arrastrar y soltar para permitir soltar stickers directamente en el lienzo sin usar el menú.
🎉 Ready to Use! / ¡Listo para Usar!
Add fun stickers to your Drawaria creations with this easy-to-use menu!
¡Añade divertidos stickers a tus creaciones de Drawaria con este menú fácil de usar!
🎨 🚀 ✨ 💫 🌟
Author: YouTubeDrawaria | Version: 2024-09-06 | License: MIT
Support: Report issues in the comments below | Additional Info: Provides a simple sticker menu for drawing on the Drawaria canvas.