comical-js
comical-js copied to clipboard
Published
20 hours ago •
BloomBooks
BloomBooks
Browser: Project is null, _currentStyle not being set
EDIT: The goal here is to have dynamic word bubbles near a character on the lower right side of an OBS scene to broadcast messages to the viewer. The tail will always be to the right and point to a specific region (the head). I'll want the bubble to appear for variable amounts of time, with successive messages in the same topic appending below it. After a while, I want them to disappear.
I'm using the SkyPack CDN to get the library. It isn't able to get the _currentStyle property from the project object, which I had assumed was being set with the paper.setup call. The exports are coming in, they just don't seem to be working.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Bubbles</title>
</head>
<body>
<div id="bubble-container" style="position: relative; height: 600px">
<canvas height="500" width="500"></canvas>
<div class="word-bubble" style="width: 200px; text-align:center; position: absolute; top: 10px; left: 20px;">Hi
there!</div>
</div>
<script type="module">
import paper from 'https://cdn.skypack.dev/paper';
import { Comical, Bubble } from 'https://cdn.skypack.dev/comicaljs';
document.addEventListener("DOMContentLoaded", function () {
// Fetch references to elements
const wrapDiv = document.querySelector('#bubble-container');
const canvas = document.querySelector('canvas');
const bubbleContent = document.querySelector('.word-bubble');
// Initialize Paper.js
paper.setup(canvas);
// Create a new Comical instance
const b = new Bubble(bubbleContent);
// Set the bubble spec
b.setBubbleSpec({
version: "1.0",
style: "speech",
tails: [{ tipX: 420, tipY: 400, midpointX: 320, midpointY: 375 }],
level: 1
});
// Initialize the bubble tails
b.tails = [{ tipX: 420, tipY: 400, midpointX: 320, midpointY: 375 }];
setTimeout(() => {
// Need a timeout because these functions may need to know the width of the content box
b.initialize();
}, 1000);
});
</script>
</body>
</html>
Uncaught TypeError TypeError: Cannot read properties of null (reading '_currentStyle')
at _initialize (cdn.skypack.dev/-/[email protected]/dist=es2019,mode=imports/optimized/comicaljs.js:6884:47)
at Group2 (cdn.skypack.dev/-/[email protected]/dist=es2019,mode=imports/optimized/comicaljs.js:8191:25)
at Layer2 (cdn.skypack.dev/-/[email protected]/dist=es2019,mode=imports/optimized/comicaljs.js:8251:21)
at Bubble3.initializeLayers (cdn.skypack.dev/-/[email protected]/dist=es2019,mode=imports/optimized/comicaljs.js:18172:33)
at Bubble3.initialize (cdn.skypack.dev/-/[email protected]/dist=es2019,mode=imports/optimized/comicaljs.js:18183:18)
at <anonymous> (c:\dev\obs\public\chat.html:36:19)
--- setTimeout ---
at <anonymous> (c:\dev\obs\public\chat.html:34:13)
Even by being more faithful to what is in storybook, still not getting the project:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.11/paper-full.min.js"></script>
<title>Chat Bubbles</title>
</head>
<body>
<div id="chat-bubble">
</div>
<script type="module">
import { Comical, Bubble } from 'https://cdn.skypack.dev/comicaljs';
paper.install(window);
const wrapDiv = document.createElement("div");
wrapDiv.style.position = "relative";
wrapDiv.style.height = "600px";
const canvas = document.createElement("canvas");
canvas.height = 500;
canvas.width = 500;
wrapDiv.appendChild(canvas);
paper.setup(canvas);
const textDiv2 = document.createElement("div");
textDiv2.innerText =
"This is a text block meant to represent shouting. It is 200px wide. It has a bit more text to make it squarer.";
textDiv2.style.width = "200px";
textDiv2.style.textAlign = "center";
//textDiv2.style.backgroundColor = "pink";
textDiv2.style.position = "absolute";
textDiv2.style.top = "250px";
textDiv2.style.left = "120px";
wrapDiv.appendChild(textDiv2);
const bubble = new Bubble(textDiv2);
bubble.setBubbleSpec({
version: "1.0",
style: "shout",
tails: [{ tipX: 420, tipY: 400, midpointX: 320, midpointY: 375 }],
level: 1
});
setTimeout(() => {
bubble.initialize();
}, 200);
document.getElementById("chat-bubble").appendChild(wrapDiv);
</script>
</body>
</html>