forked from playcanvas/engine
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtext-wrap.html
More file actions
83 lines (72 loc) · 2.97 KB
/
Copy pathtext-wrap.html
File metadata and controls
83 lines (72 loc) · 2.97 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html>
<head>
<title>PlayCanvas Text Wrapping</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="icon" type="image/png" href="../playcanvas-favicon.png" />
<script src="../../build/playcanvas.js"></script>
<script src="../../build/playcanvas-extras.js"></script>
<style>
body {
margin: 0;
overflow-y: hidden;
}
</style>
</head>
<body>
<!-- The canvas element -->
<canvas id="application-canvas"></canvas>
<!-- The script -->
<script>
var canvas = document.getElementById("application-canvas");
// Create the application and start the update loop
var app = new pc.Application(canvas);
app.start();
// Set the canvas to fill the window and automatically change resolution to be the same as the canvas size
app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
app.setCanvasResolution(pc.RESOLUTION_AUTO);
window.addEventListener("resize", function () {
app.resizeCanvas(canvas.width, canvas.height);
});
var miniStats = new pcx.MiniStats(app);
// Create a camera
var camera = new pc.Entity();
camera.addComponent("camera", {
clearColor: new pc.Color(0, 0, 0)
});
app.root.addChild(camera);
// Create a 2D screen
var screen = new pc.Entity();
screen.addComponent("screen", {
referenceResolution: new pc.Vec2(1280, 720),
scaleBlend: 0.5,
scaleMode: pc.SCALEMODE_BLEND,
screenSpace: true
});
app.root.addChild(screen);
// Create a text element that wraps text over several lines
var loremIpsum = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
var text = new pc.Entity();
text.addComponent("element", {
anchor: [0.5, 0.5, 0.5, 0.5],
autoWidth: false,
fontSize: 32,
pivot: [0.5, 0.5],
text: loremIpsum,
type: pc.ELEMENTTYPE_TEXT,
width: 512,
wrapLines: true
});
screen.addChild(text);
// Load a font
var fontAsset = new pc.Asset('arial.json', "font", { url: "../assets/fonts/arial.json" });
fontAsset.on('load', function () {
// Apply the font to the text element
text.element.fontAsset = fontAsset;
});
app.assets.add(fontAsset);
app.assets.load(fontAsset);
</script>
</body>
</html>