diff --git a/assets/sass/pages/blog.scss b/assets/sass/pages/blog.scss index 32b09a1..f46124d 100644 --- a/assets/sass/pages/blog.scss +++ b/assets/sass/pages/blog.scss @@ -438,13 +438,10 @@ background: linear-gradient(#000, #000) padding-box, linear-gradient(180deg, #ff9900, #000) border-box; - filter: grayscale(100%) contrast(1.2) brightness(0.9) sepia(100%) - hue-rotate(10deg) saturate(300%); } .blog-img-caption { color: #ff9900; - border: 1px solid rgba(255, 153, 0, 0.5); text-shadow: 0 0 5px rgba(255, 153, 0, 0.5); } } @@ -903,8 +900,7 @@ // Blog image styling .blog-img-container { - position: relative; - display: inline-block; + display: block; max-width: 100%; margin: 1.5em 0; } @@ -913,40 +909,26 @@ display: block; max-width: 100%; height: auto; + margin: 0 auto; border-radius: 12px; border: 3px solid transparent; background: linear-gradient(#000, #000) padding-box, linear-gradient(180deg, #0f0, #000) border-box; - filter: grayscale(100%) contrast(1.2) brightness(0.9) sepia(100%) - hue-rotate(60deg) saturate(300%); transition: all 0.3s ease; - - &:hover { - filter: grayscale(0%) contrast(1) brightness(1); - } } .blog-img-caption { - position: absolute; - top: 10px; - left: 10px; - background: rgba(0, 0, 0, 0.8); + display: block; color: #0f0; padding: 5px 10px; font-size: 0.85rem; + font-style: italic; font-family: monospace; - border: 1px solid rgba(0, 255, 0, 0.5); - border-radius: 3px; + text-align: center; text-shadow: 0 0 5px rgba(0, 255, 0, 0.5); - backdrop-filter: blur(5px); - pointer-events: none; - opacity: 1; - transition: opacity 0.3s ease; - } - - .blog-img-container:hover .blog-img-caption { - opacity: 0; + opacity: 0.9; + margin-top: 0.5rem; } // Navigation styling diff --git a/content/blog/2026-01-02-week-2-new-year/index.md b/content/blog/2026-01-02-week-2-new-year/index.md index adc1a3a..ec99568 100644 --- a/content/blog/2026-01-02-week-2-new-year/index.md +++ b/content/blog/2026-01-02-week-2-new-year/index.md @@ -12,7 +12,7 @@ draft: false - 🌐 I setup a dedicated server for this site and migrated off neocities, I am coming up with a plan on how to make sure updates keep getting posted there but redirect here. - đŸ“ș There's been a bunch of Taskmaster recently, including Champion of Champions which was good. Traitors is back on so we're up to date on that so far. -{{< img src="images/misc/thinkpad_t480s.jpg" alt="Thinkpad T480s complete with stickerbomb" width="900x" >}} +{{< img src="images/misc/thinkpad_t480s.jpg" alt="Thinkpad T480s complete with stickerbomb" >}} ## Links I Found Interesting diff --git a/content/blog/badgeware-2350-are-pretty-cool/index.md b/content/blog/badgeware-2350-are-pretty-cool/index.md index b69af06..7483c4d 100644 --- a/content/blog/badgeware-2350-are-pretty-cool/index.md +++ b/content/blog/badgeware-2350-are-pretty-cool/index.md @@ -8,19 +8,19 @@ draft: false My set of [Badgeware](https://badgewa.re/) badges arrived this week and I wanted to take a minute just go over unboxing and my initial thoughts. You’ve already had the spoiler; I think they’re pretty cool.  -{{< img src="images/DSCF3545.jpg" alt="Set of three Badgeware badge boxes" width="900x" >}} +{{< img src="images/DSCF3545.jpg" alt="Set of three Badgeware badge boxes" >}} # What are they? Made by [Pimoroni](https://shop.pimoroni.com/) here in the UK, they are smart badges that run MicroPython and have a little battery onboard, with WiFi and Bluetooth too. They come in three flavours: eInk, IPS display and LED array. I got one of each. The underlying specs are the same regardless of which version you’re looking at, an RP2350, 16mb flash storage, and 8mb PSRAM. You can check out the full specs on the [website](https://badgewa.re/) if you’re into that sort of thing. -{{< img src="images/DSCF3552.jpg" alt="Box contents of the Tufty 2350" width="900x" >}} +{{< img src="images/DSCF3552.jpg" alt="Box contents of the Tufty 2350" >}} # Unboxing Popping them open is quick enough, they come in recycled feeling cardboard (it doesn't state it is, but it isn't the horribly glossy style cardboard) and inside the box is the device, a different lanyard in for each type, a brief getting started leaflet and most importantly a STICKER.  -{{< img src="images/DSCF3553.jpg" alt="Stickers waiting to find a home on one of my laptops" width="900x" >}} +{{< img src="images/DSCF3553.jpg" alt="Stickers waiting to find a home on one of my laptops" >}} The only downside is there’s no protection on the screen casing itself, and one of mine arrived with a scratch - I presume from the lanyard clip - but a brief email to Pimoroni support and they had dispatched a replacement cover the same day so I can’t complain about that. I do feel this could have been avoided, but at the cost of adding disposable packaging to the box. I guess for the small amount of replacement covers they might have to issue the planet is overall thankful for the lack of disposable packaging included. diff --git a/content/blog/tiddler-dev-blog-1-making-a-plan/index.md b/content/blog/tiddler-dev-blog-1-making-a-plan/index.md index 4fdd873..b16ee56 100644 --- a/content/blog/tiddler-dev-blog-1-making-a-plan/index.md +++ b/content/blog/tiddler-dev-blog-1-making-a-plan/index.md @@ -48,7 +48,7 @@ After I got a cop on myself I closed Tiled and opened up Godot and started getti After a few days of tinkering, I did have what could be considered the bones of a game. -{{< img src="tiddler-1.png" alt="Tiddler - The First Screenshot" width="900x" >}} +{{< img src="tiddler-1.png" alt="Tiddler - The First Screenshot" >}} Yes, I did make some more of a map - it wasn't fun watching some boxes move around the screen. diff --git a/content/blog/tiddler-dev-blog-3-tools-for-tiled/drawing_random_objects.webm b/content/blog/tiddler-dev-blog-3-tools-for-tiled/drawing_random_objects.webm new file mode 100644 index 0000000..5d02666 Binary files /dev/null and b/content/blog/tiddler-dev-blog-3-tools-for-tiled/drawing_random_objects.webm differ diff --git a/content/blog/tiddler-dev-blog-3-tools-for-tiled/drawing_random_tiles.webm b/content/blog/tiddler-dev-blog-3-tools-for-tiled/drawing_random_tiles.webm new file mode 100644 index 0000000..25327a3 Binary files /dev/null and b/content/blog/tiddler-dev-blog-3-tools-for-tiled/drawing_random_tiles.webm differ diff --git a/content/blog/tiddler-dev-blog-3-tools-for-tiled/foliage.png b/content/blog/tiddler-dev-blog-3-tools-for-tiled/foliage.png new file mode 100644 index 0000000..5cfff1b Binary files /dev/null and b/content/blog/tiddler-dev-blog-3-tools-for-tiled/foliage.png differ diff --git a/content/blog/tiddler-dev-blog-3-tools-for-tiled/index.md b/content/blog/tiddler-dev-blog-3-tools-for-tiled/index.md new file mode 100644 index 0000000..636dea0 --- /dev/null +++ b/content/blog/tiddler-dev-blog-3-tools-for-tiled/index.md @@ -0,0 +1,50 @@ +--- +title: "Tiddler Dev Blog #3 - Tools for Tiled" +date: 2026-02-19T09:13:42Z +tags: + - tiddler + - tiled + - gamedev +draft: false +--- + +I'd not really had any experience with [Tiled](https://www.mapeditor.org/) but when I found out about it, it seemed like a great choice for having quick and transferrable map editing that I could then apply into Godot. + +As I started building out the maps for Tiddler I found myself wanting to scatter a lot of decorative objects around - rocks, plants, props, ground variation - the kind of thing that makes a map feel lived-in. Doing this one tile at a time is fine for a few objects but becomes genuinely tedious at scale. What I wanted was a way to say "pick something random from this pool and put it here" without any effort. + +{{< img src="foliage.png" alt="An example of the dense foliage I wanted to be able to place quickly" >}} + +### The Built-in Approach: Terrains + +Tiled does have something for this. The [terrain system](https://doc.mapeditor.org/en/stable/manual/terrain/) lets you define sets of tiles that should be randomly chosen and blended together based on their neighbours. It's a proper solution to the broader problem of placing varied tiles across a layer. + +You have to define terrain sets, assign corner and edge types to every tile variant in the set, and configure how they transition. For the use case of "I have six rock tiles and I want to click to drop a random one" this is considerably more work than the problem warrants. The terrain system earns its complexity when you're doing auto-tiling and transitions but for simple random decoration it seemed like overkill, and far more effort than I was willing to put in. + +I looked around for a simpler plugin that just did what I needed and couldn't find one that was simple enough, so I quickly wrote two. + +### Two Plugins + +Both plugins are available on GitHub at [unbolt/tiled-plugins](https://github.com/unbolt/tiled-plugins). They use Tiled's built-in JavaScript scripting API and show up as tools in the toolbar once installed. + +{{< img src="ui_buttons.png" alt="The two plugin tools in the Tiled toolbar" >}} + +#### Random Tile Placer + +The workflow should be as simple as it sounds: select one or more tiles from your tileset panel, switch to the Random Tile Placer tool, and click on a tile layer. Each click places a randomly chosen tile from your selection. + +{{< img src="selecting_tiles.png" alt="Selecting a pool of tiles in the tileset panel" >}} + +{{< video src="drawing_random_tiles.webm" caption="Placing random tiles across a layer" >}} + +#### Random Object Placer + +The object placer works the same way but targets object layers instead of tile layers, placing each tile as a map object. It also adds a 50% chance to flip the placed object horizontally, which does a surprising amount of work in making a field of repeated props look less mechanical. The tool is also bound to **R** for quick access. + +
+{{< video src="selecting_objects.webm" caption="Selecting the object pool" >}} + +{{< video src="drawing_random_objects.webm" caption="Placing random objects with variation" >}} + +
+ +Both tools have made populating maps dramatically faster. Dropping in a scattering of rocks and plants that would have taken tedious manual placement now takes a few seconds. If you're using Tiled and want something similar, the plugins are on [GitHub](https://github.com/unbolt/tiled-plugins) — installation is just copying the `.js` files to your Tiled plugins directory. diff --git a/content/blog/tiddler-dev-blog-3-tools-for-tiled/selecting_objects.webm b/content/blog/tiddler-dev-blog-3-tools-for-tiled/selecting_objects.webm new file mode 100644 index 0000000..1efeb6a Binary files /dev/null and b/content/blog/tiddler-dev-blog-3-tools-for-tiled/selecting_objects.webm differ diff --git a/content/blog/tiddler-dev-blog-3-tools-for-tiled/selecting_tiles.png b/content/blog/tiddler-dev-blog-3-tools-for-tiled/selecting_tiles.png new file mode 100644 index 0000000..0c8c5b7 Binary files /dev/null and b/content/blog/tiddler-dev-blog-3-tools-for-tiled/selecting_tiles.png differ diff --git a/content/blog/tiddler-dev-blog-3-tools-for-tiled/ui_buttons.png b/content/blog/tiddler-dev-blog-3-tools-for-tiled/ui_buttons.png new file mode 100644 index 0000000..cee074a Binary files /dev/null and b/content/blog/tiddler-dev-blog-3-tools-for-tiled/ui_buttons.png differ diff --git a/layouts/buttons/single.html b/layouts/buttons/single.html index bb874ce..36b81e0 100644 --- a/layouts/buttons/single.html +++ b/layouts/buttons/single.html @@ -44,7 +44,7 @@
{{ partial "responsive-image.html" (dict "src" - "images/misc/thinkpad_t480s.jpg" "alt" "My Thinkpad T480s with stickerbomb" "width" "900x" "page" .) }} + "images/misc/thinkpad_t480s.jpg" "alt" "My Thinkpad T480s with stickerbomb" "page" .) }}
diff --git a/layouts/partials/responsive-image.html b/layouts/partials/responsive-image.html index 5d65893..3522c77 100644 --- a/layouts/partials/responsive-image.html +++ b/layouts/partials/responsive-image.html @@ -1,15 +1,15 @@ {{ $src := .src }} {{ $alt := .alt | default "" }} -{{ $width := .width | default "800x" }} +{{ $width := or .width "800x800" }}
{{ with .page.Resources.GetMatch $src }} - {{ $resized := .Resize $width }} + {{ $resized := .Fit $width }} {{ $alt }} {{ else }} {{ with resources.Get $src }} - {{ $resized := .Resize $width }} + {{ $resized := .Fit $width }} {{ $alt }} {{ else }} {{ $alt }} diff --git a/layouts/shortcodes/video.html b/layouts/shortcodes/video.html index f590d5a..ec84e63 100644 --- a/layouts/shortcodes/video.html +++ b/layouts/shortcodes/video.html @@ -6,7 +6,7 @@ loop muted playsinline - style="position: relative; z-index: 4; max-width: 100%; height: auto" + style="position: relative; z-index: 4; max-width: 100%; height: auto; border-radius: 12px; border: 3px solid transparent; background: linear-gradient(#000, #000) padding-box, linear-gradient(180deg, #0f0, #000) border-box;" >