This repository has been archived by the owner on Nov 24, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 119
/
Text.js
110 lines (92 loc) · 3.02 KB
/
Text.js
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
import ExpoPixi, { PIXI } from 'expo-pixi';
export default async context => {
//http://pixijs.io/examples/#/basics/basic.js
const app = ExpoPixi.application({
context,
});
// // Load them google fonts before starting...!
window.WebFontConfig = {
google: {
families: ['Snippet', 'Arvo:700italic', 'Podkova:700'],
},
active() {
// do something
init();
},
};
// include the web-font loader script
/* jshint ignore:start */
(function() {
var wf = document.createElement('script');
wf.src =
(document.location.protocol === 'https:' ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
/* jshint ignore:end */
async function init() {
PIXI.loader.add('desyrel', 'required/assets/desyrel.xml').load(onAssetsLoaded);
function onAssetsLoaded() {
var bitmapFontText = new PIXI.extras.BitmapText('bitmap fonts are\n now supported!', {
font: '35px Desyrel',
align: 'right',
});
bitmapFontText.x = app.renderer.width - bitmapFontText.textWidth - 20;
bitmapFontText.y = 20;
app.stage.addChild(bitmapFontText);
}
// add a shiny background...
var background = await ExpoPixi.spriteAsync(require('../../assets/pixi/textDemoBG.jpg'));
background.width = app.renderer.width;
background.height = app.renderer.height;
app.stage.addChild(background);
// create some white text using the Snippet webfont
var textSample = new PIXI.Text('Pixi.js can has\n multiline text!', {
fontFamily: 'Snippet',
fontSize: 35,
fill: 'white',
align: 'left',
});
textSample.position.set(20);
// create a text object with a nice stroke
var spinningText = new PIXI.Text("I'm fun!", {
fontWeight: 'bold',
fontSize: 60,
fontFamily: 'Arial',
fill: '#cc00ff',
align: 'center',
stroke: '#FFFFFF',
strokeThickness: 6,
});
// setting the anchor point to 0.5 will center align the text... great for spinning!
spinningText.anchor.set(0.5);
spinningText.x = app.renderer.width / 2;
spinningText.y = app.renderer.height / 2;
// create a text object that will be updated...
var countingText = new PIXI.Text('COUNT 4EVAR: 0', {
fontWeight: 'bold',
fontStyle: 'italic',
fontSize: 60,
fontFamily: 'Arvo',
fill: '#3e1707',
align: 'center',
stroke: '#a4410e',
strokeThickness: 7,
});
countingText.x = app.renderer.width / 2;
countingText.y = 500;
countingText.anchor.x = 0.5;
app.stage.addChild(textSample, spinningText, countingText);
var count = 0;
app.ticker.add(function() {
count += 0.05;
// update the text with a new string
countingText.text = 'COUNT 4EVAR: ' + Math.floor(count);
// let's spin the spinning text
spinningText.rotation += 0.03;
});
}
};