Skip to content

A
Angular-Pixijs-Game
Commit d581cc59 authored by Richard Torenvliet's avatar Richard Torenvliet
Browse files
Options

Update game, worked on game itself

parent 7271f6f6
Show whitespace changes
Inline Side-by-side
Showing with 294 additions and 148 deletions
src/app/game/tapdance/tapdance-game.js
View file @ d581cc59
angular.module('Interactive.game.tapdance.game', [
'ui.router',
'ui.bootstrap',
'Interactive.game.tapdance.result'
])
.config(function($stateProvider) {
$stateProvider
.state('game-tapdance-game', {
url: '/tapdance-game',
views: {
'main': {
controller: 'gameCtrl',
templateUrl: 'game/tapdance/tapdance-game.tpl.html'
}
},
data: { pageTitle: 'Tapdance Game' }
}
);
})
.controller( 'gameCtrl', function IndexController($scope) {
$scope.start_button = {};
$scope.game = false;
$scope.start_button.click = function(event) {
$scope.game = true;
};
})
.directive('pixi', function($parse, $state) {
return {
restrict: 'A',
scope: true,
controller: function($scope, $element, $attrs, $document, $window) {
// init the first element
$element = $element[0];
var game_div = document.getElementsByClassName('game-background')[0];
var width = game_div.scrollWidth;
var height = 600;
console.log(width, height);
// TODO: set color from options
var stage = new PIXI.Stage();
// create the root of the scene graph
var renderer = PIXI.autoDetectRenderer(width, height,
{view: $element,
transparent: true});
var jeans = PIXI.Sprite.fromImage('/assets/jeans_plane.png');
var bg = PIXI.Sprite.fromImage('/assets/jeans_cutout.png');
var water = PIXI.Sprite.fromImage('/assets/water.png');
bg.width = renderer.width;
bg.height = renderer.height;
jeans.width = renderer.width;
jeans.height = renderer.height;
water.width = renderer.width;
water.height = renderer.height;
stage.addChild(jeans);
stage.addChild(water);
stage.addChild(bg);
animate();
function animate() {
renderer.render(stage);
requestAnimFrame(animate);
if ($scope.game) {
water.position.y += 1;
if (water.position.y > 500) {
$scope.$apply(function() {
$scope.game = false;
$state.go('game-tapdance-result');
});
}
}
}
}
};
})
;
//var init = function(rendererType, transparent, antialias, element) {
// if (!stage) {
// // create a new instance of a pixi stage
// stage = new PIXI.Stage(0x66FF99);
// stageAttr.assign($scope, stage);
// }
// switch(rendererType) {
// case 'canvas':
// renderer = new PIXI.CanvasRenderer(width, height, $element, transparent);
// break;
// case 'webgl':
// try {
// renderer = new PIXI.WebGLRenderer(width, height, $element, transparent, antialias);
// } catch (e) {
// $scope.$emit('pixi.webgl.init.exception', e);
// return;
// }
// break;
// default:
// renderer = new PIXI.autoDetectRenderer(width, height, {view: $element}, transparent, antialias);
// }
// return renderer;
//};
//init(renderType, transparent, antialias, $element);
//this.render = function render(force) {
// var doRender = true;
// if (renderFunc) {
// doRender = renderFunc(stage, this.renderer);
// }
// // render the stage
// if (force || doRender !== false) {
// this.renderer.render(stage);
// }
//};
//// create a texture from an image path
//var texture = PIXI.Texture.fromImage("/assets/bunny.png");
//// create a new Sprite using the texture
//var bunny = new PIXI.Sprite(texture);
//// center the sprites anchor point
//bunny.anchor.x = 0.5;
//bunny.anchor.y = 0.5;
//// move the sprite t the center of the screen
//bunny.position.x = width / 2;
//bunny.position.y = height / 2;
//function renderLoop() {
// self.render();
// bunny.rotation += 0.1;
// requestAnimFrame( renderLoop );
//}
//// add the renderer view element to the DOM
////document.body.appendChild(renderer.view);
//this.getStage = function() {
// return stage;
//};
//this.getRenderer = function() {
// return this.renderer;
//};
//this.getContext = function() {
// return this.renderer.gl ? this.renderer.gl : this.renderer.context;
//};
//this.getStage().addChild(bunny);
//requestAnimFrame( renderLoop );
////($window).resize(function() {
//// renderer.resize(element.width(), element.height());
////});
//}
//};
src/app/game/tapdance/tapdance-game.tpl.html 0 → 100644
View file @ d581cc59
<div class="game-background">
<img ng-show='!game' class="bg-image" src="/assets/jeans_bg.jpg" alt='bg'/>
<div ng-show='!game' class="popup gold">
<h1 class="text-center">TRYOUT</h1>
<p class="text-center">Before you start dancing</p>
<p class="text-center">try out how it's done</p>
<div class="button-modal button-go">
<a ng-click="start_button.click($event)"
class="button">LET'S GO</a>
</div>
</div>
<div ng-show='game' class="game">
<img class="bg-image" src="/assets/jeans_bg_white.jpg" alt='bg'/>
<canvas pixi="stage" class="tapdance" pixi-render="pixiRender"
pixi-transparent="true" pixi-renderer="'webgl'"></canvas>
</div>
</div>
src/app/game/tapdance/tapdance-how2play.js
View file @ d581cc59
angular.module('Interactive.game.tapdance.how2play', [ angular.module('Interactive.game.tapdance.how2play', [
'ui.router', 'ui.router',
'ui.bootstrap' 'ui.bootstrap',
'Interactive.game.tapdance.game'
]) ])
.config(function($stateProvider) { .config(function($stateProvider) {
......
src/app/game/tapdance/tapdance-index.tpl.html
View file @ d581cc59
<div class="game-background"> <div class="game-background">
<img class="bg-image" src="/assets/bg.jpg" alt='bg'/> <img class="bg-image" src="/assets/bg.jpg" alt='bg'/>
<div class="popup"> <div class="popup white">
<h1 class="text-center">TAP DANCE</h1> <h1 class="text-center">TAP DANCE</h1>
<p class="text-center">Help your conscience and save water</p> <p class="text-center">Help your conscience and save water</p>
<a ui-sref='game-tapdance-how2play' class="btn btn-default center-block play-now">PLAY NOW</a>
<div class="button-modal button-play">
<a ui-sref='game-tapdance-how2play'
class="button">LET'S GO
</a>
</div>
</div> </div>
</div> </div>
src/app/game/tapdance/tapdance-result.js 0 → 100644
View file @ d581cc59
angular.module('Interactive.game.tapdance.result', [
'ui.router',
'ui.bootstrap'
])
.config(function($stateProvider) {
$stateProvider
.state('game-tapdance-result', {
url: '/tapdance-result',
views: {
'main': {
controller: 'resultCtrl',
templateUrl: 'game/tapdance/tapdance-result.tpl.html'
}
},
data: { pageTitle: 'Tapdance Result' }
}
);
})
.controller( 'resultCtrl', function IndexController($scope) {
});
src/app/game/tapdance/tapdance-result.tpl.html 0 → 100644
View file @ d581cc59
<div class="game-background">
<img class="bg-image" src="/assets/bg.jpg" alt='bg'/>
<a><img class="popup-image" src="/assets/result_overlay.png" alt='bg'/></a>
</div>
src/app/index/index.js
View file @ d581cc59
angular.module('Interactive.index', [ angular.module('Interactive.index', [
'Interactive.pixi',
'ui.router' 'ui.router'
]) ])
......
src/app/pixi/pixi.js
View file @ d581cc59
angular.module('Interactive.pixi', [ angular.module('Interactive.pixi', [
]) ]);
.directive('pixi', function($parse) {
return {
restrict: 'A',
scope: true,
controller: function($scope, $element, $attrs, $document) {
// init the first element
$element = $element[0];
var width = $element.width || 800;
var height = $element.height || 400;
// TODO: set color from options
var stage = new PIXI.Stage();
var renderer = PIXI.autoDetectRenderer(width, height,
{view: $element});
renderer.view.style.height = window.innerHeight;
renderer.view.style.width = window.innerWidth;
renderer.view.style.display = 'block';
var bg_texture = PIXI.Texture.fromImage('/assets/images/mario_bg.png');
var bg = new PIXI.TilingSprite(bg_texture, width, height - 20);
bg.position.x = 0;
bg.position.y = 0;
bg.tilePosition.x = 0;
bg.tilePosition.y = 0;
//, TODO calculate scaling
stage.addChild(bg);
requestAnimFrame(animate);
function animate() {
bg.tilePosition.x -= 0.5;
requestAnimFrame(animate);
renderer.render(stage);
}
}
};
})
;
//var init = function(rendererType, transparent, antialias, element) {
// if (!stage) {
// // create a new instance of a pixi stage
// stage = new PIXI.Stage(0x66FF99);
// stageAttr.assign($scope, stage);
// }
// switch(rendererType) {
// case 'canvas':
// renderer = new PIXI.CanvasRenderer(width, height, $element, transparent);
// break;
// case 'webgl':
// try {
// renderer = new PIXI.WebGLRenderer(width, height, $element, transparent, antialias);
// } catch (e) {
// $scope.$emit('pixi.webgl.init.exception', e);
// return;
// }
// break;
// default:
// renderer = new PIXI.autoDetectRenderer(width, height, {view: $element}, transparent, antialias);
// }
// return renderer;
//};
//init(renderType, transparent, antialias, $element);
//this.render = function render(force) {
// var doRender = true;
// if (renderFunc) {
// doRender = renderFunc(stage, this.renderer);
// }
// // render the stage
// if (force || doRender !== false) {
// this.renderer.render(stage);
// }
//};
//// create a texture from an image path
//var texture = PIXI.Texture.fromImage("/assets/bunny.png");
//// create a new Sprite using the texture
//var bunny = new PIXI.Sprite(texture);
//// center the sprites anchor point
//bunny.anchor.x = 0.5;
//bunny.anchor.y = 0.5;
//// move the sprite t the center of the screen
//bunny.position.x = width / 2;
//bunny.position.y = height / 2;
//function renderLoop() {
// self.render();
// bunny.rotation += 0.1;
// requestAnimFrame( renderLoop );
//}
//// add the renderer view element to the DOM
////document.body.appendChild(renderer.view);
//this.getStage = function() {
// return stage;
//};
//this.getRenderer = function() {
// return this.renderer;
//};
//this.getContext = function() {
// return this.renderer.gl ? this.renderer.gl : this.renderer.context;
//};
//this.getStage().addChild(bunny);
//requestAnimFrame( renderLoop );
////($window).resize(function() {
//// renderer.resize(element.width(), element.height());
////});
//}
//};
src/less/main.less
View file @ d581cc59
...@@ -20,11 +20,22 @@ ...@@ -20,11 +20,22 @@
@import 'variables.less'; @import 'variables.less';
* {
margin: 0;
padding: 0;
}
body { body {
font-family: MyriadPro, 'Myriad Pro', Helvetica, Arial, sans-serif; font-family: MyriadPro, 'Myriad Pro', Helvetica, Arial, sans-serif;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow:hidden; overflow:hidden;
text-align:center;
}
.container {
width: 375px;
margin: 0 auot;
} }
...@@ -150,44 +161,70 @@ h2 { ...@@ -150,44 +161,70 @@ h2 {
img.bg-image { img.bg-image {
position: absolute; position: absolute;
top: -90px;
left: 0; left: 0;
height: 667px; height: 667px;
width: auto; width: auto;
z-index: 0; z-index: -1;
} }
.popup-image { .popup-image {
position: absolute; width: 380px;
width: 250px;
left: 20%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
.popup { .popup {
line-height: 0.5em;
margin-left: auto;
margin-right: auto;
padding: 1.5em;
position: relative;
top: 80px;
width: 300px;
}
.gold {
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
background: #e7d878;
border-radius: 30px;
color: white;
}
.gold a.button {
background-color: #d0b745;
}
.button-modal {
margin: 3em 0em 1em 0em;
}
.popup a {
color: white;
font-size: 2em;
}
.popup a.button {
margin-top: 2em;
padding: 0.5em 2em 0.5em 2em;
}
.white {
-moz-border-radius: 30px; -moz-border-radius: 30px;
-webkit-border-radius: 30px; -webkit-border-radius: 30px;
background: white; background: white;
border-radius: 30px; border-radius: 30px;
color: #d0b745; color: #d0b745;
left: 10%;
margin-left: auto;
margin-right: auto;
padding: 3em;
position: absolute;
top: 40px;
width: 300px;
} }
.popup h1 { .white h1 {
font-weight: bold; font-weight: bold;
} }
.popup button { .white .button {
background-color: #e7d878; background-color: #e7d878;
color: white; color: white;
font-size: 3em;
} }
...@@ -195,3 +232,13 @@ img.bg-image { ...@@ -195,3 +232,13 @@ img.bg-image {
and (min-device-width : 375px) and (min-device-width : 375px)
and (max-device-width : 667px) and (max-device-width : 667px)
and (orientation : portrait) { /* STYLES GO HERE */ } and (orientation : portrait) { /* STYLES GO HERE */ }
canvas {
}
canvas.tapdance {
position: absolute;
top: 20px;
left: 0px;
z-index: 2;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment