☰

Sticker Menu Drawaria

Use Stickers in Drawaria online!

作者
YouTubeDrawaria
日安装量
1
总安装量
139
评分
0 0 0
版本
2024-09-06
创建于
2024-09-06
更新于
2024-09-06
大小
4.1 KB
许可证
MIT
适用于

🚀 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
  1. Install the Tampermonkey extension (or a similar userscript manager) in your browser.
  2. Create a new userscript and paste the provided code into the editor.
  3. Save the script.
  4. Navigate to the Drawaria website (https://drawaria.online/).
  5. The sticker menu and toggle button will appear on the screen. The canvas will resize automatically.
  1. Instala la extensión Tampermonkey (o un gestor de userscripts similar) en tu navegador.
  2. Crea un nuevo userscript y pega el código proporcionado en el editor.
  3. Guarda el script.
  4. Navega al sitio web de Drawaria (https://drawaria.online/).
  5. 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.