craftyjs.github.com/cookbook/text-sprite.html at master · craftyjs/craftyjs.github.com · GitHub
Skip to content
Navigation Menu
Sign in Appearance settings
* Platform
* AI CODE CREATION
* GitHub Copilot Write better code with AI
* GitHub Copilot app Direct agents from issue to merge
* MCP Registry Integrate external tools
* DEVELOPER WORKFLOWS
* Actions Automate any workflow
* Codespaces Instant dev environments
* Issues Plan and track work
* Code Review Manage code changes
* Code Quality Enforce quality at merge
* APPLICATION SECURITY
* GitHub Advanced Security Find and fix vulnerabilities
* Code security Secure your code as you build
* Secret protection Stop leaks before they start
* EXPLORE
* Why GitHub
* Documentation
* Blog
* Changelog
* Marketplace
View all features
* Solutions
* BY COMPANY SIZE
* Enterprises
* Small and medium teams
* Startups
* Nonprofits
* BY USE CASE
* App Modernization
* DevSecOps
* DevOps
* CI/CD
* View all use cases
* BY INDUSTRY
* Healthcare
* Financial services
* Manufacturing
* Government
* View all industries
View all solutions
* Resources
* EXPLORE BY TOPIC
* AI
* Software Development
* DevOps
* Security
* View all topics
* EXPLORE BY TYPE
* Customer stories
* Events & webinars
* Ebooks & reports
* Business insights
* GitHub Skills
* SUPPORT & SERVICES
* Documentation
* Customer support
* Community forum
* Trust center
* Partners
View all resources
* Open Source
* COMMUNITY
* GitHub Sponsors Fund open source developers
* PROGRAMS
* Security Lab
* Maintainer Community
* GitHub Stars
* Archive Program
* REPOSITORIES
* Topics
* Trending
* Collections
* Enterprise
* ENTERPRISE SOLUTIONS
* Enterprise platform AI-powered developer platform
* AVAILABLE ADD-ONS
* GitHub Advanced Security Enterprise-grade security features
* Copilot for Business Enterprise-grade AI features
* Premium Support Enterprise-grade 24/7 support
* Pricing
Search /
Sign in
Sign up Appearance settings
You signed in with another tab or window. Reload to refresh your session.
You signed out in another tab or window. Reload to refresh your session.
You switched accounts on another tab or window. Reload to refresh your session.
Dismiss alert
Uh oh!
There was an error while loading. Please reload this page .
craftyjs
/
craftyjs.github.com
Public
*
Notifications
You must be signed in to change notification settings
*
Fork
78
*
Star
85
*
Code
*
Issues
2
*
Pull requests
10
*
Actions
*
Projects
*
Wiki
*
Security and quality
0
*
Insights
Additional navigation options
*
Code
*
Issues
*
Pull requests
*
Actions
*
Projects
*
Wiki
*
Security and quality
*
Insights
Files Expand file tree
master
Breadcrumbs
* craftyjs.github.com
* / cookbook
/ text-sprite.html
Copy path
Blame
More file actions
Blame
More file actions
Latest commit
History
History
History
162 lines (147 loc) · 8.59 KB
master
Breadcrumbs
* craftyjs.github.com
* / cookbook
/ text-sprite.html
Copy path
Top
File metadata and controls
* Code
* Blame
162 lines (147 loc) · 8.59 KB
Raw
Copy raw file
Download raw file
Open symbols panel Edit and raw actions
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Crafty - Text Sprites</title>
<link type="text/css" rel="stylesheet" href="/craftyjs-site.css" />
<link href='http://fonts.googleapis.com/css?family=Arvo:regular,bold' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" href="/favicon.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="/github.css"/>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-23935213-2']);
_gaq.push(['_trackPageview']);
(function () {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div id = "header-background"> </div>
<div id = "page-frame">
<div id="header">
<nav class="navbar">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/"> <img class="logo" src="/images/text-logo.png" /> </a>
</div>
<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="/">Home</a></li>
<li><a href="/getting-started/">Getting started</a></li>
<li><a href="/documentation/">Documentation</a></li>
<li><a href="/api/">API</a></li>
<li><a href="https://groups.google.com/forum/#!forum/craftyjs">Forum</a></li>
<li><a href="/components/">Components</a></li>
<li class="emph"><a href="/#install">Download</a></li>
</ul>
</div>
</div>
</nav>
</div>
<div id="main">
<div id="content" class="container">
<div id='doc-nav'>
<ul id='doc-level-one'>
<li>
Text
<ul>
<li><a href='/cookbook/text-sprite.html'>Text Sprites</a></li>
</ul>
</li>
</ul>
</div>
<div id='doc-content'>
<h2> Text Sprites </h2>
<p>If you want to be more creative about the fonts in your game you can create a sprite sheet of your font like this</p>
<p> <img src="examples/textsprite/font-hand-24x32.png" alt="examples/textsprite/font-hand-24x32.png"></p>
<p>and chop it up in Crafty like this </p>
<pre><code>Crafty.init();
Crafty.sprite(<span class="hljs-number">24</span>,<span class="hljs-number">32</span>,<span class="hljs-string">"http://opengameart.org/sites/default/files/font-hand-24x32.png"</span>,
{
<span class="hljs-attr">EMPTY</span>:[<span class="hljs-number">0</span>,<span class="hljs-number">0</span>],
<span class="hljs-attr">A</span>:[<span class="hljs-number">1</span>,<span class="hljs-number">2</span>],
<span class="hljs-attr">B</span>:[<span class="hljs-number">2</span>,<span class="hljs-number">2</span>],
<span class="hljs-attr">C</span>:[<span class="hljs-number">3</span>,<span class="hljs-number">2</span>],
<span class="hljs-attr">D</span>:[<span class="hljs-number">4</span>,<span class="hljs-number">2</span>],
<span class="hljs-attr">E</span>:[<span class="hljs-number">5</span>,<span class="hljs-number">2</span>],
<span class="hljs-attr">F</span>:[<span class="hljs-number">6</span>,<span class="hljs-number">2</span>],
<span class="hljs-attr">G</span>:[<span class="hljs-number">7</span>,<span class="hljs-number">2</span>],
<span class="hljs-attr">H</span>:[<span class="hljs-number">8</span>,<span class="hljs-number">2</span>],
<span class="hljs-attr">I</span>:[<span class="hljs-number">9</span>,<span class="hljs-number">2</span>],
<span class="hljs-attr">J</span>:[<span class="hljs-number">10</span>,<span class="hljs-number">2</span>],
<span class="hljs-attr">K</span>:[<span class="hljs-number">11</span>,<span class="hljs-number">2</span>],
<span class="hljs-attr">L</span>:[<span class="hljs-number">12</span>,<span class="hljs-number">2</span>],
<span class="hljs-attr">M</span>:[<span class="hljs-number">13</span>,<span class="hljs-number">2</span>],
<span class="hljs-attr">N</span>:[<span class="hljs-number">14</span>,<span class="hljs-number">2</span>],
<span class="hljs-attr">O</span>:[<span class="hljs-number">15</span>,<span class="hljs-number">2</span>],
<span class="hljs-attr">P</span>:[<span class="hljs-number">0</span>,<span class="hljs-number">3</span>],
<span class="hljs-attr">Q</span>:[<span class="hljs-number">1</span>,<span class="hljs-number">3</span>],
<span class="hljs-attr">R</span>:[<span class="hljs-number">2</span>,<span class="hljs-number">3</span>],
<span class="hljs-attr">S</span>:[<span class="hljs-number">3</span>,<span class="hljs-number">3</span>],
<span class="hljs-attr">T</span>:[<span class="hljs-number">4</span>,<span class="hljs-number">3</span>],
<span class="hljs-attr">U</span>:[<span class="hljs-number">5</span>,<span class="hljs-number">3</span>],
<span class="hljs-attr">V</span>:[<span class="hljs-number">6</span>,<span class="hljs-number">3</span>],
<span class="hljs-attr">W</span>:[<span class="hljs-number">7</span>,<span class="hljs-number">3</span>],
<span class="hljs-attr">X</span>:[<span class="hljs-number">8</span>,<span class="hljs-number">3</span>],
<span class="hljs-attr">Y</span>:[<span class="hljs-number">9</span>,<span class="hljs-number">3</span>]
});
Crafty.c(<span class="hljs-string">"Char"</span>,{
<span class="hljs-attr">init</span>:<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
<span class="hljs-keyword">this</span>.addComponent(<span class="hljs-string">"2D,DOM"</span>).attr({<span class="hljs-attr">w</span>:<span class="hljs-number">24</span>,<span class="hljs-attr">h</span>:<span class="hljs-number">32</span>});
}
});
Crafty.c(<span class="hljs-string">"SpriteText"</span>,{
<span class="hljs-attr">init</span>:<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
<span class="hljs-keyword">this</span>.addComponent(<span class="hljs-string">"2D,DOM"</span>);
},
<span class="hljs-attr">text</span>:<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">text</span>)</span>{
<span class="hljs-keyword">var</span> c;
<span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i<text.length;i++){
c = Crafty.e(<span class="hljs-string">"Char"</span>,text.charAt(i).toUpperCase());
c.shift(i*c.w);
<span class="hljs-keyword">this</span>.attach(c);
}
}
});</code></pre>
<p>Then simply use the SpriteText component like this</p>
<pre><code><span class="hljs-keyword">var</span> text = Crafty.e(<span class="hljs-string">"SpriteText"</span>).text(<span class="hljs-string">"Crafty Roxx"</span>);</code></pre>
<p>And the result</p>
<iframe width="600" height="300" src="examples/textsprite/textsprite.html">
This is an iframe. sorry.
</iframe>
</div>
</div>
</div>
<div class="clearer"></div>
<div id="footer">
<div id="contact">
<a href="https://groups.google.com/forum/#!forum/craftyjs">
<img src="/images/google.png" />
google groups</a>
<a href="mailto:
[email protected]">
<img src="/images/email.png" />
[email protected]</a>
<a href="https://github.com/craftyjs/Crafty">
<img src="/images/github.png" />
github</a>
</div>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/getting-started/">Getting started</a></li>
<li><a href="/documentation/">Documentation</a></li>
<li><a href="/api/">API</a></li>
<li><a href="https://groups.google.com/forum/#!forum/craftyjs">Forum</a></li>
<li><a href="/components/">Modules</a></li>
<li class="emph"><a href="/#install">Download</a></li>
</ul>
<p>
© Crafty 2010-2015. Crafty is distributed under the <a href="http://en.wikipedia.org/wiki/MIT_License">MIT License</a>.
</p>
</div>
</div>
</body>
</html>
Footer
(c) 2026 GitHub, Inc.
Footer navigation
*
Terms
*
Privacy
*
Security
*
Status
*
Community
*
Docs
*
Contact
*
Manage cookies
*
Do not share my personal information
You can’t perform that action at this time.