Continued making the homepage convey info very quickly
This commit is contained in:
parent
32f6cf9bce
commit
dd9a82fb1a
23 changed files with 125 additions and 98 deletions
|
|
@ -7,5 +7,3 @@ Babble buds is a free, open source virtual puppet show software. It is heavily b
|
|||
Users can create puppets with different faces for different emotions, and then use the puppet on a stage where you and other users can each make your respective puppets move, change emotions, and "babble" at each other. The stage has a green screen feature and can be popped out, which gives the users tons of possibilities in terms of using the program for a role playing live stream, faux video chatting with friends, game development, or whatever else you want!
|
||||
|
||||
Users can connect to the public server and create private rooms so that they and their friends can see each others puppets and use the software however they please. For the security conscious, you can also use the server's source code to self host your own private server.
|
||||
|
||||
Credit to [@TheGravyNator](https://forums.urealms.com/profile/TheGravyNator) for the awesome puppet on display in the screenshot.
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
---
|
||||
layout: default
|
||||
title: Babble Buds Preview
|
||||
---
|
||||
|
||||
|
||||
<p class="card-caption">Screenshot showing the new interface available in a future version of Babble Buds</p>
|
||||
|
|
@ -87,25 +87,3 @@ nocard: true
|
|||
<input class="indicator" name="indicator" type="radio" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var carousel = document.getElementById('carousel');
|
||||
let slides = carousel.querySelectorAll('.slide');
|
||||
let indicators = carousel.querySelectorAll('.indicator');
|
||||
|
||||
function setSlide(slide) {
|
||||
return function() {
|
||||
// Reset all slides
|
||||
for (let i = 0; i < indicators.length; i++) {
|
||||
slides[i].classList.remove("active-slide");
|
||||
}
|
||||
|
||||
// Set defined slide as active
|
||||
slides[slide].classList.add("active-slide");
|
||||
};
|
||||
}
|
||||
|
||||
for (let i = 0; i < indicators.length; i++) {
|
||||
indicators[i].addEventListener("click", setSlide(i));
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -34,6 +34,23 @@
|
|||
|
||||
<body>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<div class="head head-background">
|
||||
<div class="breadcrumbs">
|
||||
{% if page.title != "The Paper Pilot" %}
|
||||
<h1><a href="/" style="color: #fff">The Paper Pilot</a></h1>
|
||||
{% else %}
|
||||
<h1>The Paper Pilot</h1>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if page.title != "The Paper Pilot" %}
|
||||
<h1 class="page-title">{{ page.title }}</h1>
|
||||
{% endif %}
|
||||
<div class="sections">
|
||||
{% for section in page.sections %}
|
||||
<div onClick="document.getElementById('{{ section }}').scrollIntoView({ behavior: 'smooth' });">{{ section }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="head">
|
||||
<div class="breadcrumbs">
|
||||
{% if page.title != "The Paper Pilot" %}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ title: Solar TD
|
|||
category: Game
|
||||
banner: solar
|
||||
cards: [Solar TD, Solar TD Screenshot 1, Solar TD Screenshot 2, Solar TD Screenshot 3, Solar TD Screenshot 4, Solar TD Screenshot 5, Solar TD Screenshot 6]
|
||||
featured: true
|
||||
links: ["Source Code|https://github.com/thepaperpilot/SolarTD", "Play Game|http://thepaperpilot.itch.io/solar-td"]
|
||||
tags: [java, libgdx]
|
||||
---
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ title: Fourth Order
|
|||
category: Game
|
||||
banner: fourth
|
||||
cards: [Fourth Order, Fourth Order Title]
|
||||
featured: true
|
||||
links: ["Source Code|https://github.com/thepaperpilot/fourth-order", "Play Game|https://thepaperpilot.itch.io/fourth-order"]
|
||||
tags: [java, libgdx, sgda]
|
||||
---
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ title: Shape Tycoon
|
|||
category: Game
|
||||
banner: shape
|
||||
cards: [Shape Tycoon, Shape Tycoon Screenshot 1, Shape Tycoon Screenshot 2, Shape Tycoon Screenshot 3, Shape Tycoon Screenshot 4, Shape Tycoon Screenshot 5]
|
||||
featured: true
|
||||
links: ["Source Code|https://github.com/thepaperpilot/shape-tycoon", "Play Game|https://thepaperpilot.itch.io/shape-tycoon", "Ludum Dare Entry|http://ludumdare.com/compo/ludum-dare-35/?action=preview&uid=90524"]
|
||||
tags: [java, libgdx, ludum dare]
|
||||
---
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ title: NaN
|
|||
category: Game
|
||||
banner: nan
|
||||
cards: [NaN, NaN Screenshot 1, NaN Screenshot 2, NaN Screenshot 3]
|
||||
featured: true
|
||||
links: ["Source Code|https://github.com/thepaperpilot/NaN", "Download Game|https://thepaperpilot.itch.io/nan"]
|
||||
tags: [python, pygame, chillenium]
|
||||
---
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ layout: default
|
|||
title: Babble Buds
|
||||
category: Software
|
||||
banner: babble
|
||||
cards: [Babble Buds Preview, Babble Buds, Babble Buds Screenshot, Engine, Movie Maker, Babble MM Screenshot]
|
||||
cards: [Babble Buds, Babble Buds Screenshot, Engine, Movie Maker, Babble MM Screenshot]
|
||||
links: ["Source Code|https://github.com/thepaperpilot/Babble-Buds", "URealms Post|https://forums.urealms.com/discussion/272/babble/p1", "Babble Buds Download Page|https://github.com/thepaperpilot/Babble-Buds/releases", "Babble Movie Maker Download Page|https://github.com/thepaperpilot/BabbleMovieMaker/releases"]
|
||||
tags: [javascript, pixi.js]
|
||||
---
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ title: Slime Chargers!
|
|||
category: Game
|
||||
banner: slime
|
||||
cards: [Slime Chargers Embed, Slime Chargers!, Slime Chargers Screenshot 1, Slime Chargers Screenshot 2, Slime Chargers Screenshot 3, Slime Chargers Screenshot 4]
|
||||
featured: true
|
||||
links: ["Source Code|https://github.com/thepaperpilot/Slime-Chargers", "Play Game|https://thepaperpilot.itch.io/ld39", "Ludum Dare Entry|https://ldjam.com/events/ludum-dare/39/slime-chargers"]
|
||||
tags: [javascript, pixi.js, ludum dare]
|
||||
---
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ title: Scripting for Games
|
|||
category: Game
|
||||
banner: scripting
|
||||
cards: [Scripting for Games Intro, Questable, Incarcerated, Start]
|
||||
featured: true
|
||||
links: ["Source Code|https://github.com/thepaperpilot/Scripting-For-Games", "Questable|/assets/scripting-assets/Questable/index.html", "Incarcerated|/assets/scripting-assets/Incarcerated/index.html", "Start|/assets/scripting-assets/Start/index.html"]
|
||||
tags: [c#, unity]
|
||||
---
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ title: Tower Offense
|
|||
category: Game
|
||||
banner: toweroffense
|
||||
cards: [Tower Offense Embed, Tower Offense, Tower Offense Screenshot 1, Tower Offense Screenshot 2, Tower Offense Screenshot 3]
|
||||
featured: true
|
||||
links: ["Source Code|https://github.com/thepaperpilot/Tower-Offense", "Play Game|https://thepaperpilot.itch.io/tower-offense"]
|
||||
tags: [javascript, pixi.js, chillenium]
|
||||
---
|
||||
|
|
|
|||
BIN
assets/babble-assets/babblemm screenshot.jpg
Normal file
BIN
assets/babble-assets/babblemm screenshot.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 343 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 334 KiB After Width: | Height: | Size: 872 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 424 KiB |
BIN
assets/babble-assets/screenshot.jpg
Normal file
BIN
assets/babble-assets/screenshot.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 223 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 521 KiB After Width: | Height: | Size: 549 KiB |
|
|
@ -7,27 +7,12 @@ let chatClicked = false // whether or not the chatbox has been clicked
|
|||
// Less than ideal process, but I don't know how to load JSON client side
|
||||
let stage = new babble.Stage("screen", {
|
||||
"numCharacters": 5,
|
||||
"puppetScale": 1,
|
||||
"assets": [
|
||||
{"name": "eyebrows"},
|
||||
{"name": "eyes"},
|
||||
{"name": "mouths"},
|
||||
{"name": "shirts"},
|
||||
{"name": "skin"},
|
||||
{"name": "glasses"},
|
||||
{"name": "hats"}
|
||||
]
|
||||
"puppetScale": 1
|
||||
}, {
|
||||
"eyebrows": {"94370077":{"name":"brow_excited","location":"eyebrows/94370077.png"},"-1478408941":{"name":"brow_normal","location":"eyebrows/-1478408941.png"},"-1370165314":{"name":"brow_confused","location":"eyebrows/-1370165314.png"},"-894109551":{"name":"brow_sad","location":"eyebrows/-894109551.png"},"-1624236206":{"name":"brow_angry","location":"eyebrows/-1624236206.png"}},
|
||||
"eyes": {"-679379193":{"name":"eyes_normal","location":"eyes/-679379193.png"}},
|
||||
"mouths": {"256135152":{"name":"mouth_teeth","location":"mouths/256135152.png"},"1802568030":{"name":"mouth_ooo","location":"mouths/1802568030.png"},"-1156489428":{"name":"mouth_normal","location":"mouths/-1156489428.png"},"-2006318913":{"name":"mouth_open","location":"mouths/-2006318913.png"},"-1834200705":{"name":"mouth_sad","location":"mouths/-1834200705.png"}},
|
||||
"shirts": {"1879914476":{"name":"body","location":"shirts/1879914476.png"}},
|
||||
"skin": {"-925878550":{"name":"head","location":"skin/-925878550.png"}},
|
||||
"glasses": {"-1259854622":{"name":"glasses_normal","location":"glasses/-1259854622.png"}},
|
||||
"hats": {"208380174":{"name":"kobold","location":"hats/208380174.png"},"354769791":{"name":"seachef","location":"hats/354769791.png"},"478565665":{"name":"tophat","location":"hats/478565665.png"},"-479894397":{"name":"elf","location":"hats/-479894397.png"},"-1611255066":{"name":"petalwalker","location":"hats/-1611255066.png"},"-5576877":{"name":"porc","location":"hats/-5576877.png"},"-1485571036":{"name":"wizard","location":"hats/-1485571036.png"}}
|
||||
"94370077":{"name":"brow_excited","location":"eyebrows/94370077.png"},"-1478408941":{"name":"brow_normal","location":"eyebrows/-1478408941.png"},"-1370165314":{"name":"brow_confused","location":"eyebrows/-1370165314.png"},"-894109551":{"name":"brow_sad","location":"eyebrows/-894109551.png"},"-1624236206":{"name":"brow_angry","location":"eyebrows/-1624236206.png"},"-679379193":{"name":"eyes_normal","location":"eyes/-679379193.png"},"256135152":{"name":"mouth_teeth","location":"mouths/256135152.png"},"1802568030":{"name":"mouth_ooo","location":"mouths/1802568030.png"},"-1156489428":{"name":"mouth_normal","location":"mouths/-1156489428.png"},"-2006318913":{"name":"mouth_open","location":"mouths/-2006318913.png"},"-1834200705":{"name":"mouth_sad","location":"mouths/-1834200705.png"},"1879914476":{"name":"body","location":"shirts/1879914476.png"},"-925878550":{"name":"head","location":"skin/-925878550.png"},"-1259854622":{"name":"glasses_normal","location":"glasses/-1259854622.png"},"208380174":{"name":"kobold","location":"hats/208380174.png"},"354769791":{"name":"seachef","location":"hats/354769791.png"},"478565665":{"name":"tophat","location":"hats/478565665.png"},"-479894397":{"name":"elf","location":"hats/-479894397.png"},"-1611255066":{"name":"petalwalker","location":"hats/-1611255066.png"},"-5576877":{"name":"porc","location":"hats/-5576877.png"},"-1485571036":{"name":"wizard","location":"hats/-1485571036.png"}
|
||||
}, "assets", loaded);
|
||||
let gravy = {"deadbonesStyle":false,"body":[{"tab":"shirts","hash":"1879914476","x":1.5,"y":-54,"rotation":0,"scaleX":1,"scaleY":1}],"head":[{"tab":"skin","hash":"-925878550","x":1,"y":-210.5,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"hats","hash":"478565665","x":-6,"y":-305,"rotation":0,"scaleX":1,"scaleY":1}],"hat":[],"mouths":["2","3","4","5"],"eyes":["0","1","5","6"],"emotes":[{"name":"default","enabled":true,"mouth":[{"tab":"mouths","hash":"-1156489428","x":-15.5,"y":-125,"rotation":0,"scaleX":1,"scaleY":1}],"eyes":[{"tab":"eyes","hash":"-679379193","x":-7,"y":-187.5,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"eyebrows","hash":"-1478408941","x":-6.5,"y":-210,"rotation":0,"scaleX":1,"scaleY":1}]},{"name":"happy","enabled":true,"mouth":[{"tab":"mouths","hash":"-1156489428","x":-16,"y":-125.5,"rotation":0,"scaleX":1,"scaleY":1}],"eyes":[{"tab":"eyes","hash":"-679379193","x":-7,"y":-187.5,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"eyebrows","hash":"94370077","x":-10.5,"y":-225,"rotation":0,"scaleX":1,"scaleY":1}]},{"name":"confused","enabled":true,"mouth":[{"tab":"mouths","hash":"256135152","x":-6,"y":-126.5,"rotation":0,"scaleX":1,"scaleY":1}],"eyes":[{"tab":"eyes","hash":"-679379193","x":-7,"y":-187.5,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"eyebrows","hash":"-1370165314","x":-9,"y":-212.5,"rotation":0,"scaleX":1,"scaleY":1}]},{"name":"gasp","enabled":true,"mouth":[{"tab":"mouths","hash":"-2006318913","x":-5.5,"y":-123.5,"rotation":0,"scaleX":1,"scaleY":1}],"eyes":[{"tab":"eyebrows","hash":"94370077","x":-10.5,"y":-225,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"eyes","hash":"-679379193","x":-7,"y":-187.5,"rotation":0,"scaleX":1,"scaleY":1}]},{"name":"ooo","enabled":true,"mouth":[{"tab":"mouths","hash":"1802568030","x":-2,"y":-122.5,"rotation":0,"scaleX":1,"scaleY":1}],"eyes":[{"tab":"eyebrows","hash":"94370077","x":-9.5,"y":-220,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"eyes","hash":"-679379193","x":-7,"y":-187.5,"rotation":0,"scaleX":1,"scaleY":1}]},{"name":"sad","enabled":true,"mouth":[{"tab":"mouths","hash":"-1834200705","x":-14.5,"y":-125.5,"rotation":0,"scaleX":1,"scaleY":1}],"eyes":[{"tab":"eyes","hash":"-679379193","x":-7,"y":-187.75,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"eyebrows","hash":"-894109551","x":-7.5,"y":-211.5,"rotation":0,"scaleX":1,"scaleY":1}]},{"name":"angry","enabled":true,"mouth":[{"tab":"mouths","hash":"256135152","x":-12,"y":-128.5,"rotation":0,"scaleX":1,"scaleY":1}],"eyes":[{"tab":"eyes","hash":"-679379193","x":-7,"y":-187.5,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"eyebrows","hash":"-1624236206","x":-7,"y":-207,"rotation":0,"scaleX":1,"scaleY":1}]},{"name":"wink","enabled":false,"mouth":[],"eyes":[]},{"name":"kiss","enabled":false,"mouth":[],"eyes":[]}],"props":[{"tab":"glasses","hash":"-1259854622","x":-3,"y":-158,"rotation":0,"scaleX":1,"scaleY":1}],"name":"Gravy","id":1,"position":0,"facingLeft":false,"emote":"0"}
|
||||
let not_gravy = {"deadbonesStyle":false,"body":[{"tab":"shirts","hash":"1879914476","x":1.5,"y":-54,"rotation":0,"scaleX":1,"scaleY":1}],"head":[{"tab":"skin","hash":"-925878550","x":1,"y":-210.5,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"eyebrows","hash":"-1624236206","x":-5,"y":-139,"rotation":0,"scaleX":0.6931818181818182,"scaleY":0.6470588235294116}],"hat":[],"mouths":["2","3","4","5"],"eyes":["0","1","5","6"],"emotes":[{"name":"default","enabled":true,"mouth":[{"tab":"mouths","hash":"-1156489428","x":-15.5,"y":-125,"rotation":0,"scaleX":1,"scaleY":1}],"eyes":[{"tab":"eyes","hash":"-679379193","x":-7,"y":-187.5,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"eyebrows","hash":"-1478408941","x":-6.5,"y":-210,"rotation":0,"scaleX":1,"scaleY":1}]},{"name":"happy","enabled":true,"mouth":[{"tab":"mouths","hash":"-1156489428","x":-16,"y":-125.5,"rotation":0,"scaleX":1,"scaleY":1}],"eyes":[{"tab":"eyes","hash":"-679379193","x":-7,"y":-187.5,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"eyebrows","hash":"94370077","x":-10.5,"y":-225,"rotation":0,"scaleX":1,"scaleY":1}]},{"name":"confused","enabled":true,"mouth":[{"tab":"mouths","hash":"256135152","x":-6,"y":-126.5,"rotation":0,"scaleX":1,"scaleY":1}],"eyes":[{"tab":"eyes","hash":"-679379193","x":-7,"y":-187.5,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"eyebrows","hash":"-1370165314","x":-9,"y":-212.5,"rotation":0,"scaleX":1,"scaleY":1}]},{"name":"gasp","enabled":true,"mouth":[{"tab":"mouths","hash":"-2006318913","x":-5.5,"y":-123.5,"rotation":0,"scaleX":1,"scaleY":1}],"eyes":[{"tab":"eyebrows","hash":"94370077","x":-10.5,"y":-225,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"eyes","hash":"-679379193","x":-7,"y":-187.5,"rotation":0,"scaleX":1,"scaleY":1}]},{"name":"ooo","enabled":true,"mouth":[{"tab":"mouths","hash":"1802568030","x":-2,"y":-122.5,"rotation":0,"scaleX":1,"scaleY":1}],"eyes":[{"tab":"eyebrows","hash":"94370077","x":-9.5,"y":-220,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"eyes","hash":"-679379193","x":-7,"y":-187.5,"rotation":0,"scaleX":1,"scaleY":1}]},{"name":"sad","enabled":true,"mouth":[{"tab":"mouths","hash":"-1834200705","x":-14.5,"y":-125.5,"rotation":0,"scaleX":1,"scaleY":1}],"eyes":[{"tab":"eyes","hash":"-679379193","x":-7,"y":-187.75,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"eyebrows","hash":"-894109551","x":-7.5,"y":-211.5,"rotation":0,"scaleX":1,"scaleY":1}]},{"name":"angry","enabled":true,"mouth":[{"tab":"mouths","hash":"256135152","x":-12,"y":-128.5,"rotation":0,"scaleX":1,"scaleY":1}],"eyes":[{"tab":"eyes","hash":"-679379193","x":-7,"y":-187.5,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"eyebrows","hash":"-1624236206","x":-7,"y":-207,"rotation":0,"scaleX":1,"scaleY":1}]},{"name":"wink","enabled":false,"mouth":[],"eyes":[]},{"name":"kiss","enabled":false,"mouth":[],"eyes":[]}],"props":[{"tab":"glasses","hash":"-1259854622","x":-3,"y":-158,"rotation":0,"scaleX":1,"scaleY":1}],"name":"Not Gravy","id":2,"position":6,"facingLeft":true,"emote":"0"}
|
||||
let gravy = {"deadbonesStyle":false,"body":[{"tab":"shirts","id":"1879914476","x":1.5,"y":-54,"rotation":0,"scaleX":1,"scaleY":1}],"head":[{"tab":"skin","id":"-925878550","x":1,"y":-210.5,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"hats","id":"478565665","x":-6,"y":-305,"rotation":0,"scaleX":1,"scaleY":1}],"hat":[],"mouths":["2","3","4","5"],"eyes":["0","1","5","6"],"emotes":[{"name":"default","enabled":true,"mouth":[{"tab":"mouths","id":"-1156489428","x":-15.5,"y":-125,"rotation":0,"scaleX":1,"scaleY":1}],"eyes":[{"tab":"eyes","id":"-679379193","x":-7,"y":-187.5,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"eyebrows","id":"-1478408941","x":-6.5,"y":-210,"rotation":0,"scaleX":1,"scaleY":1}]},{"name":"happy","enabled":true,"mouth":[{"tab":"mouths","id":"-1156489428","x":-16,"y":-125.5,"rotation":0,"scaleX":1,"scaleY":1}],"eyes":[{"tab":"eyes","id":"-679379193","x":-7,"y":-187.5,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"eyebrows","id":"94370077","x":-10.5,"y":-225,"rotation":0,"scaleX":1,"scaleY":1}]},{"name":"confused","enabled":true,"mouth":[{"tab":"mouths","id":"256135152","x":-6,"y":-126.5,"rotation":0,"scaleX":1,"scaleY":1}],"eyes":[{"tab":"eyes","id":"-679379193","x":-7,"y":-187.5,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"eyebrows","id":"-1370165314","x":-9,"y":-212.5,"rotation":0,"scaleX":1,"scaleY":1}]},{"name":"gasp","enabled":true,"mouth":[{"tab":"mouths","id":"-2006318913","x":-5.5,"y":-123.5,"rotation":0,"scaleX":1,"scaleY":1}],"eyes":[{"tab":"eyebrows","id":"94370077","x":-10.5,"y":-225,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"eyes","id":"-679379193","x":-7,"y":-187.5,"rotation":0,"scaleX":1,"scaleY":1}]},{"name":"ooo","enabled":true,"mouth":[{"tab":"mouths","id":"1802568030","x":-2,"y":-122.5,"rotation":0,"scaleX":1,"scaleY":1}],"eyes":[{"tab":"eyebrows","id":"94370077","x":-9.5,"y":-220,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"eyes","id":"-679379193","x":-7,"y":-187.5,"rotation":0,"scaleX":1,"scaleY":1}]},{"name":"sad","enabled":true,"mouth":[{"tab":"mouths","id":"-1834200705","x":-14.5,"y":-125.5,"rotation":0,"scaleX":1,"scaleY":1}],"eyes":[{"tab":"eyes","id":"-679379193","x":-7,"y":-187.75,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"eyebrows","id":"-894109551","x":-7.5,"y":-211.5,"rotation":0,"scaleX":1,"scaleY":1}]},{"name":"angry","enabled":true,"mouth":[{"tab":"mouths","id":"256135152","x":-12,"y":-128.5,"rotation":0,"scaleX":1,"scaleY":1}],"eyes":[{"tab":"eyes","id":"-679379193","x":-7,"y":-187.5,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"eyebrows","id":"-1624236206","x":-7,"y":-207,"rotation":0,"scaleX":1,"scaleY":1}]},{"name":"wink","enabled":false,"mouth":[],"eyes":[]},{"name":"kiss","enabled":false,"mouth":[],"eyes":[]}],"props":[{"tab":"glasses","id":"-1259854622","x":-3,"y":-158,"rotation":0,"scaleX":1,"scaleY":1}],"name":"Gravy","id":1,"position":0,"facingLeft":false,"emote":"0"}
|
||||
let not_gravy = {"deadbonesStyle":false,"body":[{"tab":"shirts","id":"1879914476","x":1.5,"y":-54,"rotation":0,"scaleX":1,"scaleY":1}],"head":[{"tab":"skin","id":"-925878550","x":1,"y":-210.5,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"eyebrows","id":"-1624236206","x":-5,"y":-139,"rotation":0,"scaleX":0.6931818181818182,"scaleY":0.6470588235294116}],"hat":[],"mouths":["2","3","4","5"],"eyes":["0","1","5","6"],"emotes":[{"name":"default","enabled":true,"mouth":[{"tab":"mouths","id":"-1156489428","x":-15.5,"y":-125,"rotation":0,"scaleX":1,"scaleY":1}],"eyes":[{"tab":"eyes","id":"-679379193","x":-7,"y":-187.5,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"eyebrows","id":"-1478408941","x":-6.5,"y":-210,"rotation":0,"scaleX":1,"scaleY":1}]},{"name":"happy","enabled":true,"mouth":[{"tab":"mouths","id":"-1156489428","x":-16,"y":-125.5,"rotation":0,"scaleX":1,"scaleY":1}],"eyes":[{"tab":"eyes","id":"-679379193","x":-7,"y":-187.5,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"eyebrows","id":"94370077","x":-10.5,"y":-225,"rotation":0,"scaleX":1,"scaleY":1}]},{"name":"confused","enabled":true,"mouth":[{"tab":"mouths","id":"256135152","x":-6,"y":-126.5,"rotation":0,"scaleX":1,"scaleY":1}],"eyes":[{"tab":"eyes","id":"-679379193","x":-7,"y":-187.5,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"eyebrows","id":"-1370165314","x":-9,"y":-212.5,"rotation":0,"scaleX":1,"scaleY":1}]},{"name":"gasp","enabled":true,"mouth":[{"tab":"mouths","id":"-2006318913","x":-5.5,"y":-123.5,"rotation":0,"scaleX":1,"scaleY":1}],"eyes":[{"tab":"eyebrows","id":"94370077","x":-10.5,"y":-225,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"eyes","id":"-679379193","x":-7,"y":-187.5,"rotation":0,"scaleX":1,"scaleY":1}]},{"name":"ooo","enabled":true,"mouth":[{"tab":"mouths","id":"1802568030","x":-2,"y":-122.5,"rotation":0,"scaleX":1,"scaleY":1}],"eyes":[{"tab":"eyebrows","id":"94370077","x":-9.5,"y":-220,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"eyes","id":"-679379193","x":-7,"y":-187.5,"rotation":0,"scaleX":1,"scaleY":1}]},{"name":"sad","enabled":true,"mouth":[{"tab":"mouths","id":"-1834200705","x":-14.5,"y":-125.5,"rotation":0,"scaleX":1,"scaleY":1}],"eyes":[{"tab":"eyes","id":"-679379193","x":-7,"y":-187.75,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"eyebrows","id":"-894109551","x":-7.5,"y":-211.5,"rotation":0,"scaleX":1,"scaleY":1}]},{"name":"angry","enabled":true,"mouth":[{"tab":"mouths","id":"256135152","x":-12,"y":-128.5,"rotation":0,"scaleX":1,"scaleY":1}],"eyes":[{"tab":"eyes","id":"-679379193","x":-7,"y":-187.5,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"eyebrows","id":"-1624236206","x":-7,"y":-207,"rotation":0,"scaleX":1,"scaleY":1}]},{"name":"wink","enabled":false,"mouth":[],"eyes":[]},{"name":"kiss","enabled":false,"mouth":[],"eyes":[]}],"props":[{"tab":"glasses","id":"-1259854622","x":-3,"y":-158,"rotation":0,"scaleX":1,"scaleY":1}],"name":"Not Gravy","id":2,"position":6,"facingLeft":true,"emote":"0"}
|
||||
let start = "delay 1000;\n" +
|
||||
"add gravy 1 0;\n" +
|
||||
"add not_gravy 2 6;\n" +
|
||||
|
|
|
|||
BIN
assets/dicearmor-assets/da2.jpg
Normal file
BIN
assets/dicearmor-assets/da2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 583 KiB |
BIN
assets/dicearmor-assets/editors.jpg
Normal file
BIN
assets/dicearmor-assets/editors.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
46
css/main.css
46
css/main.css
|
|
@ -195,13 +195,12 @@ button.accordion:focus {
|
|||
|
||||
.head {
|
||||
color: white;
|
||||
background-color: #333c4a;
|
||||
padding: 20px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
|
@ -211,6 +210,12 @@ button.accordion:focus {
|
|||
flex-basis: 50%;
|
||||
}
|
||||
|
||||
.head.head-background {
|
||||
color: transparent;
|
||||
background-color: #333c4a;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.sections {
|
||||
text-align: right;
|
||||
}
|
||||
|
|
@ -226,7 +231,14 @@ button.accordion:focus {
|
|||
#intro {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: #333c4a;
|
||||
background-color: #333c4a;
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#intro + .section {
|
||||
margin-top: calc(100vh - 150px);
|
||||
}
|
||||
|
||||
#intro canvas {
|
||||
|
|
@ -244,9 +256,9 @@ button.accordion:focus {
|
|||
transform: translate(-50%, -50%);
|
||||
color: white;
|
||||
font-size: xx-large;
|
||||
background: rgba(1, 1, 1, .2);
|
||||
background-color: #242a33;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#controls {
|
||||
|
|
@ -257,9 +269,9 @@ button.accordion:focus {
|
|||
transform: translate(-50%, -50%);
|
||||
color: grey;
|
||||
font-size: 250%;
|
||||
background: rgba(1, 1, 1, .1);
|
||||
background-color: #242a3388;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
border-radius: 2px;
|
||||
text-align: center;
|
||||
transition: opacity 1s ease;
|
||||
}
|
||||
|
|
@ -279,6 +291,15 @@ button.accordion:focus {
|
|||
padding-top: 150px;
|
||||
}
|
||||
|
||||
.head + .section {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.section h1 {
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (max-device-width: 480px) {
|
||||
.head {
|
||||
padding: 10px;
|
||||
|
|
@ -336,6 +357,10 @@ button.accordion:focus {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.card-content .card-image {
|
||||
margin: 0 -20px 20px -20px;
|
||||
}
|
||||
|
||||
.card .card-image img {
|
||||
display: block;
|
||||
border-radius: 2px 2px 0 0;
|
||||
|
|
@ -482,7 +507,6 @@ footer ul li {
|
|||
.card {
|
||||
background-color: #242a33;
|
||||
color: #fff;
|
||||
box-shadow: 2px 2px 3px #222;
|
||||
position: relative;
|
||||
margin: 0.5rem 0 1rem 0;
|
||||
transition: box-shadow .25s;
|
||||
|
|
@ -518,6 +542,12 @@ footer ul li {
|
|||
background-color: #333c4a;
|
||||
}
|
||||
|
||||
.card-content .card-image.shrink {
|
||||
width: 50%;
|
||||
margin: auto;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.card-content p img {
|
||||
display: block;
|
||||
border-radius: 2px 2px 0 0;
|
||||
|
|
|
|||
77
index.html
77
index.html
|
|
@ -3,10 +3,10 @@ layout: default
|
|||
title: The Paper Pilot
|
||||
nocard: true
|
||||
sections: [intro, about, featured, favorites]
|
||||
featured: [Dice Armor, Babble Buds]
|
||||
favorites: [NaN, Tower Offense, Slime Chargers!]
|
||||
---
|
||||
<div id="intro">
|
||||
<div id="controls">Use <img class="inline" src="assets/home/arrowLeft.png" />, <img class="inline" src="assets/home/arrowUp.png" />, <img class="inline" src="assets/home/arrowRight.png" />, and <img class="inline" src="assets/home/deviceTilt.png" /> to control me!</div>
|
||||
<div id="controls">Use <img class="inline" src="assets/home/arrowLeft.png" />, <img class="inline" src="assets/home/arrowUp.png" />, <img class="inline" src="assets/home/arrowRight.png" />, <img class="inline" src="assets/home/deviceTilt.png" />, and <span style="color: white">1-7</span> to control me!</div>
|
||||
<div id="current_chat"></div>
|
||||
</div>
|
||||
|
||||
|
|
@ -20,44 +20,57 @@ featured: [Dice Armor, Babble Buds]
|
|||
</div>
|
||||
|
||||
<div class="section" id="featured">
|
||||
{% for project in page.featured %}
|
||||
{% assign post = site.posts | where:"title",project | first %}
|
||||
<div class="card" style="padding-bottom: calc(1rem + 40px);">
|
||||
<div class="card-image">
|
||||
<img src="/assets/banners/{{ post.banner }}.png">
|
||||
<span class="card-title" style="font-weight: 500;">{{ project }}</span>
|
||||
</div>
|
||||
<h1>Featured Projects</h1>
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
{{ post.content }}
|
||||
</div>
|
||||
<div class="card-action" style="position: absolute; bottom: 0; width: 100%;">
|
||||
<a href="{{ post.url }}">read more</a>
|
||||
<span class="card-title">I made Babble Buds!</span>
|
||||
<div class="card-image">
|
||||
<img src="/assets/babble-assets/screenshot.jpg">
|
||||
</div>
|
||||
<p>Babble Buds is a free, open source virtual puppet show engine I made for web and unity, as well as an accompanying electron-based puppet editor and multiplayer stage. Use it for enhancing your digital tabletop roleplaying game, creating silly videos, or even scripting cutscenes in a videogame!</p>
|
||||
<div class="card-image">
|
||||
<img src="/assets/babble-assets/babblemm screenshot.jpg">
|
||||
</div>
|
||||
<a href="/babble">read more</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<span class="card-title">I was the lead programmer on Dice Armor!</span>
|
||||
<div class="card-image">
|
||||
<img src="/assets/dicearmor-assets/da2.jpg">
|
||||
</div>
|
||||
<p>I was the lead programmer on a team of nine creating this game in a semester long college course. I programmed all the gameplay systems as well as incorporated Babble Buds for the cutscenes and tutorial.</p>
|
||||
<div class="card-image">
|
||||
<img src="/assets/dicearmor-assets/editors.jpg">
|
||||
</div>
|
||||
<p>During the development of this game I discovered my passion for building tools for the game designers to be able to create content as quickly and easily as possible. I even designed a custom editor window that would run simulated matches between two AI opponents to help the game designers test and balance the dice and opponents.
|
||||
<div class="card-image shrink">
|
||||
<img src="/assets/dicearmor-assets/simulator.JPG">
|
||||
</div>
|
||||
<a href="/dicearmor">read more</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="section" id="favorites">
|
||||
<div class="card">
|
||||
{% assign projects = site.posts | where:"featured","true" %}
|
||||
{% for project in projects %}
|
||||
<div class="accordion">
|
||||
{{ project.title }}
|
||||
|
||||
{% for tag in project.tags %}
|
||||
<div class="chip"><a href="/tags/#{{ tag | slugify }}"> {{ tag }} </a></div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="card-image">
|
||||
<img src="/assets/banners/{{ project.banner }}.png">
|
||||
<h1>Favorite Projects</h1>
|
||||
{% for project in page.favorites %}
|
||||
{% for page in site.posts %}
|
||||
{% if page.title == project %}
|
||||
<div class="card">
|
||||
<div class="card-content" markdown="1">
|
||||
<span class="card-title">{{ page.title }}</span>
|
||||
<div class="card-image">
|
||||
<img src="/assets/banners/{{ page.banner }}.png">
|
||||
</div>
|
||||
{{ page.content }}
|
||||
<a href="{{ page.url }}"> read more</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content desc" markdown="1">
|
||||
{{ project.content }} <a href="{{ project.url }}"> read more</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.rawgit.com/thepaperpilot/babble.js/master/dist/babble.js"></script>
|
||||
|
|
|
|||
20
js/index.js
20
js/index.js
|
|
@ -53,3 +53,23 @@ function fullscreen() {
|
|||
|
||||
let btn = document.getElementById('fullscreenBtn')
|
||||
if (btn) btn.addEventListener('click', fullscreen)
|
||||
|
||||
var carousel = document.getElementById('carousel');
|
||||
let slides = carousel.querySelectorAll('.slide');
|
||||
let indicators = carousel.querySelectorAll('.indicator');
|
||||
|
||||
function setSlide(slide) {
|
||||
return function() {
|
||||
// Reset all slides
|
||||
for (let i = 0; i < indicators.length; i++) {
|
||||
slides[i].classList.remove("active-slide");
|
||||
}
|
||||
|
||||
// Set defined slide as active
|
||||
slides[slide].classList.add("active-slide");
|
||||
};
|
||||
}
|
||||
|
||||
for (let i = 0; i < indicators.length; i++) {
|
||||
indicators[i].addEventListener("click", setSlide(i));
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue