272 lines
15 KiB
HTML
272 lines
15 KiB
HTML
<!doctype html>
|
||
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
|
||
<title>Building Kit</title>
|
||
|
||
<meta name="description" content="Game assets overview">
|
||
<meta name="author" content="Kenney">
|
||
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<div class='container header'><h1>Building Kit</h1></div>
|
||
|
||
<div class='container content'>
|
||
|
||
<p><strong>Information</strong></p>
|
||
|
||
<p>Hover over models to show details, for the documentation see the <a target='_blank' href='https://kenney.nl/knowledge-base/game-assets-3d/importing-3d-models-into-game-engines'>knowledge base</a>.</p>
|
||
|
||
<p>
|
||
<span class='data'><strong>Total objects:</strong> 79×</span><span class='data'><strong>Total animations:</strong> 24×</span>
|
||
</p>
|
||
|
||
</div>
|
||
|
||
<div class='container content'>
|
||
|
||
<p><strong>Textures</strong></p>
|
||
|
||
<p><a href='Models/FBX format/Textures/colormap.png' target='_blank' class='data no-padding'><span class='swatch' style='background-image: url("Models/FBX format/Textures/colormap.png")'></span>colormap</a><a href='Models/Textures/variation-a.png' target='_blank' class='data no-padding'><span class='swatch' style='background-image: url("Models/Textures/variation-a.png")'></span>variation-a</a></p>
|
||
|
||
</div>
|
||
|
||
<div class='container content'>
|
||
|
||
<p style='margin-bottom:2em'><strong>Models</strong></p>
|
||
|
||
<div title='128 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/barricade-doorway-a.png'/><br>barricade-doorway-a</div>
|
||
<div title='216 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/barricade-doorway-b.png'/><br>barricade-doorway-b</div>
|
||
<div title='244 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/barricade-doorway-c.png'/><br>barricade-doorway-c</div>
|
||
<div title='128 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/barricade-window-a.png'/><br>barricade-window-a</div>
|
||
<div title='216 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/barricade-window-b.png'/><br>barricade-window-b</div>
|
||
<div title='244 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/barricade-window-c.png'/><br>barricade-window-c</div>
|
||
<div title='36 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/border.png'/><br>border</div>
|
||
<div title='71 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/border-corner.png'/><br>border-corner</div>
|
||
<div title='72 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/border-corner-diagonal.png'/><br>border-corner-diagonal</div>
|
||
<div title='258 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/border-corner-round.png'/><br>border-corner-round</div>
|
||
<div title='71 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/border-corner-small.png'/><br>border-corner-small</div>
|
||
<div title='36 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/border-high.png'/><br>border-high</div>
|
||
<div title='71 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/border-high-corner.png'/><br>border-high-corner</div>
|
||
<div title='72 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/border-high-corner-diagonal.png'/><br>border-high-corner-diagonal</div>
|
||
<div title='258 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/border-high-corner-round.png'/><br>border-high-corner-round</div>
|
||
<div title='71 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/border-high-corner-small.png'/><br>border-high-corner-small</div>
|
||
<div title='52 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/column.png'/><br>column</div>
|
||
<div title='52 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/column-thin.png'/><br>column-thin</div>
|
||
<div title='52 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/column-wide.png'/><br>column-wide</div>
|
||
<div title='112 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/detail-pipe.png'/><br>detail-pipe</div>
|
||
<div title='282 vertices • 1 group(s) • 3 animation(s)' class='package'><span class='animated'>Animated</span><img src='Previews/door-rotate-round-a.png'/><br>door-rotate-round-a</div>
|
||
<div title='458 vertices • 1 group(s) • 3 animation(s)' class='package'><span class='animated'>Animated</span><img src='Previews/door-rotate-round-b.png'/><br>door-rotate-round-b</div>
|
||
<div title='594 vertices • 1 group(s) • 3 animation(s)' class='package'><span class='animated'>Animated</span><img src='Previews/door-rotate-round-c.png'/><br>door-rotate-round-c</div>
|
||
<div title='612 vertices • 2 group(s) • 3 animation(s)' class='package'><span class='animated'>Animated</span><img src='Previews/door-rotate-round-d.png'/><br>door-rotate-round-d</div>
|
||
<div title='320 vertices • 1 group(s) • 3 animation(s)' class='package'><span class='animated'>Animated</span><img src='Previews/door-rotate-square-a.png'/><br>door-rotate-square-a</div>
|
||
<div title='304 vertices • 1 group(s) • 3 animation(s)' class='package'><span class='animated'>Animated</span><img src='Previews/door-rotate-square-b.png'/><br>door-rotate-square-b</div>
|
||
<div title='384 vertices • 1 group(s) • 3 animation(s)' class='package'><span class='animated'>Animated</span><img src='Previews/door-rotate-square-c.png'/><br>door-rotate-square-c</div>
|
||
<div title='392 vertices • 2 group(s) • 3 animation(s)' class='package'><span class='animated'>Animated</span><img src='Previews/door-rotate-square-d.png'/><br>door-rotate-square-d</div>
|
||
<div title='24 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/floor.png'/><br>floor</div>
|
||
<div title='30 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/floor-corner-diagonal.png'/><br>floor-corner-diagonal</div>
|
||
<div title='84 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/floor-corner-round.png'/><br>floor-corner-round</div>
|
||
<div title='24 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/floor-half.png'/><br>floor-half</div>
|
||
<div title='24 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/floor-quarter.png'/><br>floor-quarter</div>
|
||
<div title='144 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/gutter-vertical.png'/><br>gutter-vertical</div>
|
||
<div title='140 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/gutter-vertical-bottom.png'/><br>gutter-vertical-bottom</div>
|
||
<div title='96 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/gutter-vertical-short.png'/><br>gutter-vertical-short</div>
|
||
<div title='140 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/gutter-vertical-top.png'/><br>gutter-vertical-top</div>
|
||
<div title='144 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/gutter-vertical-wall.png'/><br>gutter-vertical-wall</div>
|
||
<div title='216 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/plating.png'/><br>plating</div>
|
||
<div title='296 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/plating-detailed.png'/><br>plating-detailed</div>
|
||
<div title='296 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/plating-detailed-wide.png'/><br>plating-detailed-wide</div>
|
||
<div title='216 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/plating-wide.png'/><br>plating-wide</div>
|
||
<div title='24 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/roof-flat-center.png'/><br>roof-flat-center</div>
|
||
<div title='108 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/roof-flat-corner.png'/><br>roof-flat-corner</div>
|
||
<div title='88 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/roof-flat-corner-inner.png'/><br>roof-flat-corner-inner</div>
|
||
<div title='72 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/roof-flat-patch.png'/><br>roof-flat-patch</div>
|
||
<div title='72 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/roof-flat-patch-large.png'/><br>roof-flat-patch-large</div>
|
||
<div title='80 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/roof-flat-side.png'/><br>roof-flat-side</div>
|
||
<div title='136 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/roof-flat-square.png'/><br>roof-flat-square</div>
|
||
<div title='224 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/stairs-center.png'/><br>stairs-center</div>
|
||
<div title='128 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/stairs-center-short.png'/><br>stairs-center-short</div>
|
||
<div title='268 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/stairs-closed.png'/><br>stairs-closed</div>
|
||
<div title='140 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/stairs-closed-short.png'/><br>stairs-closed-short</div>
|
||
<div title='256 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/stairs-open.png'/><br>stairs-open</div>
|
||
<div title='160 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/stairs-open-short.png'/><br>stairs-open-short</div>
|
||
<div title='288 vertices • 2 group(s) • 0 animation(s)' class='package'><img src='Previews/stairs-sides.png'/><br>stairs-sides</div>
|
||
<div title='192 vertices • 2 group(s) • 0 animation(s)' class='package'><img src='Previews/stairs-sides-short.png'/><br>stairs-sides-short</div>
|
||
<div title='20 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/wall.png'/><br>wall</div>
|
||
<div title='30 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/wall-corner.png'/><br>wall-corner</div>
|
||
<div title='58 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/wall-corner-column.png'/><br>wall-corner-column</div>
|
||
<div title='90 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/wall-corner-column-bottom.png'/><br>wall-corner-column-bottom</div>
|
||
<div title='58 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/wall-corner-column-small.png'/><br>wall-corner-column-small</div>
|
||
<div title='90 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/wall-corner-column-small-bottom.png'/><br>wall-corner-column-small-bottom</div>
|
||
<div title='40 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/wall-corner-diagonal.png'/><br>wall-corner-diagonal</div>
|
||
<div title='130 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/wall-corner-round.png'/><br>wall-corner-round</div>
|
||
<div title='184 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/wall-doorway-round.png'/><br>wall-doorway-round</div>
|
||
<div title='88 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/wall-doorway-square.png'/><br>wall-doorway-square</div>
|
||
<div title='196 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/wall-doorway-wide-round.png'/><br>wall-doorway-wide-round</div>
|
||
<div title='88 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/wall-doorway-wide-square.png'/><br>wall-doorway-wide-square</div>
|
||
<div title='20 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/wall-half.png'/><br>wall-half</div>
|
||
<div title='20 vertices • 0 group(s) • 0 animation(s)' class='package'><img src='Previews/wall-low.png'/><br>wall-low</div>
|
||
<div title='230 vertices • 1 group(s) • 0 animation(s)' class='package'><img src='Previews/wall-window-round.png'/><br>wall-window-round</div>
|
||
<div title='316 vertices • 1 group(s) • 0 animation(s)' class='package'><img src='Previews/wall-window-round-detailed.png'/><br>wall-window-round-detailed</div>
|
||
<div title='116 vertices • 1 group(s) • 0 animation(s)' class='package'><img src='Previews/wall-window-square.png'/><br>wall-window-square</div>
|
||
<div title='164 vertices • 1 group(s) • 0 animation(s)' class='package'><img src='Previews/wall-window-square-detailed.png'/><br>wall-window-square-detailed</div>
|
||
<div title='240 vertices • 1 group(s) • 0 animation(s)' class='package'><img src='Previews/wall-window-wide-round.png'/><br>wall-window-wide-round</div>
|
||
<div title='380 vertices • 1 group(s) • 0 animation(s)' class='package'><img src='Previews/wall-window-wide-round-detailed.png'/><br>wall-window-wide-round-detailed</div>
|
||
<div title='116 vertices • 1 group(s) • 0 animation(s)' class='package'><img src='Previews/wall-window-wide-square.png'/><br>wall-window-wide-square</div>
|
||
<div title='212 vertices • 1 group(s) • 0 animation(s)' class='package'><img src='Previews/wall-window-wide-square-detailed.png'/><br>wall-window-wide-square-detailed</div>
|
||
|
||
|
||
</div>
|
||
|
||
<div class='clear'></div>
|
||
|
||
<div class='container footer'>
|
||
|
||
Find more assets at Kenney <a href='https://kenney.nl/assets'>(www.kenney.nl)</a><br>
|
||
|
||
License: <a href='https://creativecommons.org/publicdomain/zero/1.0/'>CC0 1.0 Universal</a>
|
||
|
||
</div>
|
||
|
||
</body>
|
||
|
||
<style>
|
||
|
||
body{
|
||
|
||
font-family:system-ui;
|
||
font-size:0.9em;
|
||
font-weight:600;
|
||
|
||
color:#d7d9da;
|
||
background-color:#171B21;
|
||
|
||
margin-top:5em;
|
||
margin-bottom:5em;
|
||
|
||
overflow-y:scroll;
|
||
|
||
}
|
||
|
||
h1{
|
||
|
||
color:#FFFFFF;
|
||
font-family:sans-serif;
|
||
margin-bottom:1.2em;
|
||
|
||
}
|
||
|
||
a{ color:#d7d9da; }
|
||
a:hover{ color:#ffbe07; }
|
||
|
||
.container{
|
||
|
||
max-width:1120px;
|
||
margin:0 auto;
|
||
|
||
}
|
||
|
||
.container.header{
|
||
|
||
text-align:center;
|
||
margin-bottom:2.5em
|
||
|
||
}
|
||
|
||
.container.content{ margin-top:3em; }
|
||
|
||
.container.footer{
|
||
|
||
margin-top:1em;
|
||
text-align:center
|
||
|
||
}
|
||
|
||
.package{
|
||
|
||
float:left;
|
||
|
||
width:12.5%;
|
||
min-width:104px;
|
||
|
||
height:140px;
|
||
|
||
text-align:center;
|
||
|
||
color:#d7d9da;
|
||
text-decoration:none;
|
||
|
||
font-size:12px;
|
||
|
||
position:relative;
|
||
|
||
}
|
||
|
||
.package img{
|
||
|
||
background-color:#2f333a;
|
||
padding:8px 18px;
|
||
border-radius:4px;
|
||
|
||
width:64px;
|
||
margin-bottom:8px;
|
||
|
||
}
|
||
|
||
.package img:hover{ background-color:#ECECEC; }
|
||
|
||
.data{
|
||
|
||
color: #171b21;
|
||
background-color: #d7d9da;
|
||
padding: 0.3em 0.7em;
|
||
border-radius: 0.2em;
|
||
font-size: 90%;
|
||
|
||
margin-right:0.5em;
|
||
text-decoration:none;
|
||
|
||
}
|
||
|
||
.data:hover{ background-color:#ffbe07; color:#171b21; }
|
||
.no-padding{ padding-left:4px; }
|
||
|
||
.swatch{
|
||
|
||
display:inline-block;
|
||
|
||
width: 16px; height: 16px;
|
||
vertical-align: text-top;
|
||
border-radius: 0.2em;
|
||
|
||
margin-right: 8px;
|
||
|
||
box-shadow: 0px 1px 2px #00000070;
|
||
|
||
background-size:cover;
|
||
|
||
}
|
||
|
||
.animated{
|
||
|
||
position: absolute;
|
||
color: #171b21;
|
||
background-color: #ffbe07;
|
||
padding: 1px 5px;
|
||
text-transform: uppercase;
|
||
font-size: 10px;
|
||
font-weight: bold;
|
||
border-radius: 2px;
|
||
pointer-events: none;
|
||
|
||
}
|
||
|
||
.clear{ clear:both; height:8em }
|
||
|
||
</style>
|
||
|
||
</html> |