Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support XML fonts in Webworker #8904

Merged
merged 1 commit into from Nov 30, 2022
Merged

Support XML fonts in Webworker #8904

merged 1 commit into from Nov 30, 2022

Conversation

bigtimebuddy
Copy link
Member

Closes #8901

Fixed

  • XML fonts now work in Webworker using @xmldom/xmldom

Chores

  • Removes xml2js and loadNodeBitmapFont.ts, since using a generic parseXML => Document works in Node too. We don't need a custom parsing solution.

Validations

bitmapText.mjs

import { Application, Assets, BitmapText } from '@pixi/node';
import fs from 'fs';
import path from 'path';

const app = new Application({ autoStart: false });
await Assets.load(path.join(process.cwd(), 'packages/text-bitmap/test/resources/desyrel.xml'));
const text = new BitmapText('Hello World!', {
    fontName: 'Desyrel',
    align: 'center',
});
text.x = (app.screen.width - text.width) / 2;
text.y = (app.screen.height - text.height) / 2;
app.stage.addChild(text);
app.render();
const data = await app.renderer.extract.base64();
const base64 = data.replace(/^data:image\/png;base64,/, '');
await fs.promises.writeFile(`./bitmapFont.png`, base64, 'base64');

bitmapFont

bitmapFont.html

<!DOCTYPE html>
<html>
<body>
<script>
    function workerSource(self) {
        self.onmessage = async ({ data: { baseUrl, pixiWebWorkerUrl, options } }) => {
            self.importScripts(new URL(pixiWebWorkerUrl, baseUrl));
            const app = new PIXI.Application(options);
            const fontUrl = new URL('./packages/text-bitmap/test/resources/desyrel.xml', baseUrl).toString()
            await PIXI.Assets.load(fontUrl);
            const text = new PIXI.BitmapText('Hello World!', {
                fontName: 'Desyrel',
                align: 'center',
            });
            text.x = (app.screen.width - text.width) / 2;
            text.y = (app.screen.height - text.height) / 2;
            app.stage.addChild(text);
        };
    }
    const blob = new Blob(['(', workerSource, ')(self);'], { type: 'application/javascript' });
    const url = URL.createObjectURL(blob);
    const worker = new Worker(url);
    URL.revokeObjectURL(url);

    const width = 800;
    const height = 600;
    const resolution = window.devicePixelRatio;
    const canvas = document.createElement('canvas');
    canvas.style.width = `${width}px`;
    canvas.style.height = `${height}px`;
    document.body.appendChild(canvas);
    const view = canvas.transferControlToOffscreen();

    const baseUrl = window.location.href;
    const pixiWebWorkerUrl = './bundles/pixi.js-webworker/dist/webworker.js';
    worker.postMessage({
        baseUrl,
        pixiWebWorkerUrl,
        options: {
            width,
            height, 
            resolution,
            view,
            background: '#1099bb',
        },
    }, [view]);
</script>
</body>
</html>

Screen Shot 2022-11-29 at 4 45 11 PM

@bigtimebuddy bigtimebuddy added this to the v7.1.0 milestone Nov 29, 2022
@bigtimebuddy bigtimebuddy requested a review from a team November 29, 2022 21:50
@bigtimebuddy bigtimebuddy added the ✅ Ready To Merge Helpful when issues are in the queue waiting to get merged. This means the PR is completed and has t label Nov 30, 2022
@bigtimebuddy bigtimebuddy merged commit 14a5ce9 into dev Nov 30, 2022
@bigtimebuddy bigtimebuddy deleted the feature/xml-fonts branch November 30, 2022 11:48
bigtimebuddy added a commit that referenced this pull request Dec 12, 2022
@bigtimebuddy
Support XML fonts in Webworker (#8904)
0a35f2c
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Zyie Zyie Zyie approved these changes

Assignees
No one assigned
Labels
✅ Ready To Merge Helpful when issues are in the queue waiting to get merged. This means the PR is completed and has t
Projects
None yet
Milestone
v7.1.0
Development

Successfully merging this pull request may close these issues.

BitmapText doesn't work in worker
2 participants
@bigtimebuddy @Zyie