Jump to content
  • Advertisement
  • entries
    112
  • comments
    236
  • views
    136220

About this blog

Still making games...

Entries in this blog

 

Options screen

Hello there! Since the last time I scratched the walls of this journal with my fingernails I've added sound effects to the game (though not complete yet) and finished the points system, which adds points when the player performs a special move, such as hitting two blocks without breaking the chain. Click here for a video, though since this I've moved the points to the bottom bar because they just cluttered the display too much. :)

Lately I've been working on the options screen, which you can see below. It's not yet in the game, just a composition.


The idea is that you will slide the music and fx indicators to control the respective volumes and pull out the player1/player2 or keyboard/360 controller when you want to change input options.

Demosthenes

Demosthenes

Making a website from your game, for your game

Hello there. As mentioned in a previous blog entry, we're developing an adventure game called Outsider, where every puzzle is different. Outsider is being developed in Unity using a plugin called SVG importer, meaning most graphics in the game are vectorial. In the past year, we have improved the graphics a lot: January 2018                     April 2019   Details were added to the graphics, the lighting was tuned and we also started using Unity's recent post-processing profiles. Meanwhile, the website we built for the game still used screenshots from the old version and looked ancient:                   The website was also minimal, consisting of just images and gifs from the game interspersed with minimal text. So, since all the recent browsers support SVG, we decided to use the graphics from this scene, directly from Unity, to create a new website: If you want to take a look, it's live at www.onceabird.com. So, on to the code. Unity supports extending the GUI of your behaviours, so we inherited the Editor class in a WebsiteGeneratorEditor class to create a single button to export the scene layout: [CustomEditor(typeof(WebsiteGeneratorScript))] public class WebsiteGeneratorEditor: Editor { public override void OnInspectorGUI() { DrawDefaultInspector(); serializedObject.Update(); WebsiteGeneratorScript websiteGeneratorScript = (WebsiteGeneratorScript)target; if(GUILayout.Button("Export Scene")) { websiteGeneratorScript.ExportScene(); } } } Each Editor class references another script as a target, in our case it's named WebsiteGeneratorScript. Here's the full source code: WebsiteGeneratorScript.cs, I'll go over it bit by bit. But first some context. The SVG plugin we're using creates an SVG Renderer component (as opposed to the normal Sprite Renderer or other Renderer components) on each behaviour that uses an SVG asset:                   Although some code here is specific to SVG Renderer, most of it is based on Unity's standard position, rotation and scale Transform, so it should be easy to adapt to your project. The exported scene's SVG Renderers are contained in a single root transform named Room: And here's how the WebsiteGeneratorScript component is configured in this scene:                                     We'll gloss over the details for now. The WebsiteGeneratorScript class contains a recursive method named ExportTransform: string transformText = ""; ExportTransform(GameObject.Find("Room").transform, ref transformText); The method searches for an SVGRenderer on each transform, starting from the Room root transform. The transformText variable contains the generated HTML text that will be inserted into an HTML file in the end. Not all the elements in the scene will be exported, so the first thing the method does is return if the transform is in the excludedTransforms list (the contents of which you can see in the WebsiteGeneratorScript component image above): private void ExportTransform(Transform transform, ref string transformText) { if(Array.IndexOf<Transform>(excludedTransforms, transform) >= 0) { return; } If an SVGRenderer component is found, it generates the corresponding HTML img tag: SVGRenderer renderer = transform.GetComponent<SVGRenderer>(); if(renderer != null && !transform.name.ToLower().Contains("interactive")) { float width = renderer.vectorGraphics.bounds.size.x * scale * transform.localScale.x; float height = renderer.vectorGraphics.bounds.size.y * scale * transform.localScale.y; float left = transform.position.x * scale - width / 2.0f - (renderer.vectorGraphics.pivotPoint.x - 0.5f) * width; float top = -transform.position.y * scale - height / 2.0f - (renderer.vectorGraphics.pivotPoint.y - 0.5f) * height; string[] pathParts = UnityEditor.AssetDatabase.GetAssetPath(renderer.vectorGraphics).Split(new char[] { '/' }); string path = ""; for(int i = 3; i < pathParts.Length - 1; i++) { path += pathParts[i] + "/"; } string fileName = pathParts[pathParts.Length - 1]; path += fileName.Substring(0, fileName.IndexOf(".")) + ".svg"; if(positionDifferencesDic.ContainsKey(path)) { Vector2 diff = positionDifferencesDic[path]; left += diff.x; top += diff.y; } string rotationText = transform.eulerAngles.z == 0.0f ? "" : "transform: rotate(" + (-transform.eulerAngles.z) + "deg);" + "transform-origin: " + (renderer.vectorGraphics.pivotPoint.x * 100) + "% " + (renderer.vectorGraphics.pivotPoint.y * 100) + "%;"; string className; if(cssClassesDic.ContainsKey(path)) { className = " " + cssClassesDic[path]; } else { className = ""; } transformText += "<img src='" + path + "' " + "class='transform-image" + className + "' " + "style='left: " + left + "%; top: " + top + "%; width: " + width + "%; height: " + height + "%; " + "z-index: " + renderer.sortingOrder + "; " + rotationText + "' />\n"; } Since we wanted the website to be responsive, the left, top, width and height style properties are calculated in percentage, and every HTML img element uses position absolute. Width and height are calculated first, using a scale variable that is applied to all exported SVG, determining the global exported website scale, the transform's local scale and the size of the SVG itself. If you're using sprites, the width and height of the base image should be used here. Next left and top are calculated. The scale variable is also used, as is the SVG Renderer's vectorGraphics.pivotPoint, which is the center point of any rotation. The path variable contains the URL to the SVG asset, which must be placed separately from this code on your website's file structure. The UnityEditor.AssetDatabase is used to find the file path on the Unity project and replicate it to the exported website path. An example exported HTML img tag looks like this: <img src='SVG/CeilingLamp.svg' id="ceiling-lamp-1" class='transform-image ceiling-lamp' style='left: -24.65349%; top: -58.18391%; width: 10.21898%; height: 38.1918%; z-index: 50;' /> Unity's sortingOrder corresponds to CSS's z-index. Here's the transform-image CSS class: .transform-image { position: absolute; overflow: visible; padding: 0px; margin: 0px; border: 0px; transform: translate3d(0,0,0); max-height: 100%; } (The rest of the source code for the webpage can be viewed on our website, none of the CSS or JS is minified or obscured.) The generated HTML was just the starting point:  We had to condense several SVGs into a single file to improve performance, since SVG rendering still has a way to go on most browsers. Some graphics were created just for the website, such as the social media links on the bottom right corner and the trophies. We used CSS animations and transitions to do zooms but these made the SVG blurry in the iOS version of Safari, so we had to upscale the "clickable" elements in relation to the rest of the elements on the page. The shaking effect was also done with CSS animations. To simulate lighting on the webpage we created a transparent SVG shaped like the lamp light and used blend modes to create the simulated effect.   If you want to know more about Outsider and/or our development process, please follow us on Twitter or Instagram ( or on www.onceabird.com ).
And if there's something unclear or missing in this article please let us know. Thanks for reading!

Demosthenes

Demosthenes

 

DreamBuildPlay 2011...

...So, just submitted Graveyard Shift to the 2011 DreamBuildPlay competition. It's amazing how much faster development goes when you have a set goal.

Anyway, here's the video that accompanied the entry:

[media] [/media]

Demosthenes

Demosthenes

 

More FX

I've changed the blocks' appearance and added some particles effects to give the idea the Bennu is burning the blocks away. Video here.

Demosthenes

Demosthenes

 

Get In The Ring - Part 2

Hey,

I'm now into week 3 of Get In The Ring's development. A friend told me the camera was a bit jerky and pointed me to this excellent article that covers anything and everything about cameras in side-scrollers. For now I've adopted the camera smoothing approach where the camera chases the player position instead of always being centered on it. It helps when the player jumps around to counter enemy attacks.

I've also been implementing a new enemy that grabs the player and leaves him (more) vulnerable to enemy attacks if he doesn't react fast. Gameplay video:


Demosthenes

Demosthenes

 

:)

Soooo....tuaw.com just called Fold "The most original iOS puzzler in years". :)

Also some other quotes:

"You've probably never played a game even remotely like this before."

[color=rgb(68,68,68)][font=Helvetica]"If you're looking for a unique puzzle experience that will undoubtedly help you pass the time on a lazy afternoon, a short break at work, or the subway, Fold is a fantastic choice."[/font][/color]

http://www.tuaw.com/2013/07/13/daily-iphone-app-fold-is-the-most-original-ios-puzzler-in-years/

Demosthenes

Demosthenes

 

Particle effects, etc.

Over the last week I added a proper grappling hook to the ninja rope and also integrated the Mercury Particle Engine V3.0, which comes with a very nice editor.

The particle effects consist dust clouds that go off whenever the ninja walks or jumps off a wall and friction sparkles when the ninja wall slides.

">Video here.

Demosthenes

Demosthenes

 

Another game...

...Super Ninja Kung-Fu Extra Pow Pow was put on hold because I had an idea for a game that would be quick to make. For me, "quick" means 2-3 months. :)

Here's the first screenie and a poem, that doesn't even rhyme, to describe it:




Paved roads, walkways and bricks
The city sleeps in a moonlit bed
Untroubled by the lamp posts and HEY!
Is that a dinosaur on the way?



Demosthenes

Demosthenes

 

Flips...

Proper flips are now implemented! A sensor geometry, with collision response disabled, was added to the ninja body to make sure no objects are in the ninja's trajectory before he does a flip. Without this check, the ninja could do a flip right before hitting a wall, preventing the player from doing a proper jump. ">Video here.

Demosthenes

Demosthenes

 

Super Ninja Kung-Fu Puzzle Extra Pow Pow

Me and my brother started working this weekend on our next game after Bennu:

Super Ninja Kung-Fu Puzzle Extra Pow Pow

After Bennu, we're working on a game with many similarities but much more accessible. The main ninja character will be animated in the same way as the frog boss in Bennu (sort of a cardboard puppet). My brother drew the main character parts and I'm currently working on a character editor to position the parts, create joints to bind them together and set the limits of those joints. Video here.

We want to participate in DreamBuildPlay '09. The submission date is the 6th of August, less than a month from now. Will we make it? Stay tuned.

P.S.: The name of the journal changed to "Once a Bird". That's our group name, since there isn't a company to speak of. It's just me (main concept/programming/programmer art), my middle brother (decent art / suggestions), my cousin (music) and my older brother (general math and physics help / other suggestions).

Demosthenes

Demosthenes

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!