在 Genify 发布作品集

本文档将带您了解了解如何在 Genify 上创建作品集所需了解的所有概念。

背景知识要求

在为 Genify 创建生成艺术作品集时,您需要掌握 HTML 技术。在构建作品集时,可以使用p5.js、three.js等熟悉的前端渲染技术。收藏的入口文件是 index.html。

同时,当你的项目在渲染的时候,需要保证在同一个genhash下性能一致。您可以使用传入的 genhash 来构造确定性随机函数。如果您是这项技术的新手,请不要担心。我们为您提供了现成的代码片段,只需将它们导入 index.html 中的适当位置即可。

作品集文件要求

  • 标准 zip 文件。

  • 压缩zip文件时,直接选择作品集文件夹下的所有文件进行压缩,不要直接压缩工件文件夹。

  • 代码中不要使用外部链接引入第三方js/css等资源,需要下载资源放在项目文件夹下。

展示项目素材

  • feature.png (4:3) , icon.png (1:1) , cover.png (1:1) 文件可以直接添加到收藏夹中。

  • 如果没有提供展示的材料,网站将使用 0 HASH 作为参数,在作品集发布后生成材料。

let zeroHash = '0x0000000000000000000000000000000000000000000000000000000000000000'

确定性的随机函数

集合中使用的随机函数必须是确定性的。

在每次渲染中,都会传入genhash参数来生成随机数。

具体用法如下。(以下代码可在index.html中引入)

整合以上代码后,就可以使用 Genify.random() 获取随机数的函数。

当然你也可以直接通过解析url中的参数获取hash值,然后通过CRC32生成随机数,这样就不需要在页面中引入上面的代码了。

但是不建议直接用 Genify.random 替换 Math.random,输出结果可能会受到用户浏览器安装的一些插件的影响。

为您的作品提供属性

  • 该属性是一个Map,key是属性名称,value是属性值。属性值建议使用字符串、数字或布尔值类型。

  • 你可以在每次渲染时通过Genify.setGenFeatures()来设置作品的属性,这样你的作品就可以在Genify中具有稀缺性。

您也可以通过以下方式直接设置作品的属性 window.$genFeatures,让您的作品在 Genify 中拥有稀缺性。

截图设置

在 Token 被铸造后,Genify Server 会为每个 Token 生成一张截图,用于在网站上展示。截图是通过捕捉浏览器访问 token URL 时的视图生成的。为了确保您的作品在网站上有更好的展示效果,您需要关注您的作品在浏览器中的渲染表现、渲染时长以及 viewport 大小。您可以参考以下建议:

  1. 将绘图区(例如,canvas)与 body 之间的边距消除,将 padding 和 margin 设置为 0。

  2. 处理 OnSize 事件,以确保在窗口大小发生变化时,渲染效果不受影响。

  3. 使用 Chrome 的开发者工具来测试合适的 viewport 大小。

  4. 如果您确切知道作品何时完成渲染,可以在渲染结束后调用 Genify.renderDone() 来主动设置状态。

  5. 优化图片和资源加载:使用适当的压缩方法和格式以减少加载时间和带宽消耗。可以考虑使用 WebP 或其他现代图片格式。

Genify演示项目

Last updated