├── LICENSE
├── README.md
├── assets
    ├── css
    │   ├── style.css
    │   └── style.less
    ├── img
    │   ├── BackDrop_01.png
    │   └── player.png
    └── js
    │   ├── pixi.min.js
    │   └── pixi.min.js.map
├── html
    └── t1-1.html
└── index.html


/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 James Gao
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # pixi-tutorials
 2 | pixi.js tutorials for [http://indienova.com][1]
 3 | 
 4 | 
 5 | ## The tutorials list
 6 | 
 7 | * __1-1__ pixi.js basic
 8 | 
 9 | ## Online tutorials
10 | 
11 | You can find the tutorials here:
12 | 
13 | [http://indienova.com/tag/pixi-js/][2]
14 | 
15 | __Note__ The tutorials are written in Simplified Chinese
16 | 
17 | [1]:	http://indienova.com "indienova"
18 | [2]:    http://indienova.com/tag/pixi-js/


--------------------------------------------------------------------------------
/assets/css/style.css:
--------------------------------------------------------------------------------
 1 | /** --- --- --- --- --- --- --- --- --- --- **/
 2 | body {
 3 |   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 4 |   color: #555555;
 5 | }
 6 | h3 {
 7 |   color: #555555;
 8 |   padding-bottom: 10px;
 9 |   border-bottom: 1px dotted #03437c;
10 |   margin: 20px 8px;
11 | }
12 | a {
13 |   color: #2c77c6;
14 |   text-decoration: none;
15 |   -webkit-transition: 0.2s ease-in;
16 |   -moz-transition: 0.2s ease-in;
17 |   -ms-transition: 0.2s ease-in;
18 |   -o-transition: 0.2s ease-in;
19 |   transition: 0.2s ease-in;
20 | }
21 | a:hover {
22 |   text-decoration: underline;
23 | }
24 | a.btn {
25 |   background-color: #2c77c6;
26 |   color: white;
27 |   padding: 10px 14px;
28 |   margin: 2px 4px;
29 |   border-radius: 6px;
30 |   -moz-border-radius: 6px;
31 |   -webkit-border-radius: 6px;
32 | }
33 | a.btn:hover {
34 |   background-color: #03437c;
35 |   text-decoration: none;
36 | }
37 | /** --- --- --- --- --- --- --- --- --- --- **/
38 | .menu {
39 |   margin: 0;
40 |   padding-left: 10px;
41 | }
42 | .menu li {
43 |   list-style: none;
44 |   display: block;
45 | }
46 | .menu li a {
47 |   display: block;
48 |   border-left: solid 5px #eeeeee;
49 |   padding: 10px 15px;
50 |   margin-bottom: 2px;
51 |   margin-right: 10px;
52 |   color: #555555;
53 | }
54 | .menu li a:hover {
55 |   text-decoration: none;
56 |   border-color: #2c77c6;
57 |   color: #2c77c6;
58 |   background-color: #eeeeee;
59 | }
60 | .text-center {
61 |   text-align: center;
62 |   margin-left: auto;
63 |   margin-right: auto;
64 | }
65 | 


--------------------------------------------------------------------------------
/assets/css/style.less:
--------------------------------------------------------------------------------
 1 | @color-link:        #2c77c6;
 2 | @color-link-hover:  #03437c;
 3 | @color-menu-link:   #555;
 4 | @color-gray:        #eee;
 5 | @color-white:       #f8f8f8;
 6 | 
 7 | .border-radius (@radius) {
 8 |   border-radius: @radius;
 9 |   -moz-border-radius: @radius;
10 |   -webkit-border-radius: @radius;
11 | }
12 | 
13 | .ani-ease-in (@time) {
14 |   -webkit-transition: @time ease-in;
15 |   -moz-transition: @time ease-in;
16 |   -ms-transition: @time ease-in;
17 |   -o-transition: @time ease-in;
18 |   transition: @time ease-in;
19 | }
20 | 
21 | /** --- --- --- --- --- --- --- --- --- --- **/
22 | 
23 | body {
24 |   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
25 |   color: @color-menu-link;
26 | }
27 | 
28 | h3 {
29 |   color: @color-menu-link;
30 |   padding-bottom: 10px;
31 |   border-bottom: 1px dotted @color-link-hover;
32 |   margin: 20px 8px;
33 | }
34 | 
35 | a {
36 |   color: @color-link;
37 |   text-decoration: none;
38 |   .ani-ease-in(0.2s);
39 | 
40 |   &:hover {
41 |     text-decoration: underline;
42 |   }
43 | 
44 |   &.btn {
45 |     background-color: @color-link;
46 |     color: white;
47 |     padding: 10px 14px;
48 |     margin: 2px 4px;
49 |     .border-radius(6px);
50 | 
51 |     &:hover {
52 |       background-color: @color-link-hover;
53 |       text-decoration: none;
54 |     }
55 |   }
56 | }
57 | 
58 | /** --- --- --- --- --- --- --- --- --- --- **/
59 | 
60 | .menu {
61 |   margin: 0;
62 |   padding-left: 10px;
63 | 
64 |   li {
65 |     list-style: none;
66 |     display: block;
67 | 
68 |     a {
69 |       display: block;
70 |       border-left: solid 5px @color-gray;
71 |       padding: 10px 15px;
72 |       margin-bottom: 2px;
73 |       margin-right: 10px;
74 |       color: @color-menu-link;
75 | 
76 |       &:hover {
77 |         text-decoration: none;
78 |         border-color: @color-link;
79 |         color: @color-link;
80 |         background-color: @color-gray;
81 |       }
82 |     }
83 |   }
84 | }
85 | 
86 | .text-center {
87 |   text-align: center;
88 |   margin-left: auto;
89 |   margin-right: auto;
90 | }


--------------------------------------------------------------------------------
/assets/img/BackDrop_01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/eastecho/pixi-tutorials/e2ffe72738c91d44e13030a0c27185eccad2a978/assets/img/BackDrop_01.png


--------------------------------------------------------------------------------
/assets/img/player.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/eastecho/pixi-tutorials/e2ffe72738c91d44e13030a0c27185eccad2a978/assets/img/player.png


--------------------------------------------------------------------------------
/html/t1-1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>pixi.js Tutorial 1 - 1</title>
 6 |     <link rel="stylesheet" href="../assets/css/style.css">
 7 |     <script src="../assets/js/pixi.min.js"></script>
 8 | </head>
 9 | <body>
10 | <script>
11 | 
12 |     // Keep the scale mode to nearest
13 |     PIXI.SCALE_MODES.DEFAULT = PIXI.SCALE_MODES.NEAREST;
14 | 
15 |     var renderer = PIXI.autoDetectRenderer(800, 450,{backgroundColor : 0x000000});
16 |     document.body.appendChild(renderer.view);
17 | 
18 |     // Create stage container
19 |     var stage = new PIXI.Container();
20 | 
21 |     // Create background sprite
22 |     var background = new PIXI.Sprite.fromImage('../assets/img/BackDrop_01.png');
23 |     background.width = renderer.width;
24 |     background.height = renderer.height;
25 |     stage.addChild(background);
26 | 
27 |     // Create another sprite
28 |     var player = new PIXI.Sprite.fromImage('../assets/img/player.png');
29 |     player.anchor.set(0.5);
30 |     player.position.set(renderer.width / 2, renderer.height / 2 + 136);
31 |     player.scale.x = 2;
32 |     player.scale.y = 2;
33 |     stage.addChild(player);
34 | 
35 |     // Loop the animation
36 |     animate();
37 |     function animate() {
38 |         requestAnimationFrame(animate);
39 | 
40 |         // Render stage
41 |         renderer.render(stage);
42 |     }
43 | 
44 | </script>
45 | 
46 | <p>
47 |     <a href="../index.html" class="btn">&lt; Go Back</a>
48 | </p>
49 | </body>
50 | </html>


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>pixi.js Tutorial Main Menu</title>
 6 |     <link rel="stylesheet" href="assets/css/style.css">
 7 | </head>
 8 | <body>
 9 | <h3>MENU<br><small>Main Menu for pixi.js Tutorial</small></h3>
10 | 
11 | <ul class="menu">
12 |     <li><a href="html/t1-1.html"><strong>Tutorial 1 - 1:</strong> Pixi Basic</a></li>
13 | </ul>
14 | </body>
15 | </html>


--------------------------------------------------------------------------------