replay-viewer/builders/player/generateSprite.js

Rocket League replay viewer React component and tooling

import { LinearMipMapLinearFilter, NearestFilter, Sprite, SpriteMaterial, Texture, } from "three";
import { SPRITE } from "../../constants/gameObjectNames";
export var SPRITE_ORTHO_SCALE = 2400;
export var generateSprite = function (playerName, orangeTeam) {
    var name = playerName.toUpperCase();
    var border = 10;
    var fontSize = 60;
    var canvasSize = 480;
    var canvas = document.createElement("canvas");
    canvas.width = 512;
    canvas.height = canvas.width;
    var context = canvas.getContext("2d");
    var roundRect = function (ct, x, y, w, h, radius) {
        if (w > h) {
            radius = h / 2;
        }
        else {
            radius = w / 2;
        }
        ct.beginPath();
        ct.moveTo(x + radius, y);
        ct.arcTo(x + w, y, x + w, y + h, radius);
        ct.arcTo(x + w, y + h, x, y + h, radius);
        ct.arcTo(x, y + h, x, y, radius);
        ct.arcTo(x, y, x + w, y, radius);
        ct.closePath();
        return ct;
    };
    if (context) {
        var tagYOffset = 70;
        var tagY = (canvas.height / 2) - (fontSize + border * 2) - tagYOffset;
        context.font = "bold ".concat(fontSize, "px Arial");
        context.textBaseline = "middle";
        context.fillStyle = orangeTeam ? "#ff9800" : "#2196f3";
        roundRect(context, border, tagY, canvasSize, fontSize + border * 2, fontSize * 2).fill();
        context.strokeStyle = "#eee";
        context.lineWidth = border;
        roundRect(context, border, tagY, canvasSize, fontSize + border * 2, fontSize * 2).stroke();
        context.fillStyle = "#fff";
        var measure = context.measureText(name);
        var padding = border / 2 + fontSize / 2;
        var maxWidth = canvasSize - padding * 2;
        var width = maxWidth > measure.width ? measure.width : maxWidth;
        var x = canvasSize / 2 + border / 2 - width / 2;
        context.fillText(name, x, canvas.height / 2 - fontSize / 2 - border - tagYOffset, maxWidth);
    }
    var texture = new Texture(canvas);
    texture.needsUpdate = true;
    texture.magFilter = NearestFilter;
    texture.minFilter = LinearMipMapLinearFilter;
    var spriteMaterial = new SpriteMaterial({
        map: texture,
    });
    var sprite = new Sprite(spriteMaterial);
    sprite.position.setY(40);
    sprite.name = SPRITE;
    return sprite;
};
//# sourceMappingURL=generateSprite.js.map