Ellpeck/Web
1
0
Fork 0
Code Issues Pull requests Releases Activity Actions

custom map docs for foe frenzy

Browse source
This commit is contained in:
Ellpeck 2019-11-23 18:13:46 +01:00
parent 2befcbf343
commit 2dd8ec9589
5 changed files with 296 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
foefrenzy/docs/map.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 361 B

214
foefrenzy/docs/tutorial.md Normal file
View file

@ -0,0 +1,214 @@
# Creating Custom Maps
Foe Frenzy has a simple system in place that allows you to create your own maps using a simple image editing software as well as a text editor. To play a map, all you have to do is put it into a special folder and the game will automatically load it up. If you want to play a custom map in Multiplayer, you need to make sure that all players have the map installed.
## Where to Put Map Files
All files that the game uses are stored in `Documents/Foe Frenzy` on Windows or `~/Foe Frenzy` on Linux. After launching the game for the first time, a `Maps` folder and a `SpawnPools` folder will be generated. This is the location where custom maps live.
## Creating a Map
When creating a Map, two files are required:
- `Maps/MapName.xml`: This is a file containing information about the map, like which tile is which, where items can spawn, where players can spawn and so on.
Note that the example file included has some more comments inside of it that explain what the different parts of the file do.
- `Maps/Textures/MapName.png`: This file represents the actual layout of the map. You can edit it in an image editor of your choice. Each pixel represents one tile on the map, and the colors of the pixels represent what tiles should be placed there. The size of the image is the same as the size of the finished map.
Note that, further down in this README, there is some information about which colors the game's default tiles have in the map image.
Below is the file as well as the image for an example map with some comments that explain the structure in greater detail. To get started making your own map, it would be easiest to copy this information.
```xml
<?xml version="1.0"?>
<!-- XML header information, don't change this -->
<RawMap xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
<!-- A short description of the map that displays when it's selected to be played -->
<Description>A test custom map</Description>
<!-- The amount of seconds it takes until an item spawner spawns an item -->
<ItemSpawnerDelay>5</ItemSpawnerDelay>
<!-- The weather effect that is displayed on the map. Possible values are Snow and Rain -->
<WeatherEffect>Snow</WeatherEffect>
<!-- The type of music that should be displayed on the map. Check the README for reference on all types -->
<MusicTheme>Lava</MusicTheme>
<!-- The map's global light modifier. This is the amount of "sunlight" that the map has, where 255 for each R, G, B value means "full light" and 0 means "no light". -->
<LightModifier>
<B>255</B>
<G>255</G>
<R>255</R>
<A>255</A>
</LightModifier>
<!-- The intensity of lights (like torches) on the map, 1 means full intensity, 0 means that they give off no light at all -->
<LightIntensity>0</LightIntensity>
<!-- The tile that is placed outside the borders of the map for visual purposes if the map is smaller than the screen size -->
<FillerTile>Grass</FillerTile>
<!-- The structure that is placed on top of the filler tile -->
<FillerStructure>Tree</FillerStructure>
<!-- Tile properties are custom combinations of tiles and structures that can be placed in specific locations using the map image. If multiple tile properties are required, an entire RawTileProperty can be copied and pasted below any number of times. -->
<TileProperties>
<RawTileProperty>
<!-- The color specified in the map image file to make this specific property occur in the map -->
<Color>
<B>151</B>
<G>255</G>
<R>151</R>
<A>255</A>
</Color>
<Tile>Grass</Tile>
<Structure>Vine</Structure>
</RawTileProperty>
</TileProperties>
<!-- This is the list of item spawners, their locations and the spawn pools they spawn from. Check the README for reference on spawn pools. -->
<ItemSpawners>
<RawItemSpawner>
<Location>
<X>11</X>
<Y>10</Y>
</Location>
<Pool>Test</Pool>
</RawItemSpawner>
<RawItemSpawner>
<Location>
<X>25</X>
<Y>10</Y>
</Location>
<Pool>Test</Pool>
</RawItemSpawner>
</ItemSpawners>
<!-- This is the list of structure spawners. Structure spawners are basically instructions on how to randomly spawn a set of structures onto different tiles of the map. -->
<StructureSpawners>
<!-- The first spawner in this list randomly spawns Rock structures on Sand tiles. The Amount field determines how many tries the spawning should have. -->
<RawStructureSpawner>
<ValidPositions>
<string>Sand</string>
</ValidPositions>
<Structure>Rock</Structure>
<Amount>40</Amount>
</RawStructureSpawner>
<RawStructureSpawner>
<ValidPositions>
<string>Grass</string>
</ValidPositions>
<Structure>Tree</Structure>
<Amount>60</Amount>
</RawStructureSpawner>
</StructureSpawners>
<!-- These are the spawn points for the four players. When spawning, the spawn points are shuffled so that players don't spawn in the same order every time. -->
<SpawnPoints>
<Point>
<X>1</X>
<Y>8</Y>
</Point>
<Point>
<X>27</X>
<Y>4</Y>
</Point>
<Point>
<X>6</X>
<Y>18</Y>
</Point>
<Point>
<X>25</X>
<Y>15</Y>
</Point>
</SpawnPoints>
</RawMap>
```
![](docs/map.png =100%x*)
## Creating a Spawn Pool
When creating a map, the items that can spawn at any given spawn point are referenced by their Spawn Pool. A spawn pool is basically just a list of items mapped to weights, where a higher weight means that the item will spawn more often, and a lower weight means that the item will spawn less often.
Spawn pools are stored in `SpawnPools/PoolName.xml`. Note that the example file included has some more comments inside of it that explain what the different parts of the file do. Also note that, further down in this README, there is a list of the game's default spawn pools.
Below is the file for an example spawn pool with some comments that explain the structure in greater detail. To get started making your own spawn pool, it would be easiest to copy this information.
```xml
<?xml version="1.0"?>
<!-- XML header information, don't change this -->
<RawPool xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
<!-- These are the entries that this spawn pool has -->
<Entries>
<!-- Each entry contains the name of an item that should be spawned, as well as the weight that item should have. Check the README for information on what the weight value means. -->
<RawPoolEntry>
<Item>Arrow</Item>
<Weight>10</Weight>
</RawPoolEntry>
<RawPoolEntry>
<Item>Bomb</Item>
<Weight>15</Weight>
</RawPoolEntry>
<RawPoolEntry>
<Item>Sword</Item>
<Weight>15</Weight>
</RawPoolEntry>
<RawPoolEntry>
<Item>LeatherArmor</Item>
<Weight>10</Weight>
</RawPoolEntry>
<RawPoolEntry>
<Item>RubberHammer</Item>
<Weight>5</Weight>
</RawPoolEntry>
<RawPoolEntry>
<Item>Spear</Item>
<Weight>15</Weight>
</RawPoolEntry>
<RawPoolEntry>
<Item>Potion</Item>
<Weight>3</Weight>
</RawPoolEntry>
</Entries>
</RawPool>
```
## Tile Names And Colors
Each tile color is written as (R, G, B). The alpha value (A) is always 255.
- Rock (255, 255, 255)
- Grass (0, 255, 0)
- Sand (255, 255, 0)
- Water (0, 0, 255)
- DeepWater (0, 0, 96)
- Dirt (127, 51, 0)
- RockWall (0, 0, 0)
- RockWallFront (81, 81, 81)
- Lava (255, 0, 0)
- Snow (208, 219, 221)
- Ice (96, 96, 255)
- FallGrass (156, 98, 43)
## Structure Names
- Rock
- Tree (automatically changes to snow or fall tree based on the tile below)
- Torch
- Cactus
- GrassTuft (automatically generates on grass as decoration)
- Flower (automatically generates on grass as decoration)
- Vine
- JungleTree
## Item Names
- Bomb
- Sword
- Arrow
- Wall
- RubberHammer
- Pickaxe
- Dynamite
- Spear
- Potion
- FlameThrower
- LeatherArmor
- Feather
- SpeedBoots
- Torch
- Shield
- AntiSlipBoots
## Default Spawn Pools
- All (Most of the game's items)
- Low (Items that are considered lower tier)
- Cave (All items except long-range weapons like arrows)
- CaveLow (Cave items that are considered lower tier)
- Lighting (Lighting items like torches)
- Pickaxe (Items to destroy rocks with like pickaxes, bombs and dynamite)
- Ice (Most of the game's items, including flame thrower, anti-slip boots and other ice stuff)
## Music Themes
- Lava
- Beach
- Cold
- Forest
- Desert

7
foefrenzy/index.html
View file

@ -119,6 +119,13 @@
<small><a id="footnote-1">[1]:</a> When creating a Multiplayer lobby, the host has the option to invite players using Discord's and Steam's online play features, regardless of which platform the host and the invitees have bought the game on. <em>Sadly, Discord's online play feature is currently only supported on Windows.</em></small>
</p>
<h1>More</h1>
<ul>
<li><a href="/foefrenzy/maps">Creating Custom Maps</a></li>
<li><a href="https://ellpeck.de/discord">Join the Discord</a></li>
<li><a href="https://github.com/Ellpeck/FoeFrenzyIssues/issues">Report an Issue</a></li>
</ul>
<h1>About the Project</h1>
<p>
Foe Frenzy is a game created by <a href="https://ellpeck.de">Ellpeck</a>, a student and indie game developer from Germany. It started as a small project inspired by Mario Kart and similar games, because the short-lasting battle items you can use in those games allow for fast and fun gameplay.

71
foefrenzy/maps.html Normal file
View file

@ -0,0 +1,71 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foe Frenzy</title>
<meta name="author" content="Ellpeck">
<meta name="description" content="A fast-paced fighting game where you battle up to three of your friends with random, short-lasting items">
<meta name="keywords" content="Ellpeck, Foe Frenzy, Steam, Discord, itch, itch.io, Battle, 2d, Top Down, Pixelart, MonoGame, Fighting, Game">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="../style/prettify.css">
<link rel="icon" href="favicon.ico">
<meta property="og:title" content="Foe Frenzy">
<meta property="og:description" content="A fast-paced fighting game where you battle up to three of your friends with random, short-lasting items">
<meta property="og:image" content="https://www.ellpeck.de/foefrenzy/media/logo.png">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@Ellpeck">
<meta name="twitter:creator" content="@Ellpeck">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/showdown@1.9.1/dist/showdown.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/prettify.js"></script>
<script src="../node/lib/showdown-prettify.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-150032076-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
let gtag = function () {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'UA-150032076-2');
</script>
</head>
<body>
<div class="main rounded">
<a href="/foefrenzy/"><img src="media/banner.png" class="banner rounded" alt="Foe Frenzy Logo"></a>
<div id="tutorial"></div>
<script>
$.ajax({
dataType: "text",
url: "docs/tutorial.md",
cache: false,
success: function (md) {
var converter = new showdown.Converter({
extensions: ["prettify"]
});
var html = converter.makeHtml(md);
$("#tutorial").html(html);
PR.prettyPrint();
}
});
</script>
<p class="footer"><a href="https://github.com/Ellpeck/Web">&copy; 2019 Ellpeck</a> &ndash; <a href="https://ellpeck.de/#impressum">Impressum</a></p>
</body>
</html>

4
foefrenzy/style.css
View file

@ -79,6 +79,10 @@ li {
margin-top: 40px;
}
#tutorial {
image-rendering: pixelated;
}
@media (max-width: 1200px) {
.main {
width: 80%;