spiderman-textures.md

• I'm working on a Spider-Man game in WebVR (using A-Frame library) and the game has an infinite procedurally generated city. I need help with texturing the environment and the buildings.

• I want to have 2 separate visual styles, so all textures need to be done twice in both styles:

  1. The first style is realistic - here is an example.

  2. The second style is vector/simpler geometries but more colorful - here is an example.

• For efficiency of the game, small textures I think are enough, Like 256x256 pixels or 256x512 pixels or 512x256 pixels.

• For each style, I need the following textures:

  • Ground, road

  • About 8 different buildings (so the city is interesting and has variance)

• You should experiment with how the textures look inside the game. Since this is a web game, you can actually change the files yourself and see what it looks like. This is how to do it:

  1. Open https://glitch.com/edit/#!/spidermarina - you can see the game code there (HTML and JavaScript).

  2. Click on the top right on "Remix to Edit" - this will create a copy for you that you can change without disrupting me.

  3. Select the file "index.html" in the left list menu, then look for the <a-assets> tag. It contains all the textures.

  4. You can upload new textures (JPG/PNG files) to the "assets" in the left list menu.

  5. After you do, copy their URL and paste it inside "index.html" under <a-assets> in the src field.

  6. Now you can view the result by clicking on "Show" in the top left. You can look around with the mouse, walk around with A/S/W/D keys and shoot web with the SPACE key.

• The result of this project that I'm expecting from you is the texture files, about 20 JPG/PNG files: (2+8) x 2 visual styles.

• Some advanced comments:

  • If you need to change how textures repeat, take a look in "tile.js" and look for repeat.

  • You can change the fog/sky color to match the visual style in "index.html", look for <a-scene> and <a-sky>.