10.41KiB; Markdown | 2019-09-02 00:12:21+02 | SLOC 163
1
![PlayCanvas](http://static.playcanvas.com/images/logo/Playcanvas_LOGOSET_SMALL-06.png)
2
3
# PlayCanvas WebGL Game Engine
4
5
PlayCanvas is an open-source game engine. It uses HTML5 and WebGL to run games and other interactive 3D content in any mobile or desktop browser.
6
7
## Project Showcase
8
9
Many games and apps have been published using the PlayCanvas engine. Here is a small selection:
10
11
[![After The Flood](https://s3-eu-west-1.amazonaws.com/images.playcanvas.com/projects/14928/440410/98554E-image-25.jpg)](https://playcanv.as/p/44MRmJRU/) [![Master Archer](https://s3-eu-west-1.amazonaws.com/images.playcanvas.com/projects/12/415995/10A5A9-image-25.jpg)](https://apps.facebook.com/1315812941823883/) [![Disney: Hour of Code](https://s3-eu-west-1.amazonaws.com/static.playcanvas.com/images/disney_moana_hourofcode.jpg)](http://partners.disney.com/hour-of-code/wayfinding-with-code) [![WebVR Lab](https://s3-eu-west-1.amazonaws.com/images.playcanvas.com/projects/12/446331/CAAA6B-image-25.jpg)](https://playcanv.as/p/sAsiDvtC/)
12
<br />
13
[![TANX](https://s3-eu-west-1.amazonaws.com/images.playcanvas.com/projects/12/45093/ESR5DQ-image-25.jpg)](https://tanx.io/) [![Swooop](https://s3-eu-west-1.amazonaws.com/images.playcanvas.com/projects/12/4763/TKYXB8-image-25.jpg)](https://chrome.google.com/webstore/detail/swooop/jblimahfbhdcengjfbdpdngcfcghladf) [![Flappy Bird](https://s3-eu-west-1.amazonaws.com/images.playcanvas.com/projects/8/375389/23PRTL-image-25.jpg)](http://www.miniclip.com/games/flappy-bird/en/) [![Virtual Voodoo](https://s3-eu-west-1.amazonaws.com/images.playcanvas.com/projects/12/422705/E23A1E-image-25.jpg)](http://www.miniclip.com/games/virtual-voodoo/en/)
14
<br />
15
[![Space Base](https://s3-eu-west-1.amazonaws.com/images.playcanvas.com/projects/12/411394/I2C48B-image-25.jpg)](https://playcanv.as/p/yipplmVO/) [![Sponza Runtime Lightmaps](https://s3-eu-west-1.amazonaws.com/images.playcanvas.com/projects/12/391368/221DFF-image-25.jpg)](https://playcanv.as/p/txPePQvy/) [![Star-Lord](https://s3-eu-west-1.amazonaws.com/images.playcanvas.com/projects/12/333626/BGQN9H-image-25.jpg)](https://playcanv.as/p/SA7hVBLt) [![Orange Room VR](https://s3-eu-west-1.amazonaws.com/images.playcanvas.com/projects/12/434546/BKST60-image-25.jpg)](https://playcanv.as/p/zi09Xvld/)
16
<br />
17
[![Car](https://s3-eu-west-1.amazonaws.com/images.playcanvas.com/projects/12/347824/7ULQ3Y-image-25.jpg)](http://car.playcanvas.com/) [![Steampunk Slots](https://s3-eu-west-1.amazonaws.com/images.playcanvas.com/projects/23510/344862/VH0NOH-image-25.jpg)](https://playcanv.as/p/nL1dYbMv) [![Casino](https://s3-eu-west-1.amazonaws.com/images.playcanvas.com/projects/14928/349824/U88HJQ-image-25.jpg)](http://casino.playcanvas.com/) [![Seemore](https://s3-eu-west-1.amazonaws.com/images.playcanvas.com/projects/14705/319531/O4J4VU-image-25.jpg)](https://playcanv.as/p/MflWvdTW/)
18
19
You can see more games on the [PlayCanvas website](https://playcanvas.com/explore).
20
21
## Users
22
23
PlayCanvas is used by leading companies in video games, advertising and visualization such as:␣␣
24
**Animech, ARM, Disney, Facebook, IGT, King, Miniclip, Leapfrog, Mozilla, Nickelodeon, Nordeus, PikPok, PlaySide Studios, Polaris, Samsung, Spry Fox, Zeptolab, Zynga**
25
26
## Features
27
28
PlayCanvas is a fully featured game engine.
29
30
* **Graphics**
31
    * WebGL 2.0 based renderer (with fallback to WebGL 1.0)
32
    * Physically based rendering (PBR)
33
    * Directional, point and spot lights
34
    * Shadow mapping (PCF and VSM implementations)
35
    * Runtime lightmap baking
36
    * Static, skinned and morphed meshes
37
    * GPU Particle engine with editor
38
    * PostFX library: bloom, edge detect, FXAA, vignette, etc
39
    * Seamless default material support from Maya, 3DS Max, Blender, etc.
40
    * Full model export pipeline from Maya, 3DS Max, Blender, etc via [Assets User Manual](http://developer.playcanvas.com/en/user-manual/assets/)
41
* **Collision & Physics**
42
    * Full integration with 3D rigid-body physics engine [ammo.js](https://github.com/kripken/ammo.js)
43
* **Audio**
44
    * 3D Positional audio via Web Audio API
45
* **Resource Loading**
46
    * Simple and powerful resource loading
47
    * Streaming of individual assets
48
    * Asset Variants - loads compressed textures (DXT, PVR, ETC1, ETC2) based on platform support
49
* **Entity / Component System**
50
    * Built-in components: model, sound, animation, camera, collision, light, rigidbody, script, particlesystem
51
* **Scripting system**
52
    * Write game behaviors by attaching JavaScript to game entities
53
    * Live code hot-swap enables rapid iteration
54
* **Input**
55
    * Mouse, Keyboard, Touch, Gamepad, VR
56
57
## Usage
58
59
Here's a super-simple Hello World example - a spinning cube!
60
61
```html
62
<!DOCTYPE html>
63
<html>
64
<head>
65
    <meta charset="utf-8">
66
    <title>PlayCanvas Hello Cube</title>
67
    <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no' />
68
    <style>
69
        body {
70
            margin: 0;
71
            overflow: hidden;
72
        }
73
    </style>
74
    <script src='https://code.playcanvas.com/playcanvas-stable.min.js'></script>
75
</head>
76
<body>
77
    <canvas id='application'></canvas>
78
    <script>
79
        // create a PlayCanvas application
80
        var canvas = document.getElementById('application');
81
        var app = new pc.Application(canvas, { });
82
        app.start();
83
84
        // fill the available space at full resolution
85
        app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
86
        app.setCanvasResolution(pc.RESOLUTION_AUTO);
87
88
        // ensure canvas is resized when window changes size
89
        window.addEventListener('resize', function() {
90
            app.resizeCanvas();
91
        });
92
93
        // create box entity
94
        var cube = new pc.Entity('cube');
95
        cube.addComponent('model', {
96
            type: 'box'
97
        });
98
99
        // create camera entity
100
        var camera = new pc.Entity('camera');
101
        camera.addComponent('camera', {
102
            clearColor: new pc.Color(0.1, 0.1, 0.1)
103
        });
104
105
        // create directional light entity
106
        var light = new pc.Entity('light');
107
        light.addComponent('light');
108
109
        // add to hierarchy
110
        app.root.addChild(cube);
111
        app.root.addChild(camera);
112
        app.root.addChild(light);
113
114
        // set up initial positions and orientations
115
        camera.setPosition(0, 0, 3);
116
        light.setEulerAngles(45, 0, 0);
117
118
        // register a global update event
119
        app.on('update', function (deltaTime) {
120
            cube.rotate(10 * deltaTime, 20 * deltaTime, 30 * deltaTime);
121
        });
122
    </script>
123
</body>
124
</html>
125
```
126
127
Want to play with the code yourself? Edit it on [CodePen](http://codepen.io/playcanvas/pen/NPbxMj).
128
129
## How to build
130
131
Ensure you have [Node.js](https://nodejs.org) installed. Then, install all of the required Node.js dependencies:
132
133
    npm install
134
␣␣␣␣
135
To execute a build of the engine to build/playcanvas-latest.js, do:
136
137
    npm run build
138
139
Pre-built versions of the engine are also available.
140
141
Latest development release:
142
143
* https://code.playcanvas.com/playcanvas-latest.js
144
* https://code.playcanvas.com/playcanvas-latest.min.js
145
146
Latest stable release:
147
148
* https://code.playcanvas.com/playcanvas-stable.js
149
* https://code.playcanvas.com/playcanvas-stable.min.js
150
151
Specific engine versions:
152
153
* https://code.playcanvas.com/playcanvas-0.181.11.js
154
* https://code.playcanvas.com/playcanvas-0.181.11.min.js
155
156
## Releases
157
158
A full list of Releases and Release Notes is available [here](https://github.com/playcanvas/engine/releases).
159
160
## How to get models?
161
162
To convert any models created using a 3D modelling package see [this page](http://developer.playcanvas.com/en/engine/) in the developer documentation.
163
164
## How to run tests
165
166
PlayCanvas makes use of Karma for running unit tests, and provides three test ways of executing them depending on what phase of development you're in:
167
168
    # Runs the tests once over the unbuilt source files - useful if you just want a quick 'all-clear'
169
    npm run test
170
171
    # Watches all source and test files for changes, and automatically re-runs the tests when they change.
172
    # Open http://localhost:9876/debug.html in your browser to debug the tests in real time.
173
    #
174
    # You can also edit the `tests/**/test_*.js` glob in tests/karma.conf.js to run a subset of the tests,
175
    # during development.
176
    npm run test:watch
177
178
    # Runs the tests once over playcanvas-latest.js - mainly used by CI, but sometimes useful if you want
179
    # to test the engine after building it. Make sure to do `npm run build` first to make sure you have
180
    # an up-to-date build.
181
    npm run test:release
182
183
## Documentation
184
185
Full documentation available on the [PlayCanvas Developer](http://developer.playcanvas.com) site including [API reference](http://developer.playcanvas.com/en/api/). To build a local copy of the API reference manual to the docs folder, do:
186
187
    npm run docs
188
189
## Tutorials & Examples
190
191
See all the [tutorials](http://developer.playcanvas.com/tutorials/) here.
192
193
## TypeScript Bindings
194
195
You can develop TypeScript applications against the PlayCanvas engine. To generate a TypeScript definitions file for the entire API, do:
196
197
    npm run tsd
198
199
This will output to build/output/playcanvas.d.ts
200
201
## Getting Help
202
203
[**Forums**](https://forum.playcanvas.com) - Use the forum to ask/answer questions about PlayCanvas.
204
205
## Contributing
206
207
Want to help us make the best 3D engine on the web? Great!
208
Check out [CONTRIBUTING.md](https://github.com/playcanvas/engine/blob/master/.github/CONTRIBUTING.md) that will get you started.
209
And look for ["good first PR"](https://github.com/playcanvas/engine/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+PR%22)  label in Issues.
210
211
### Github Issues
212
213
Please use [Github Issues](https://github.com/playcanvas/engine/issues) to report bugs or request features.
214
215
### Reporting bugs
216
217
Please follow these steps to report a bug
218
219
1. **Search for related issues** - search the existing issues so that you don't create duplicates
220
221
2. **Create a testcase** - Please create the smallest isolated testcase that you can that reproduces your bug
222
223
3. **Share as much information as possible** - everything little helps, OS, browser version, all that stuff.
224
225
## PlayCanvas Platform
226
227
The PlayCanvas Engine is an open source engine which you can use to create games and 3D visualisation in the browser. In addition to the engine we also make the [PlayCanvas development platform](https://playcanvas.com/) which features an Visual Editor, asset management, code editing, hosting and publishing services.
228
229
## License
230
231
The PlayCanvas Engine is released under the [MIT](http://opensource.org/licenses/MIT) license. See LICENSE file.