Updated puppet and projects
1
.gitignore
vendored
|
@ -1 +1,2 @@
|
|||
_site/
|
||||
.jekyll-cache/
|
||||
|
|
BIN
Boids.mp4
5
_content/citadel/screenshot.md
Normal file
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
layout: default
|
||||
title: CtC Screenshot
|
||||
---
|
||||
![Screenshot](/assets/citadel-assets/screenshot.png)
|
5
_content/citadel/summary.md
Normal file
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
layout: default
|
||||
title: CtC Summary
|
||||
---
|
||||
A 3D VR re-envisioning of a Slay the Spire-style game by Anthony Lawn and Grant Barbee for their VR class in college's final project.
|
5
_content/dicearmor/da1-caption.md
Normal file
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
layout: default
|
||||
title: da1-caption
|
||||
---
|
||||
I created the Babble Buds puppet editor and ported the rendering library I wrote for it to C# so it could be used in Unity. Dice Armor has a full campaign using cutscenes made using the Babble Buds cutscene editor, taking advantage of its support for custom commands and fields to control things like talking, giving the player dice and money, starting duels, and controlling player progression through the story.
|
5
_content/dicearmor/da1.md
Normal file
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
layout: default
|
||||
title: da1
|
||||
---
|
||||
![da1](/assets/dicearmor-assets/da1.png)
|
6
_content/dicearmor/da2-caption.md
Normal file
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
layout: default
|
||||
title: da2-caption
|
||||
---
|
||||
Dice Armor is a dice dueling game. Players can use abilities, flip dice, and attack each other to win in a dice game that puts chance into the hands of the players. This is what the dueling scene looks like, with a tutorial cutscene happening on top to guide the player through the basics.
|
||||
Also, all the dice are constructed dynamically, using quaternion math to figure out the placement of each component relative to the face its going on. The die in the middle has one of the player and opponents' portraits on each of its sides.
|
5
_content/dicearmor/da2.md
Normal file
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
layout: default
|
||||
title: da2
|
||||
---
|
||||
![da2](/assets/dicearmor-assets/da2.png)
|
5
_content/dicearmor/da3-caption.md
Normal file
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
layout: default
|
||||
title: da3-caption
|
||||
---
|
||||
The dice rolling uses the physics engine and detects once the dice have stopped moving, then determines which side is face up based on which of the normals is closest to straight up. It flags the die as cocked if that smallest angle is above a threshold. The dice sink into the table when not rolling so as to not interfere with any dice that are rolling.
|
5
_content/dicearmor/da3.md
Normal file
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
layout: default
|
||||
title: da3
|
||||
---
|
||||
![da3](/assets/dicearmor-assets/da3.png)
|
5
_content/dicearmor/da4-caption.md
Normal file
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
layout: default
|
||||
title: da4-caption
|
||||
---
|
||||
There is a generic object dragging manager using delegates to check for valid things to drag, valid things to be dragged to (based on whats being dragged), getting a list of transforms to add the target indicator to, and what to do when the drag ends, on both a valid and invalid target. In this case its being used to drag a die to another die, telling the game to attack with the die.
|
5
_content/dicearmor/da4.md
Normal file
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
layout: default
|
||||
title: da4
|
||||
---
|
||||
![da4](/assets/dicearmor-assets/da4.png)
|
5
_content/dicearmor/da5-caption.md
Normal file
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
layout: default
|
||||
title: da5-caption
|
||||
---
|
||||
In addition to attacking and flipping dice, the player can use abilities that appear on some of the faces of most of the dice. I made an interface for abilities that supports targeted, non-targeted, instant, and lingering effects. Lingering effects can affect any value on the die, and can stack with other lingering effects.
|
5
_content/dicearmor/da5.md
Normal file
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
layout: default
|
||||
title: da5
|
||||
---
|
||||
![da5](/assets/dicearmor-assets/da5.png)
|
5
_content/dicearmor/da6-caption.md
Normal file
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
layout: default
|
||||
title: da6-caption
|
||||
---
|
||||
When a cutscene ends, its final command is to either start a duel or set the next cutscene in the story. In the latter case there is an additional field for what to call the next cutscene, and what location it takes place at. The cutscene is then added to the player's save file, and when they visit the city locations are greyed out until they have at least one action to do there. Each location has a dynamically populated action wheel with custom range of acceptable angles.
|
5
_content/dicearmor/da6.md
Normal file
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
layout: default
|
||||
title: da6
|
||||
---
|
||||
![da6](/assets/dicearmor-assets/da6.png)
|
5
_content/dicearmor/da7-caption.md
Normal file
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
layout: default
|
||||
title: da7-caption
|
||||
---
|
||||
The dice shop is dynamically populated by a list of dice available to the player, which can be changed during cutscenes, and is checked against the dice owned by the player to generate sold out indicators. On the left the player can choose to filter the options down to a single dice effect, which also updates the "Buy All" button to buy only all the dice in the current filter.
|
5
_content/dicearmor/da7.md
Normal file
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
layout: default
|
||||
title: da7
|
||||
---
|
||||
![da7](/assets/dicearmor-assets/da7.png)
|
5
_content/dicearmor/da8-caption.md
Normal file
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
layout: default
|
||||
title: da8-caption
|
||||
---
|
||||
The inventory works most the same as the shop, but for equipping dice. It also allows you to drag individual dice or entire sets to the equipped dice glyph. While dragging it will highlight all the slots the new dice will be equipped into.
|
5
_content/dicearmor/da8.md
Normal file
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
layout: default
|
||||
title: da8
|
||||
---
|
||||
![da8](/assets/dicearmor-assets/da8.png)
|
5
_content/dicearmor/da9-caption.md
Normal file
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
layout: default
|
||||
title: da9-caption
|
||||
---
|
||||
During certain events like winning the game or having the face of a die broken, the players' portraits will flash an emotion for a second. After winning, a random living die from the winning player is chosen to play their "finisher move", a flashy and dramatic effect to end the game. Shown is the arcane mechana's finisher, "Missile Storm".
|
5
_content/dicearmor/da9.md
Normal file
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
layout: default
|
||||
title: da9
|
||||
---
|
||||
![da9](/assets/dicearmor-assets/da9.png)
|
|
@ -1,89 +0,0 @@
|
|||
---
|
||||
layout: default
|
||||
title: Dice Armor Screenshots
|
||||
nocard: true
|
||||
---
|
||||
<div id="carousel" class="carousel card">
|
||||
<div class="slides">
|
||||
<div class="slide active-slide">
|
||||
<img src="/assets/dicearmor-assets/da2.png">
|
||||
<div class="slide-desc">
|
||||
Dice Armor is a dice dueling game. Players can use abilities, flip dice, and attack each other to win in a dice game that puts chance into the hands of the players. This is what the dueling scene looks like, with a tutorial cutscene happening on top to guide the player through the basics.
|
||||
Also, all the dice are constructed dynamically, using quaternion math to figure out the placement of each component relative to the face its going on. The die in the middle has one of the player and opponents' portraits on each of its sides.
|
||||
</div>
|
||||
</div>
|
||||
<div class="slide">
|
||||
<img src="/assets/dicearmor-assets/editors.png">
|
||||
<div class="slide-desc">
|
||||
Many of the objects I've created, I've made scriptable objects so that game designers can add and modify them easily. Additionally I would create custom inspectors for the objects to help make them as easy to understand and edit as possible. The opponents' artifical intelligence is made up of many strategies, in a prioritized list. When its the opponents' turn they go through each strategy and check if they can be run, and if so then the opponent performs the strategy then starts back over at the top of the list of strategies. The + sign under the list of strategies opens an organized dropdown of all the various strategies.
|
||||
</div>
|
||||
</div>
|
||||
<div class="slide">
|
||||
<img src="/assets/dicearmor-assets/simulator.JPG" class="vertical">
|
||||
<div class="slide-desc">
|
||||
In addition to custom inspector code, I've created new tools for the editor for our game designers to use. This is a duel simulator that will take two opponents and simulate an arbitrary number of duels between them, and output the results and summarize them for you, much much quicker than manually going through the duels, even with an absurdly high timeScale. This will become incredibly useful in making balance changes and testing new dice against existing sets. This is a screenshot of it in edit mode, but in play mode it removes the "Dueling Managers" field and will use whatever the current duel balance settings are, allowing for the GDs to test freely in play mode without worrying about undoing all their changes afterwards.
|
||||
</div>
|
||||
</div>
|
||||
<div class="slide">
|
||||
<img src="/assets/dicearmor-assets/da1.png">
|
||||
<div class="slide-desc">
|
||||
I created the Babble Buds puppet editor and ported the rendering library I wrote for it to C# so it could be used in Unity. Dice Armor has a full campaign using cutscenes made using the Babble Buds cutscene editor, taking advantage of its support for custom commands and fields to control things like talking, giving the player dice and money, starting duels, and controlling player progression through the story.
|
||||
</div>
|
||||
</div>
|
||||
<div class="slide">
|
||||
<img src="/assets/dicearmor-assets/da6.png">
|
||||
<div class="slide-desc">
|
||||
When a cutscene ends, its final command is to either start a duel or set the next cutscene in the story. In the latter case there is an additional field for what to call the next cutscene, and what location it takes place at. The cutscene is then added to the player's save file, and when they visit the city locations are greyed out until they have at least one action to do there. Each location has a dynamically populated action wheel with custom range of acceptable angles.
|
||||
</div>
|
||||
</div>
|
||||
<div class="slide">
|
||||
<img src="/assets/dicearmor-assets/da7.png">
|
||||
<div class="slide-desc">
|
||||
The dice shop is dynamically populated by a list of dice available to the player, which can be changed during cutscenes, and is checked against the dice owned by the player to generate sold out indicators. On the left the player can choose to filter the options down to a single dice effect, which also updates the "Buy All" button to buy only all the dice in the current filter.
|
||||
</div>
|
||||
</div>
|
||||
<div class="slide">
|
||||
<img src="/assets/dicearmor-assets/da8.png">
|
||||
<div class="slide-desc">
|
||||
The inventory works most the same as the shop, but for equipping dice. It also allows you to drag individual dice or entire sets to the equipped dice glyph. While dragging it will highlight all the slots the new dice will be equipped into.
|
||||
</div>
|
||||
</div>
|
||||
<div class="slide">
|
||||
<img src="/assets/dicearmor-assets/da3.png">
|
||||
<div class="slide-desc">
|
||||
The dice rolling uses the physics engine and detects once the dice have stopped moving, then determines which side is face up based on which of the normals is closest to straight up. It flags the die as cocked if that smallest angle is above a threshold. The dice sink into the table when not rolling so as to not interfere with any dice that are rolling.
|
||||
</div>
|
||||
</div>
|
||||
<div class="slide">
|
||||
<img src="/assets/dicearmor-assets/da4.png">
|
||||
<div class="slide-desc">
|
||||
There is a generic object dragging manager using delegates to check for valid things to drag, valid things to be dragged to (based on whats being dragged), getting a list of transforms to add the target indicator to, and what to do when the drag ends, on both a valid and invalid target. In this case its being used to drag a die to another die, telling the game to attack with the die.
|
||||
</div>
|
||||
</div>
|
||||
<div class="slide">
|
||||
<img src="/assets/dicearmor-assets/da5.png">
|
||||
<div class="slide-desc">
|
||||
In addition to attacking and flipping dice, the player can use abilities that appear on some of the faces of most of the dice. I made an interface for abilities that supports targeted, non-targeted, instant, and lingering effects. Lingering effects can affect any value on the die, and can stack with other lingering effects.
|
||||
</div>
|
||||
</div>
|
||||
<div class="slide">
|
||||
<img src="/assets/dicearmor-assets/da9.png">
|
||||
<div class="slide-desc">
|
||||
During certain events like winning the game or having the face of a die broken, the players' portraits will flash an emotion for a second. After winning, a random living die from the winning player is chosen to play their "finisher move", a flashy and dramatic effect to end the game. Shown is the arcane mechana's finisher, "Missile Storm".
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="indicators">
|
||||
<input class="indicator" name="indicator" checked type="radio" />
|
||||
<input class="indicator" name="indicator" type="radio" />
|
||||
<input class="indicator" name="indicator" type="radio" />
|
||||
<input class="indicator" name="indicator" type="radio" />
|
||||
<input class="indicator" name="indicator" type="radio" />
|
||||
<input class="indicator" name="indicator" type="radio" />
|
||||
<input class="indicator" name="indicator" type="radio" />
|
||||
<input class="indicator" name="indicator" type="radio" />
|
||||
<input class="indicator" name="indicator" type="radio" />
|
||||
<input class="indicator" name="indicator" type="radio" />
|
||||
<input class="indicator" name="indicator" type="radio" />
|
||||
</div>
|
||||
</div>
|
5
_content/dicearmor/editors-caption.md
Normal file
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
layout: default
|
||||
title: editors-caption
|
||||
---
|
||||
Many of the objects I've created, I've made scriptable objects so that game designers can add and modify them easily. Additionally I would create custom inspectors for the objects to help make them as easy to understand and edit as possible. The opponents' artifical intelligence is made up of many strategies, in a prioritized list. When its the opponents' turn they go through each strategy and check if they can be run, and if so then the opponent performs the strategy then starts back over at the top of the list of strategies. The + sign under the list of strategies opens an organized dropdown of all the various strategies.
|
5
_content/dicearmor/editors.md
Normal file
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
layout: default
|
||||
title: editors
|
||||
---
|
||||
![editors](/assets/dicearmor-assets/editors.png)
|
5
_content/dicearmor/simulator-caption.md
Normal file
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
layout: default
|
||||
title: simulator-caption
|
||||
---
|
||||
In addition to custom inspector code, I've created new tools for the editor for our game designers to use. This is a duel simulator that will take two opponents and simulate an arbitrary number of duels between them, and output the results and summarize them for you, much much quicker than manually going through the duels, even with an absurdly high timeScale. This will become incredibly useful in making balance changes and testing new dice against existing sets. This is a screenshot of it in edit mode, but in play mode it removes the "Dueling Managers" field and will use whatever the current duel balance settings are, allowing for the GDs to test freely in play mode without worrying about undoing all their changes afterwards.
|
5
_content/dicearmor/simulator.md
Normal file
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
layout: default
|
||||
title: simulator
|
||||
---
|
||||
![simulator](/assets/dicearmor-assets/simulator.JPG)
|
|
@ -3,6 +3,7 @@ layout: default
|
|||
nocard: true
|
||||
title: Markov Chains
|
||||
---
|
||||
<div class="section">
|
||||
<link rel="stylesheet" type="text/css" href="/css/markov.css">
|
||||
|
||||
<div class="card buttons">
|
||||
|
@ -38,3 +39,5 @@ title: Markov Chains
|
|||
</div>
|
||||
|
||||
<script src="/js/markov.js" type="text/javascript"></script>
|
||||
|
||||
</div>
|
||||
|
|
5
_content/vecs/debug.md
Normal file
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
layout: default
|
||||
title: Vecs Debug
|
||||
---
|
||||
![](/assets/vecs-assets/debug.png)
|
5
_content/vecs/screenshot.md
Normal file
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
layout: default
|
||||
title: Vecs Screenshot
|
||||
---
|
||||
![](/assets/vecs-assets/screenshot.png)
|
9
_content/vecs/summary.md
Normal file
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
layout: default
|
||||
title: Vecs Summary
|
||||
---
|
||||
V-ecs (pronounced "Vex") is a vulkan-based engine I made for making highly moddable games and tools in lua, centered around the ECS design pattern and a work-stealing job system.
|
||||
|
||||
The engine works with "worlds", which are collections of systems and renderers. The engine comes with several worlds using systems and renderers I made, including a voxel world, an incremental game, and some test scenes. All of these include systems to render the fps as well as show a debug console by typing the grave key (\`). The default world is a title screen that detects any worlds in the "worlds" folder and displays a button for each of them.
|
||||
|
||||
Eventual plans for this engine include putting it on steam with workshop support so users can create their own systems and renderers, share them, and create custom worlds mixing and matching any systems and renderers available.
|
|
@ -3,7 +3,7 @@ layout: default
|
|||
title: Dice Armor
|
||||
category: Game
|
||||
banner: dice
|
||||
cards: [Dice Armor Summary, Dice Armor Screenshots]
|
||||
cards: [Dice Armor Summary, da2, da2-caption, editors, editors-caption, simulator, simulator-caption, da1, da1-caption, da6, da6-caption, da7, da7-caption, da8, da8-caption, da3, da3-caption, da4, da4-caption, da5, da5-caption, da9, da9-caption]
|
||||
links: ["Download|https://drive.google.com/open?id=18rwqEIdMChdGtB-9LdI4wiqeM5C5ViOL"]
|
||||
tags: [c#, unity]
|
||||
---
|
||||
|
|
9
_posts/2019-10-07-citadel.md
Normal file
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
layout: default
|
||||
title: Capture the Citadel
|
||||
category: Game
|
||||
cards: [CtC Summary, CtC Screenshot]
|
||||
links: ["Source Code|https://github.com/thepaperpilot/Capture-the-Citadel"]
|
||||
tags: [c#, unity, vr]
|
||||
---
|
||||
A 3D VR re-envisioning of a Slay the Spire-style game by Anthony Lawn and Grant Barbee.
|
9
_posts/2020-02-03-vecs.md
Normal file
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
layout: default
|
||||
title: V-ecs
|
||||
category: Other
|
||||
cards: [Vecs Summary, Vecs Screenshot, Vecs Debug]
|
||||
links: ["Source Code|https://github.com/thepaperpilot/V-ECS"]
|
||||
tags: [c++, lua, vulkan]
|
||||
---
|
||||
V-ecs (pronounced "Vex") is a vulkan-based engine I made for making highly moddable games and tools in lua, centered around the ECS design pattern and a work-stealing job system.
|
Before Width: | Height: | Size: 962 KiB After Width: | Height: | Size: 962 KiB |
BIN
assets/puppet/47027bbc-eed0-47a9-84cb-578c34fc8c46/22.png
Normal file
After Width: | Height: | Size: 83 KiB |
BIN
assets/puppet/47027bbc-eed0-47a9-84cb-578c34fc8c46/23.png
Normal file
After Width: | Height: | Size: 11 KiB |
BIN
assets/puppet/47027bbc-eed0-47a9-84cb-578c34fc8c46/24.png
Normal file
After Width: | Height: | Size: 5.8 KiB |
BIN
assets/puppet/47027bbc-eed0-47a9-84cb-578c34fc8c46/25.png
Normal file
After Width: | Height: | Size: 4.7 KiB |
BIN
assets/puppet/47027bbc-eed0-47a9-84cb-578c34fc8c46/26.png
Normal file
After Width: | Height: | Size: 2.7 KiB |
BIN
assets/puppet/47027bbc-eed0-47a9-84cb-578c34fc8c46/27.png
Normal file
After Width: | Height: | Size: 21 KiB |
BIN
assets/puppet/47027bbc-eed0-47a9-84cb-578c34fc8c46/28.png
Normal file
After Width: | Height: | Size: 9.4 KiB |
BIN
assets/puppet/47027bbc-eed0-47a9-84cb-578c34fc8c46/29.png
Normal file
After Width: | Height: | Size: 11 KiB |
BIN
assets/puppet/47027bbc-eed0-47a9-84cb-578c34fc8c46/30.png
Normal file
After Width: | Height: | Size: 13 KiB |
BIN
assets/puppet/47027bbc-eed0-47a9-84cb-578c34fc8c46/31.png
Normal file
After Width: | Height: | Size: 8.1 KiB |
BIN
assets/vecs-assets/debug.png
Normal file
After Width: | Height: | Size: 96 KiB |
BIN
assets/vecs-assets/screenshot.png
Normal file
After Width: | Height: | Size: 451 KiB |
|
@ -497,7 +497,7 @@ a.btn, a.btn-flat, input.btn, input.btn-flat {
|
|||
height: 100% !important;
|
||||
}
|
||||
|
||||
body > .collapsible, body > .collection, body .card, body .slider, body > .container {
|
||||
body > .collapsible, body > .collection, body .card, body .slider, body > .section > .collection {
|
||||
width: 95% !important;
|
||||
max-width:940px !important;
|
||||
margin:auto !important;
|
||||
|
|
24
index.html
|
@ -18,27 +18,37 @@ favorites: [NaN, Tower Offense, Slime Chargers!]
|
|||
<p>Tap <img class="inline" src="assets/home/arrowLeft.png" /> and <img class="inline" src="assets/home/arrowRight.png" /> to change direction and move</p>
|
||||
<p>Tap <img class="inline" src="assets/home/arrowUp.png" /> to bob up and down</p>
|
||||
<p>Hold <span style="color: white;">Space</span> to "babble"</p>
|
||||
<p>Tap <span style="color: white; white-space: nowrap;">1-7</span> to change my expression</p>
|
||||
<p>Tap <span style="color: white; white-space: nowrap;">1-6</span> to change my expression</p>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<span class="card-title">Hello!</span>
|
||||
<p>I'm Anthony "The Paper Pilot" Lawn, and I develop programs and games using a variety of languages and engines. I received my B.S. in Computer Science at the University of Texas at Dallas, and am studying there towards my M.S. as well, with a focus on Computer Interaction.</p>
|
||||
<p>I'm Anthony "The Paper Pilot" Lawn, and I develop programs and games using a variety of languages and engines. I received my B.S. and M.S. in Computer Science at the University of Texas at Dallas, with a focus on Computer Interaction.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section" id="featured">
|
||||
<h1>Featured Projects</h1>
|
||||
<div class="two-section">
|
||||
<div class="three-section">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<div class="card-image">
|
||||
<a href="/vecs"><img src="/assets/vecs-assets/screenshot.png"></a>
|
||||
</div>
|
||||
<span class="card-title"><a href="/vecs">V-ecs!</a><span class="language">C++</span><span class="language">lua</span></span>
|
||||
<p>V-ecs (pronounced "Vex") is a vulkan-based engine I made for making highly moddable games and tools in lua, centered around the ECS design pattern and a work-stealing job system.</p>
|
||||
<a href="/vecs">read more</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<div class="card-image">
|
||||
<a href="/babble"><img src="/assets/babble-assets/screenshot.jpg"></a>
|
||||
</div>
|
||||
<span class="card-title"><a href="/babble">I made Babble Buds!</a><span class="language">JS</span><span class="language">C#</span></span>
|
||||
<span class="card-title"><a href="/babble">Babble Buds!</a><span class="language">JS</span><span class="language">C#</span></span>
|
||||
<p>Babble Buds is a free, open source virtual puppet show engine I made for various platforms including HTLM5 and Unity, as well as an accompanying electron-based puppet editor and multiplayer stage</p>
|
||||
<a href="/babble">read more</a>
|
||||
</div>
|
||||
|
@ -48,11 +58,12 @@ favorites: [NaN, Tower Offense, Slime Chargers!]
|
|||
<div class="card-image">
|
||||
<a href="/dicearmor"><img src="/assets/dicearmor-assets/editors.jpg"></a>
|
||||
</div>
|
||||
<span class="card-title"><a href="/dicearmor">I was the lead programmer on Dice Armor!</a><span class="language">C#</span></span>
|
||||
<span class="card-title"><a href="/dicearmor">Dice Armor!</a><span class="language">C#</span></span>
|
||||
<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>
|
||||
<a href="/dicearmor">read more</a>
|
||||
</div>
|
||||
</div>
|
||||
{% comment %}
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<div class="card-image">
|
||||
|
@ -71,6 +82,7 @@ favorites: [NaN, Tower Offense, Slime Chargers!]
|
|||
<p>I'm one of two developers on a game prototype for a VR game with roguelike deckbuilding mechanics, similar to Slay the Spire.</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endcomment %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
@ -95,5 +107,5 @@ favorites: [NaN, Tower Offense, Slime Chargers!]
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.rawgit.com/thepaperpilot/babble.js/master/dist/babble.js"></script>
|
||||
<script src="js/babble.js"></script>
|
||||
<script src="js/home.js"></script>
|
||||
|
|
43043
js/babble.js
Normal file
89
js/home.js
|
@ -5,46 +5,69 @@ let controls = document.getElementById("controls")
|
|||
let stage = new babble.Stage("puppet", {
|
||||
"numCharacters": 3,
|
||||
"puppetScale": 1.5
|
||||
}, {
|
||||
"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/blackhat-assets/assets", loaded);
|
||||
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":[],"name":"Gravy","id":1,"position":0,"facingLeft":false,"emote":"0"}
|
||||
let start = "delay 500;\n" +
|
||||
"add gravy 1 0;\n" +
|
||||
"move 1 2;\n" +
|
||||
"chat 1 0;"
|
||||
},
|
||||
{"47027bbc-eed0-47a9-84cb-578c34fc8c46:28":{"name":"talking_mouth","type":"sprite","tab":"mouths","location":"47027bbc-eed0-47a9-84cb-578c34fc8c46/28.png","thumbnail":null,"version":1,"panning":[]},"47027bbc-eed0-47a9-84cb-578c34fc8c46:29":{"name":"talking2_mouth","type":"sprite","tab":"mouths","location":"47027bbc-eed0-47a9-84cb-578c34fc8c46/29.png","thumbnail":null,"version":1,"panning":[]},"47027bbc-eed0-47a9-84cb-578c34fc8c46:23":{"name":"funny_eyes","type":"sprite","tab":"eyes","location":"47027bbc-eed0-47a9-84cb-578c34fc8c46/23.png","thumbnail":null,"version":1,"panning":[]},"47027bbc-eed0-47a9-84cb-578c34fc8c46:25":{"name":"happy_mouth","type":"sprite","tab":"mouths","location":"47027bbc-eed0-47a9-84cb-578c34fc8c46/25.png","thumbnail":null,"version":1,"panning":[]},"47027bbc-eed0-47a9-84cb-578c34fc8c46:22":{"name":"body","type":"sprite","tab":"body","location":"47027bbc-eed0-47a9-84cb-578c34fc8c46/22.png","thumbnail":null,"version":1,"panning":[]},"47027bbc-eed0-47a9-84cb-578c34fc8c46:24":{"name":"funny_mouth","type":"sprite","tab":"mouths","location":"47027bbc-eed0-47a9-84cb-578c34fc8c46/24.png","thumbnail":null,"version":1,"panning":[]},"47027bbc-eed0-47a9-84cb-578c34fc8c46:26":{"name":"meh_mouth","type":"sprite","tab":"mouths","location":"47027bbc-eed0-47a9-84cb-578c34fc8c46/26.png","thumbnail":null,"version":1,"panning":[]},"47027bbc-eed0-47a9-84cb-578c34fc8c46:27":{"name":"normal_eyes","type":"sprite","tab":"eyes","location":"47027bbc-eed0-47a9-84cb-578c34fc8c46/27.png","thumbnail":null,"version":1,"panning":[]},"47027bbc-eed0-47a9-84cb-578c34fc8c46:30":{"name":"uwu_eyes","type":"sprite","tab":"eyes","location":"47027bbc-eed0-47a9-84cb-578c34fc8c46/30.png","thumbnail":null,"version":1,"panning":[]},"47027bbc-eed0-47a9-84cb-578c34fc8c46:31":{"name":"uwu_mouth","type":"sprite","tab":"mouths","location":"47027bbc-eed0-47a9-84cb-578c34fc8c46/31.png","thumbnail":null,"version":1,"panning":[]}},
|
||||
"assets/puppet", loaded);
|
||||
|
||||
let pajer = {"deadbonesStyle":false,"name":"Pajer","layers":{"children":[{"name":"body","children":[{"name":"body","rotation":0,"scaleX":1,"scaleY":1,"x":0,"y":-330,"id":"47027bbc-eed0-47a9-84cb-578c34fc8c46:22","leaf":true,"inherit":{},"path":[0,0]}],"inherit":{},"path":[0],"scaleX":-0.5,"scaleY":0.5},{"name":"head","children":[],"head":true,"inherit":{},"path":[1]},{"name":"emotes","head":true,"children":[{"name":"uwu","rotation":0,"scaleX":1,"scaleY":1,"x":0,"y":0,"children":[{"name":"uwu_eyes","rotation":0,"scaleX":1,"scaleY":1,"x":-44.494040351079754,"y":-432.10076571738944,"id":"47027bbc-eed0-47a9-84cb-578c34fc8c46:30","leaf":true,"inherit":{"head":true,"emote":3},"path":[2,0,0]},{"name":"uwu_mouth","rotation":0,"scaleX":1,"scaleY":1,"x":-41.694941376469345,"y":-315.00512527951986,"id":"47027bbc-eed0-47a9-84cb-578c34fc8c46:31","leaf":true,"inherit":{"head":true,"emote":3},"path":[2,0,1]}],"inherit":{"head":true},"path":[2,0],"emote":3},{"name":"funny","rotation":0,"scaleX":1,"scaleY":1,"x":0,"y":0,"children":[{"name":"funny_eyes","rotation":0,"scaleX":1,"scaleY":1,"x":-45.89358983838499,"y":-461.0247884550305,"id":"47027bbc-eed0-47a9-84cb-578c34fc8c46:23","leaf":true,"inherit":{"head":true,"emote":2},"path":[2,1,0]},{"name":"funny_mouth","rotation":0,"scaleX":1,"scaleY":1,"x":-36.096743427248484,"y":-394.31292956014863,"id":"47027bbc-eed0-47a9-84cb-578c34fc8c46:24","leaf":true,"inherit":{"head":true,"emote":2},"path":[2,1,1]}],"inherit":{"head":true},"path":[2,1],"collapsed":true,"emote":2},{"name":"excited","rotation":0,"scaleX":1,"scaleY":1,"x":0,"y":0,"children":[{"name":"normal_eyes","rotation":0,"scaleX":1,"scaleY":1,"x":-44.64999549436159,"y":-438.1792449911571,"id":"47027bbc-eed0-47a9-84cb-578c34fc8c46:27","leaf":true,"inherit":{"head":true,"emote":5},"path":[2,2,0],"emoteLayer":"eyes"},{"name":"talking2_mouth","rotation":0,"scaleX":1,"scaleY":1,"x":-44,"y":-316,"id":"47027bbc-eed0-47a9-84cb-578c34fc8c46:29","leaf":true,"inherit":{"head":true,"emote":5},"path":[2,2,1],"emoteLayer":"mouth"}],"inherit":{"head":true},"path":[2,2],"collapsed":true,"emote":5},{"name":"very happy","rotation":0,"scaleX":1,"scaleY":1,"x":0,"y":0,"children":[{"name":"normal_eyes","rotation":0,"scaleX":1,"scaleY":1,"x":-44.64999549436159,"y":-438.1792449911571,"id":"47027bbc-eed0-47a9-84cb-578c34fc8c46:27","leaf":true,"inherit":{"head":true,"emote":4},"path":[2,3,0],"emoteLayer":"eyes"},{"name":"talking_mouth","rotation":0,"scaleX":1,"scaleY":1,"x":-44.02752385531136,"y":-316.4046747668251,"id":"47027bbc-eed0-47a9-84cb-578c34fc8c46:28","leaf":true,"inherit":{"head":true,"emote":4},"path":[2,3,1],"emoteLayer":"mouth"}],"inherit":{"head":true},"path":[2,3],"collapsed":true,"emote":4},{"name":"meh","rotation":0,"scaleX":1,"scaleY":1,"x":0,"y":0,"emote":1,"children":[{"name":"normal_eyes","rotation":0,"scaleX":1,"scaleY":1,"x":-44.64999549436159,"y":-438.1792449911571,"id":"47027bbc-eed0-47a9-84cb-578c34fc8c46:27","leaf":true,"inherit":{"head":true,"emote":1},"path":[2,4,0],"emoteLayer":"eyes"},{"name":"meh_mouth","rotation":0,"scaleX":1,"scaleY":1,"x":-44.02752385531135,"y":-315.0051252795199,"id":"47027bbc-eed0-47a9-84cb-578c34fc8c46:26","leaf":true,"inherit":{"head":true,"emote":1},"path":[2,4,1],"emoteLayer":"mouth"}],"inherit":{"head":true},"path":[2,4],"collapsed":true},{"name":"happy","emote":0,"children":[{"name":"normal_eyes","rotation":0,"scaleX":1,"scaleY":1,"x":-44.64999549436159,"y":-438.1792449911571,"id":"47027bbc-eed0-47a9-84cb-578c34fc8c46:27","leaf":true,"inherit":{"head":true,"emote":0},"path":[2,5,0],"emoteLayer":"eyes"},{"name":"happy_mouth","rotation":0,"scaleX":1,"scaleY":1,"x":-48.02867537861667,"y":-316.1511667631519,"id":"47027bbc-eed0-47a9-84cb-578c34fc8c46:25","leaf":true,"inherit":{"head":true,"emote":0},"path":[2,5,1],"emoteLayer":"mouth"}],"inherit":{"head":true},"path":[2,5],"collapsed":true}],"inherit":{},"path":[2],"scaleX":-0.5,"scaleY":0.5},{"name":"hat","children":[],"head":true,"inherit":{},"path":[3]},{"name":"props","children":[],"inherit":{},"path":[4]}]},"id":1,"emote":0,"creator":"47027bbc-eed0-47a9-84cb-578c34fc8c46","creatorNick":"Trisha Vinisto","oc":"47027bbc-eed0-47a9-84cb-578c34fc8c46","ocNick":"Trisha Vinisto"}
|
||||
let start = [
|
||||
{
|
||||
"command": "delay",
|
||||
"delay": 500,
|
||||
"wait": true
|
||||
},
|
||||
{
|
||||
"command": "add",
|
||||
"name": "pajer",
|
||||
"id": "pajer",
|
||||
"position": 0,
|
||||
"facingLeft": false,
|
||||
"emote": "0"
|
||||
},
|
||||
{
|
||||
"command": "move",
|
||||
"target": "pajer",
|
||||
"position": 2,
|
||||
"wait": true
|
||||
},
|
||||
{
|
||||
"command": "chat",
|
||||
"target": "pajer",
|
||||
"chatId": "0"
|
||||
}
|
||||
]
|
||||
|
||||
let stageElement = document.getElementById("puppet")
|
||||
|
||||
function loaded() {
|
||||
stage.resize()
|
||||
let puppetScale = stage.screen.clientHeight / 567 / stage.puppetStage.scale.y
|
||||
stage.project.puppetScale = puppetScale
|
||||
stage.environment.puppetScale = puppetScale
|
||||
stage.resize()
|
||||
window.onresize = () => {
|
||||
stage.resize()
|
||||
let puppetScale = stage.screen.clientHeight / 567 / stage.puppetStage.scale.y
|
||||
stage.project.puppetScale = puppetScale
|
||||
stage.environment.puppetScale = puppetScale
|
||||
stage.resize()
|
||||
}
|
||||
startCutscene()
|
||||
}
|
||||
|
||||
function startCutscene() {
|
||||
let cut = new babble.Cutscene(stage, start, {"gravy": gravy})
|
||||
let cut = new babble.Cutscene(stage, start, {"pajer": pajer})
|
||||
let add = cut.actions.add.bind(cut)
|
||||
cut.actions.add = function(callback, name, id, position) {
|
||||
add(callback, name, id, position)
|
||||
cut.actions.add = function(callback, action) {
|
||||
add(callback, action)
|
||||
stage.resize()
|
||||
}
|
||||
|
||||
cut.actions.chat = function(callback, target, chatId) {
|
||||
cut.actions.chat = function(callback, action) {
|
||||
let chats = [{
|
||||
message: "I'm Anthony, or The Paper Pilot, and I make fun games and tools using code!"
|
||||
}]
|
||||
current_chat.style.display = 'block'
|
||||
this.stage.getPuppet(target).setBabbling(true)
|
||||
chatter(callback, target, chats[chatId], this.stage, 0)
|
||||
this.stage.getPuppet(action.target).setBabbling(true)
|
||||
chatter(callback, action.target, chats[action.chatId], this.stage, 0)
|
||||
}
|
||||
cut.start()
|
||||
}
|
||||
|
@ -65,8 +88,8 @@ window.onkeydown = function(e) {
|
|||
|
||||
if (key == 32) {
|
||||
e.preventDefault()
|
||||
if (stage.getPuppet(1).babbling) return
|
||||
stage.getPuppet(1).setBabbling(true)
|
||||
if (stage.getPuppet("pajer").babbling) return
|
||||
stage.getPuppet("pajer").setBabbling(true)
|
||||
var temp = babbleEl
|
||||
babbleEl = babbleEl.cloneNode(true)
|
||||
temp.parentNode.replaceChild(babbleEl, temp)
|
||||
|
@ -77,13 +100,27 @@ window.onkeydown = function(e) {
|
|||
window.onkeyup = function(e) {
|
||||
let key = e.keyCode ? e.keyCode : e.which
|
||||
|
||||
if (key > 48 && key < 58)
|
||||
stage.getPuppet(1).changeEmote(key - 49)
|
||||
else if (key == 37) stage.getPuppet(1).moveLeft()
|
||||
else if (key == 38) stage.getPuppet(1).jiggle()
|
||||
else if (key == 39) stage.getPuppet(1).moveRight()
|
||||
else if (key == 32) {
|
||||
stage.getPuppet(1).setBabbling(false)
|
||||
if (key > 48 && key < 55)
|
||||
stage.getPuppet("pajer").changeEmote(key - 49)
|
||||
else if (key == 37) {
|
||||
let puppet = stage.getPuppet("pajer")
|
||||
if (puppet.facingLeft || puppet.position === stage.environment.numCharacters + 1)
|
||||
puppet.target--
|
||||
puppet.facingLeft = true
|
||||
if (puppet.movingAnim === 0)
|
||||
puppet.container.scale.x = -stage.environment.puppetScale
|
||||
stage.dirty = true
|
||||
} else if (key == 38) stage.getPuppet("pajer").jiggle()
|
||||
else if (key == 39) {
|
||||
let puppet = stage.getPuppet("pajer")
|
||||
if (!puppet.facingLeft || puppet.position === 0)
|
||||
puppet.target++
|
||||
puppet.facingLeft = false
|
||||
if (puppet.movingAnim === 0)
|
||||
puppet.container.scale.x = stage.environment.puppetScale
|
||||
stage.dirty = true
|
||||
} else if (key == 32) {
|
||||
stage.getPuppet("pajer").setBabbling(false)
|
||||
babbleEl.className = 'hidden'
|
||||
cancelAnimationFrame(interval)
|
||||
e.preventDefault()
|
||||
|
@ -98,7 +135,7 @@ setTimeout(showControls, 4000)
|
|||
var interval = null
|
||||
var babbleEl = document.getElementById("babble")
|
||||
function showBabble() {
|
||||
var puppet = stage.getPuppet(1)
|
||||
var puppet = stage.getPuppet("pajer")
|
||||
var x = puppet.container.x + 150
|
||||
var y = puppet.container.y - 400
|
||||
if (puppet.facingLeft)
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: default
|
||||
nocard: true
|
||||
title: Tags
|
||||
title: All Projects
|
||||
---
|
||||
{% assign rawtags = "" %}
|
||||
{% for post in site.posts %}
|
||||
|
@ -22,6 +22,7 @@ title: Tags
|
|||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<div class="section">
|
||||
{% for tag in tags %}
|
||||
<ul class="collection with-header">
|
||||
<li id="{{ tag | slugify }}" class="collection-header">{{ tag }}</li>
|
||||
|
@ -34,3 +35,4 @@ title: Tags
|
|||
{% endfor %}
|
||||
</ul>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
|