πxelStudioCode Editor Documentation:

Welcome to the essential guide for πxelWallE! Here you will find everything you need to master our innovative editor and bring your pixel art visions to life. We have designed this documentation to be as intuitive as our editor, allowing you to fully immerse yourself in creation without complications.

From loading your projects to exporting your masterpieces and converting images into code, get ready for a pixel art creation experience like no other.

File Management:

Your progress is invaluable. πxelWallE offers you clear and simple tools to load, save, and organize all your pixel art projects.

Open Existing Files: Pick up where you left off

To continue your creative adventure:

  • Go to the Files menu in the top bar.
  • Select Load.
  • Find your .pw file (πxelWallE's native format) and click to open it.

Your project will be ready to continue being transformed!

Create New Files:

To start from scratch and unleash new ideas:

  • In the command console, type new file.

A fresh and empty editor awaits you, ready for your first lines of pixel code.

Save Files:

Save your work frequently to secure every advance:

  • Save (Ctrl + S / Cmd + S): Updates your existing file with the latest changes.
  • In Files, Load saves your project with a new name or in a different location, ideal for versions or backups.

Supported File Formats: .pw

πxelWallE uses the .pw format to store your pixel art code. Make sure to use it to save and load your creations!

Import Photos to Code: Transform Images into Programmable Creations

One of πxelWallE's most magical features! Convert any image (PNG, JPG) into pixelWallE code. It's the perfect way to explore programmable pixel art representation or start a new project from an existing visual base. Although its integration is under development, you can use it through the transformIMG.py script located next to the executable.

How It Works:

This tool analyzes the pixels of your image, interpreting their colors and positions to generate lines of code that, when executed, will recreate that image in the editor.

Steps for Conversion: From Image to Code

  1. Run the transformIMG script.
  2. Copy the image path.
  3. Type the name of the folder where you will save the code.
  4. Press enter.

Watch your image materialize into lines of code ready to edit!

The Generated Code: Your New Canvas

Spawn(0,0)
Color("#FF0000")
DrawLine(0, 1,1);
DrawLine(1, 0,1);
# ... and so, pixel by pixel, your image takes shape in code ...

This code is your starting point. Modify it, experiment, and make it your own.

Considerations for Optimal Conversion

  • Simpler images or those with fewer colors tend to yield better results.
  • Very large images can generate a lot of code; experiment with the output size.
  • The result is a solid base, but you can always refine it manually.

Pro Tip: Play with size and palette settings to discover surprising visual effects. Images with defined outlines are your best allies!

Export as Image:

Your pixel art is ready for the world. Export your creations to standard image formats like PNG to share them on networks, use them in your projects, or simply save them as digital works of art.

How to Export Your Art: From Code to Final Image

  1. Make sure your pixel art preview is exactly how you want it.
  2. Go to the Files menu.
  3. Select Save Picture.
  4. Configure the export options:
    • Image Format: PNG is ideal for pixel art due to its lossless quality and transparency support.
    • Save to: Choose the location and name of your file.

Done! Your pixel art is now in image format, ready to shine.

Pro Tip: For maximum sharpness and detail in pixel art, always export to PNG.

Integrated Console:

The πxelWallE console is your command center. Use it to execute code, debug errors instantly, and view the output of your programs, all in one place.

Accessing the Console:

The console is always visible at the bottom of the editor. You just have to select it and start typing.

Run and Observe:

Press the "Run" button or type run in the console. You will see the output of your code and any important messages instantly, facilitating debugging and tracking.

Useful Commands:

  • run file your_file.pxl: Executes your pixel art script.
  • clear console: Clears the console for a fresh view.
  • help: Displays information for all console commands.
  • show commands: Shows all commands you can type in the code.

Remember: The complete syntax is available in the Console itself by typing the help command.

Quick Navigation:

Discover the visual shortcuts. The πxelWallE sidebar gives you instant access to the most used functions, making your creative process faster and uninterrupted.

Get to know your new shortcuts:

  • Resize Canvas: Transform the size of your canvas for more versatility.

  • Undo: Go back one step, perfect for experimenting without fear!

  • Redo: Recover an undone action.

  • Clear Canvas: Clears the current canvas, giving you a new canvas ready to experiment.

  • Execute Code: The magic button! Execute your code and watch your pixel art come to life.

Pro Tip: Familiarize yourself with these buttons. They are your allies for maintaining a fluid workflow.

Real-time Debugging: Errors, Under Control

πxelWallE actively assists you in correcting errors. It detects problems as you type, giving you immediate feedback so your code is perfect.

How πxelWallE Helps You: Clear Signals

  • Intuitive Underlining: Parts of the code with errors are highlighted (red for errors), guiding you to the exact problem.
  • Detailed Messages (Tooltips): Hover over the underline for a clear explanation of the problem.
  • Console Errors: The console displays a list of all errors and warnings, allowing you to quickly navigate to each instance.

Types of Errors We Detect:

  • Lexer Errors: Problems with invalid characters.
  • Syntax Errors: Problems with language structure (e.g., a forgotten parenthesis).
  • Basic Semantic Errors: When the code makes no logical sense (e.g., an invalid color).

Interpreting Messages: Your Guide to Troubleshooting

Each message will tell you: the type of problem (Error or Warning), a clear description, and the exact location (line and column).

Tips for Effective Debugging:

  • **Read Carefully:** The error message is your best clue.
  • **Start from the Beginning:** An early error can cause many later problems.
  • **Check Around:** Sometimes, the real problem is in a nearby line.
  • **Consult the Documentation:** Always have the pixelWallE Language Documentation handy to verify syntax.

Pro Tip: Errors are learning opportunities! πxelWallE turns them into steps to improve your code.