小游戏中使用 canvas内容做纹理

enali 发布于2019-08-22 16:06 / 502人阅读

摘要：由于小游戏中无法使用元素，开发中需要展示用户信息时，只有两个选择使用加载字体模型，但中文字体模型都超过。使用画布作为几何体的材质，该方法自由灵活，无需额外字体，也是目前小游戏开发中最佳实践。注该为修改版，以适配小游戏。

由于小游戏中无法使用html元素，开发中需要展示用户信息时，只有两个选择：

1-使用threejs加载字体模型，但中文字体模型都超过10MB。 2-使用2d canvas画布作为threejs几何体的材质，该方法自由灵活，无需额外字体，也是目前小游戏开发中最佳实践。

---注,该threejs为修改版，以适配小游戏。
---链接：https://gist.github.com/WangS...

import "./js/libs/weapp-adapter"
import * as THREE from "./js/libs/three.js"

let info, Performance, width, height, size, canvas2d, ctx, camera, scene, renderer, geometry, texture, mesh

wx.getSystemInfo({
    success(res) {
        info = res
        info.aspectRatio = (info.screenWidth / info.screenHeight)
        Performance = wx.getPerformance()
        run()
    }
})

function run() {
    width = window.innerWidth
    height = window.innerHeight / 2;
    size = 128;
    canvas2d = wx.createCanvas()
    ctx = canvas2d.getContext("2d");

    init();
    animate();
}

function changeCanvas() {
    ctx.font = "16pt Arial";
    ctx.fillStyle = "blue";
    ctx.fillRect(0, 0, canvas2d.width, canvas2d.height);
    ctx.fillStyle = "white";
    ctx.fillRect(10, 10, canvas2d.width - 20, canvas2d.height - 20);
    ctx.fillStyle = "black";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillText("王树贤", canvas2d.width / 2, canvas2d.height / 2);
}

function init() {
    renderer = new THREE.WebGLRenderer({
        antialias: true,
        canvas: canvas,
    });
    renderer.setSize(width, height);

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(70, width / height, 1, 1000);
    camera.position.z = 500;
    scene.add(camera);

    texture = new THREE.Texture(canvas2d);
    let material = new THREE.MeshBasicMaterial({
        map: texture
    });
    geometry = new THREE.BoxGeometry(200, 200, 200);
    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    canvas2d.width = canvas2d.height = size;
}

function animate() {
    requestAnimationFrame(animate);

    changeCanvas();
    texture.needsUpdate = true;
    mesh.rotation.y += 0.01;
    renderer.render(scene, camera);
}

云服务器 GPU云服务器使用canvas画图 java中替换内容获取游戏服务器内容纹理单元

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94054.html

开始学习 PixiJS

摘要：它自动侦测使用或者。开发者无需专门学习就能感受到强大的硬件加速的力量。要注意的是，虽然非常适合制作游戏，但它并不是一个游戏引擎，它的核心本质是尽可能快速有效地在屏幕上移动物体。可以被处理的图像被称作纹理。 PixiJS 介绍 PixiJS 是一个超快的2D渲染引擎。它自动侦测使用 WebGL 或者 Canvas。开发者无需专门学习 WebGL 就能感受到强大的硬件加速的力量。 Pixi...

fredshare 2019-08-23 13:42 评论0 收藏0
学习 PixiJS — 交互工具

摘要：设置缩放比例的构造函数还可以传入第三个参数，这个可选的参数用来确保使用的坐标将匹配画布的缩放像素坐标。将其设置为将再次启用拖动。说明 Pixi 内置一组功能有限的用于鼠标交互和触摸交互的方法，但是对于游戏和应用程序所需的丰富交互性，建议使用第三方库来简化操作，这篇文章介绍的是 Tink 库，它有通用的指针对象、拖放精灵、按钮对象、键盘控制等一些有用的功能。使用 Tink 库要...

zlyBear 2019-08-23 15:38 评论0 收藏0
学习 PixiJS — 视觉效果

摘要：将水平高斯模糊应用于对象。下一步是将此值分配给渲染选项的属性。蛇图像的宽度为像素，因此大约个片段会产生很好的效果。通过循环将数组中的每个按照椭圆形的轨迹移动，形成波浪效果。平铺精灵平铺精灵是一种特殊的精灵，可以在一定的范围内重复一个纹理。你可以使用它们创建无限滚动的背景效果。要创建平铺精灵，需要使用带有三个参数的 TilingSprite 类（PIXI.extras.TilingS...

xavier 2019-08-23 15:07 评论0 收藏0
现在做 Web 全景合适吗？

摘要：全景在以前带宽有限的条件下常常用来作为街景和全景图片的查看。后面，我们来了解一下，如何在端实现全景视频。现在对支持度也不是特别友好，但是，对于全景视频来说，在机器换代更新的前提下，全景在性能方面的瓶颈慢慢消失了。 Web 全景在以前带宽有限的条件下常常用来作为街景和 360° 全景图片的查看。它可以给用户一种 self-immersive 的体验，通过简单的操作，自由的查看周围的物体。...

psychola 2019-08-21 18:36 评论0 收藏0