小游戲中使用 canvas內容做紋理

enali 發布于2019-08-22 16:06 / 552人閱讀

摘要：由于小游戲中無法使用元素，開發中需要展示用戶信息時，只有兩個選擇使用加載字體模型，但中文字體模型都超過。使用畫布作為幾何體的材質，該方法自由靈活，無需額外字體，也是目前小游戲開發中最佳實踐。注該為修改版，以適配小游戲。

由于小游戲中無法使用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中替換內容獲取游戲服務器內容紋理單元

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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