Tip: Asset Variables and Arrays

There are two ways you can get a reference of an asset. The first is by adding a variable in the propsDefinition like this.

static propsDefinition = {
     pageOneImage: { type: hz.PropTypes.Asset, default: null },
};

The other way is a bit easier as you do not have to worry about setting it in the properties panel and that looks like this.

wheatImage: hz.Asset = new hz.Asset(BigInt('1801892640628366'))

That large number is the assets ID, and it can be found by navigating to the asset through the My Asset folder under the Asset Library. Click on your asset and click on the copy icon to copy the id to your clipboard for easy pasting and not having to worry about typing in the correct number. See Below.

For arrays, we cannot make an array visible in the properties panel. So, you will either have to add each one individually to the propsDefinition and then push them all to a private array at start like so.

static propsDefinition = {
     pageOneImage: { type: hz.PropTypes.Asset, default: null },
     pageTwoImage: { type: hz.PropTypes.Asset, default: null },
     pageThreeImage: { type: hz.PropTypes.Asset, default: null },
     pageFourImage: { type: hz.PropTypes.Asset, default: null },
     pageFiveImage: { type: hz.PropTypes.Asset, default: null },
     pageSixImage: { type: hz.PropTypes.Asset, default: null },
     pageSevenImage: { type: hz.PropTypes.Asset, default: null },
     pageCoverImage: { type: hz.PropTypes.Asset, default: null },
};

private assetArray: hz.TextureAsset[] = []

start() {
     if (this.props.pageCoverImage) this.assetArray.push(this.props.pageCoverImage);
     if (this.props.pageOneImage) this.assetArray.push(this.props.pageOneImage);
     if (this.props.pageTwoImage) this.assetArray.push(this.props.pageTwoImage);
     if (this.props.pageThreeImage) this.assetArray.push(this.props.pageThreeImage);
     if (this.props.pageFourImage) this.assetArray.push(this.props.pageFourImage);
     if (this.props.pageFiveImage) this.assetArray.push(this.props.pageFiveImage);
     if (this.props.pageSixImage) this.assetArray.push(this.props.pageSixImage);
     if (this.props.pageSevenImage) this.assetArray.push(this.props.pageSevenImage);
}

Alternatively, you can just create an array of assets using their ids like this.

private assetArray: hz.Asset[] = [new hz.Asset(BigInt(1801892640628366)),
                                   new hz.Asset(BigInt(498314826561242)),
                                   new hz.Asset(BigInt(1233397157754641)),
                                   new hz.Asset(BigInt(490691784022329))]

I personally prefer to make a map when doing this. A map is a key/value pair commonly called a dictionary in other languages. But it really depends on your use case. That would look something like this.

private assetMap: Map<hz.Asset, number> = new Map([
     [new hz.Asset(BigInt(1801892640628366)), 1],
     [new hz.Asset(BigInt(498314826561242)), 1],
     [new hz.Asset(BigInt(1233397157754641)), 1],
     [new hz.Asset(BigInt(490691784022329)), 1]])

 NOTE: You cannot get the ID of the assets in the Public Assets folder.

NOTE: Those IDs are legit and are just images I use for the HUD in Harvest to Hearth.