advanced_frontend_development_exercises/exercise_pixi_gunshot.html at master · edankwan/advanced_frontend_development_exercises · GitHub

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
<html>
<head>
    <meta charset="utf-8">
    <title>Gun shoot effect</title>
    <meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link href='http://fonts.googleapis.com/css?family=Lato:700|Oswald:400' rel='stylesheet' type='text/css'>
    <style>
        html, body {
            position: absolute;
            width: 100%;
            height: 100%;
            margin: 0 0;
            overflow: hidden;
            background-color: #000;
            font-family: 'Oswald', sans-serif;
            color: #fff;
        }
        ::selection {
          background: transparent;
        }
        ::-moz-selection {
          background: transparent;
        }
        a {
            color: #ff5f5f;
        }
    </style>
</head>

<body>
    <script src="js/dat.gui.js"></script>
    <script src="js/speakUtils.js"></script>
    <script src="js/pixi.js"></script>
    <script src="js/TweenMax.js"></script>

    <script id="shader-fs" type="x-shader/x-fragment">

        precision mediump float;

        varying vec2 vTextureCoord;
        uniform sampler2D uSampler;

        #define PI 3.1415926535

        float rand(vec2 co){
            return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
        }

        void main(void) {

            gl_FragColor = texture2D(uSampler, vTextureCoord);

        }
    </script>

    <script>

        var config = {
            animation: 0
        };

        var windowWidth;
        var windowHeight;

        var stats;
        var resources;

        var renderer;
        var stage;

        var sprite;
        var uniforms;

        var gui;

        var isPreloaded = false;

        function init() {

            gui = new dat.GUI();

            renderer = new PIXI.WebGLRenderer(1, 1);
            stage = stage = new PIXI.Container();
            document.body.appendChild(renderer.view);

            sprite = new PIXI.Sprite(new PIXI.Texture(new PIXI.BaseTexture(resources.base)));

            stage.addChild(sprite);

            window.onresize = onResize;
            onResize();

            loop();

        }

        function onResize() {
            windowWidth = window.innerWidth;
            windowHeight = window.innerHeight;
            renderer.resize(windowWidth, windowHeight);

            render();
        }

        function loop() {
            requestAnimationFrame(loop);
            render();
        }

        function render() {
            renderer.render(stage);
        }

        function preload() {
            speakUtils.preload([
                {id: 'base', url: 'images/gun_base.jpg', type: 'image'},
                {id: 'overlay', url: 'images/gun_overlay.jpg', type: 'image'}
            ], function(percent, items) {
                resources = resources || items.contents;
                if(percent == 1 && !isPreloaded) {
                    isPreloaded = true;
                    init();
                }
            });
        }
        preload();

    </script>
</body>
</html>