https://github.com/triptych/emojiscene

create a little scene using emojis and dialog export to png
https://github.com/triptych/emojiscene

Last synced: 2 months ago
JSON representation

create a little scene using emojis and dialog export to png

• Host: GitHub
• URL: https://github.com/triptych/emojiscene
• Owner: triptych
• License: mit
• Created: 2024-08-04T18:16:14.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-08-04T18:19:56.000Z (10 months ago)
• Last Synced: 2025-02-09T20:29:43.738Z (4 months ago)
• Language: JavaScript
• Homepage: https://emojiscene.puter.site/
• Size: 13.7 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Emoji Scene Maker

Emoji Scene Maker is a fun, interactive web application that allows users to create and share scenes composed of emojis and speech bubbles. This project was created by Andrew Wooldridge ([email protected]).

## Features

1. **Emoji Selection and Placement**

   - Choose from a wide variety of emojis

   - Add emojis to the scene

   - Drag and drop emojis to position them

2. **Speech Bubbles**

   - Add customizable speech bubbles to your scene

   - Drag and drop speech bubbles to position them

3. **Emoji Size Adjustment**

   - Increase or decrease the size of selected emojis

   - Use '+' and '-' buttons or keyboard shortcuts

4. **Background Customization**

   - Set a solid background color

   - Create custom gradient backgrounds

5. **Canvas Size Options**

   - Choose from preset canvas sizes

   - Adjust the size of your scene

6. **Saving and Loading**

   - Save your scenes locally

   - Load previously saved scenes

7. **Sharing**

   - Generate a shareable URL for your scene

   - Export your scene as a PNG image

8. **Whimsical Design**

   - Playful user interface

   - Skewed emoji background for added fun

9. **Credits Section**

   - View information about the creator and libraries used

## How to Use

1. **Adding Emojis**

   - Click the "Choose Emoji" button to select an emoji

   - Click "Add Emoji" to add the selected emoji to your scene

   - Drag the emoji to position it

2. **Adding Speech Bubbles**

   - Enter text in the input field

   - Click "Add Speech Bubble" to add it to your scene

   - Drag the speech bubble to position it

3. **Adjusting Emoji Size**

   - Click on an emoji to select it

   - Use the '+' and '-' buttons or keyboard shortcuts to adjust size

4. **Changing Background**

   - Use the color picker to set a solid background color

   - Click "Set Gradient Background" for more options

5. **Changing Canvas Size**

   - Select a size from the "Canvas Size" dropdown

6. **Saving and Loading**

   - Click "Save Scene" to save your current scene

   - Click "Load Scene" to view and load saved scenes

7. **Sharing**

   - Click "Share Scene" to generate a shareable URL

   - Click "Export to PNG" to download your scene as an image

8. **Viewing Credits**

   - Click the "Credits" button in the upper right corner

## Technical Details

This project uses the following technologies and libraries:

- HTML5

- CSS3

- JavaScript (ES6+)

- [Emoji Button](https://github.com/joeattardi/emoji-button) for emoji selection

- [html2canvas](https://html2canvas.hertzen.com/) for PNG export

## Setup

1. Clone this repository or download the source files.

2. Open the `index.html` file in a modern web browser.

Note: For the best experience, use this application on a desktop or laptop computer with a recent version of Chrome, Firefox, or Safari.

## Contributing

This project is currently maintained by Andrew Wooldridge. If you'd like to contribute or report issues, please contact [email protected].

## License

MIT

Enjoy creating fun emoji scenes!