Skip to content

Latest commit

 

History

History
159 lines (119 loc) · 4.49 KB

textures.md

File metadata and controls

159 lines (119 loc) · 4.49 KB

Textures

Using debug textures

import { Texture } from 'arx-level-generator'

const texture = Texture.missingTexture

This loads the jorge texture from thief's dromed: jorge texture

This is the default texture for entities and rooms unless a texture is defined

const texture = Texture.uvDebugTexture

This loads a debug texture for checking whether any faces are flipped uv debug texture

Loading a pre-defined texture from Arx

A few textures have been added from the game. Just start typing and you should be able to find a few usable. The names of in-game textures have been changed from UPPER_CASE to camelCase and brackets have been removed:

// loads "L4_YLSIDE_[STONE]_GROUND01.jpg"
const texture = Texture.l4YlsideStoneGround01

predefined texture

Manually load a texture from Arx

By default the Texture class is trying to load the texture from the game. Casing doesn't matter, you can write it in lower case letters as well, Arx Libertatis can handle it.

Note that arx-level-generator does not check whether the texture exists, it will merely hold a reference to it.

const texture = new Texture({
  filename: 'L3_CAVES_[STONE]_GROUND03.jpg',
})

manually loaded texture

Custom texture

Place a jpg/png/bmp image into the assets folder and add a material in its filename between square brackets. You can use the following materials:

  • stone
  • marble
  • rock
  • wood
  • wet
  • mud
  • blood
  • bone
  • flesh
  • shit <-- yes, this is an official Arx Fatalis material
  • soil
  • gravel
  • earth
  • dust
  • sand
  • straw
  • metal
  • iron
  • glass
  • rust
  • ice
  • fabric
  • moss

source for how materials being parsed by Arx

Non-square textures

If a texture does not have the same width and height then it cannot be tiled, but still can be stretched to fit a plane mesh for example:

I've created the assets/textures/ folders and placed hamster-[stone].jpg into it.

const texture = new Texture({
  filename: 'hamster-[stone].jpg',
  isNative: false, // native textures are the ones coming from arx
  width: 1280,
  height: 853,
  sourcePath: './textures/', // relative to the "assets" folder
})

const mesh = createPlaneMesh({
  size: new Vector2(200, 200),
  tileSize: 50,
  texture,
  tileUV: false, // stretch it, not tile it
})

custom non-square texture

Square textures

Trying to tile a non-square texture can be done automatically by the arx-level-generator, it will crop off pixels from the longer edge to match the shorter.

let texture = new Texture({
  filename: 'hamster-[stone].jpg',
  isNative: false,
  width: 1280,
  height: 853,
  sourcePath: './textures/',
})

texture = Material.fromTexture(texture, {
  flags: ArxPolygonFlags.Tiled, // <-- the texture needs to be marked as tileable
})

const mesh = createPlaneMesh({
  size: new Vector2(200, 200),
  tileSize: 50,
  texture,
  tileUV: true, // <-- this also needs to be set
})

If the ArxPolygonFlags.Tiled part is missing, then a non-square texture will not get resized and will result in an incorrect tiling: texture tiling error

If all goes well then the surface should look like this: texture tiling ok

Textures which are already square shaped and have their width/height set to powers of 2 - like 64, 128, 256, 512, etc then the texture can automatically be tiled without having to specify any extra flags via the Material class

const texture = new Texture({
  filename: 'hamster-[stone].jpg',
  isNative: false,
  size: 512, // <-- instead of having separate "width" and "height" options, size can be specified with this single "size" option
  sourcePath: './textures/',
})

You cannot have the same image file loaded as tileable and non-tileable in 2 texture instances!

Supported formats

See "notes on formats" section in readme

Resources

Source of the hamster texture: https://www.alamy.com/stock-photo-european-hamster-black-bellied-hamster-common-hamster-cricetus-cricetus-20491567.html