hellokev / Sandwich-Project

1 stars 3 forks source link

Sandwich Generator

Generate random sandwiches

Development Guide

  1. Install NodeJS

  2. Fork the repository

  3. Install dependencies

    npm install
  4. Run the project locally

    npm run dev
  5. Make some changes

  6. You can save your github credentials by running

    git config --global credentials.helper store
  7. Generate a github access token (guide)

  8. Add your changes using

    git add <files>
  9. Commit your changes using

    git commit -m "commit message here"
  10. Push your changes to your fork

    git push
  11. When asked for your credentials, use your GitHub username and the password will be the access token you generated from step 7

  12. Create pull request (should show up when you visit your fork on github.com)

How to help with pixel art assets

Setting up Aseprite

  1. Install Aseprite. You can buy this for $20 or apparently you can just compile the repo and get it for free that way? Not sure how that works, but if you can figure it out do it! (if you ever wanna try making with pixel graphics this is the go-to app)

  2. Create a new file and name it in the same way I have for the examples. Set the dimensions to 32 x 32 (good amount of resolution but still a very pixel art feel)

  3. Check the dimension_ref.png for guidelines on the placement of your sprite. Maybe make it a tab in your Aseprite for easy access. Draw within where the green square is, 20-ish pixels from the bottom

Quick intro to Aseprite

Making a sprite

  1. Choose a condiment, ingredient, or bread type

  2. Make a blob in the rough shape of the item you want in a base color (within specified dimensions of 20x32)

  3. To change shades of a color,

  1. Add details, subtract details, mess around with it!
  1. When you are satisfied with your work, do save your file as a .aseprite file and put it in the aseprite_files folder. From there, git add, git commit, git push, then pull request.

  2. rinse and repeat! we're gonna want a lot of these eventually, so quantity over quality! I will also tidy up, fix color, and export as png all the .aseprite files so don't worry if it's not perfect!

NOTE: When this gets put into the final project, it will likely be blurry because it's so small. I think these docs should help: https://developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look