Category: Development

What I have learned from 10 years of being a Developer

What I have learned from 10 years of being a Developer

A semi serious / semi comedy video about my 10 years of being a developer including some stories about work I’ve done, some funny anecdotes and stories and how I got into game dev and web / multimedia dev, as well as a few bits of general advice on freelance design and development work.

With some captures from games and websites.

Neverwinter nights old mod I did when a youngster https://neverwintervault.org/project/…

and my website for up to date projects www.noirvortex.co.uk

Building a responsive Web Comic

Building a responsive Web Comic

Live Site Address: http://www.thedreamreaper.net

The Dream Reaper is a new webcomic being published online by Artist and Illustrator Augustinas Naslenas, working from his studio in Sheffield. This is a brief exploration of the code I used to make the site and some background. I will transform it into a tutorial in the coming week, but for now it is annotated code with some information / rough description.

Design Proposal

Gus approached me about a month or so ago to see if I could assist him with his vision with Dream Reaper, we had met randomly at a show he was doing at a Sheffield gallery and had a chat about Terrence Mckenna, technology and plants, so I knew that this guy was a fellow I had a lot in common with haha, his art piece also wowed me with it’s mix of the futuristic, the sacred and the ancient / occult symbolism and I recognised him as an artist engaged in work that was of much interest.

He proposed creating a multi-platform, responsive template for a webcomic he had in the pipeline, based around ideas of Shamanism, journeying and dreamwork. This naturally to me sounded like an amazing idea and challenge, so I jumped at the chance to approach it with my knowledge and experience of designing for the web.

The initial brief was clear, but it was going to be challenging in some respects, these respects being the way each strips had to nicely scroll on all devices (Tablet / Mobile / Desktop etc) and how to present that best was a key element, and had to be central to the sites design. The website also provided some interesting presentation / UX / UI questions – how to present the strip, but also how best to display chapters and navigation etc.

What follows is an exploration into the main technical implementations on the site thus far and some context and explanation of what the code is doing. It’s the first time I’ve done a more technical / in-depth blog like this, so please give me feedback if you have any. I am still looking to develop this website still further, so please bear in mind that whilst the website is up and running, there are still some incremental improvements to be made, so this does not reflect the final version of the code, which I am looking to next convert into a WordPress theme. Now with that preamble out the way….

Dependencies

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Passion+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Condiment" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah" rel="stylesheet">
<link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css">

Layout and Design of Dream Reaper

The first challenge and the major one to tackle straight away was the representation of the strips themselves as part of the main interface, Gus wanted ideally a responsive horizontal strip that would scale appropriately, maintaining maximum readability across all devices. I decided to use Bootstrap to create a basic layout (Using bootstrap pre-defined layout classes such as container / row fluid etc ) with container and a sidemenu.

The code for the HTML5 layout and associated presentation CSS (defined in Custom CSS) for responsiveness is displayed blow with annotations.

Layout HTML for comic Image/s

<div class="row-fluid">

    <button type="button" onclick="openNav()" id="backward" class="btn btn-default back"><i class="fa fa-bars fa-3x" aria-hidden="true"></i></button>
        <div class='strip scrollmenu'> 
            <img src ="content/eftsc-cover.jpg" class='make-it-fit'/><img src ="content/eftsc-4.jpg" class='make-it-fit'/><img src ="content/eftsc-cs.jpg" class='make-it-fit'/>
        </div>
    </div>
<!-- /row -->

Notes: Images have to be inserted into div as they are presented or else it creates a gap between images, breaking the design somewhat, seems to be a whitespace issue. The row fluid is a standard Bootstrap class that defines a row within the container div above it. The custom classes are “strip” and “scrollmenu” which in turn define that div as scrollable and defines some responsive and presentational css to ensure readability and scalability of the div / images within across all devices.

Each image also has it’s own class “make-it-fit”. .

The Button is for the menu to open up with an on click to trigger the openNav() javascript function which opens up the sidemenu.

Get onto that more below later…

Read CSS below for further context

CSS for presentation  of Comic Image/s

/*Classes to add scrollmeny to div rowfluid */
div.scrollmenu {
    overflow: auto;
    white-space: nowrap;
}

div.scrollmenu a {
    display: inline-block;
    top:0;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
}

div.scrollmenu a:hover {
    background-color: #e4bd78;
}

/*class for main content container div rowfluid for strip*/
.strip {
     /*Resize div to current viewport*/
    width:100%;
    height: auto;
    /*Positions content in center, add no repeat and fixed positioning*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: fixed;
     /*Maintains position*/
    left:0;
    right: 0;
    top: 0;
    bottom:0;
    
    text-align: center;
}

/*Image class to make image/s responsive within container rowfluid */
img.make-it-fit {
    position: relative;
    max-height: 99%;
    width: auto;
}

Next up is the layout and presentation / CSS and javascript controlling the side menu

Side Menu Layout HTML

<div id="mySidenav" class="sidenav">

    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    
    <a href="#" data-toggle="collapse" data-target="#collapseChapter" aria-expanded="false" aria-controls="collapseChapter">Chapters</a>
                
                <div class="collapse chapternav" id="collapseChapter">
                                    <a class = "chapter-inactive" href = '#'>1</a>
                                    <a class = "chapter-inactive" href = '#'>2</a>
                                    <a class = "chapter-inactive" href = '#'>3</a>
                                    <a class = "chapter" href = 'index.html'>4 - The Meeting</a>
                                    <a class = "chapter-inactive" href = '#'>5</a>
                                    <a class = "chapter-inactive" href = '#'>6</a>
                                    <a class = "chapter-inactive" href = '#'>7</a>
                 </div>
                            
    <a href="contact.html">Contact</a>
    <a href="subscribe.html">Subscribe</a>
    
</div>

Notes: See below for CSS context for classes. The div with class collapse chatpernav is the submenu for the chapter list that is opened via the datatoggle controls in bootstrap which you can read more about on the Bootstrap knowledge base 

CSS Sidemenu

/* The side navigation menu */
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 2; /* Stay on top */
    top: 0;
    left: 0;
    background-color: #77420f; 
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    font-family: 'Condiment', cursive;
    color:#ecb685;
    display: block;
    transition: 0.3s;
   
}

.sidenav h2{
    padding: 8px 8px 8px 32px;
}

.sidenav a.chapter{
    font-size: 20px;
}

.sidenav a.chapter-inactive{
    font-size: 20px;
    color:#e4bd78;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
    color: #e4bd78;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

.chapternav{
        background-color:#77420f;
}

Custom Javascript

$('#for').on('click', function (){
$( "img.make-it-fit" ).animate({
   right: "+=500px",
  }, 5000, function() {
    // Animation complete.
  });
});

/* Set the width of the side navigation to 250px and the left margin of the page content to 250px and add a black background color to body */
function openNav() {
    document.getElementById("mySidenav").style.width = "150px";
    document.getElementById("main").style.marginLeft = "150px";
    document.body.style.backgroundColor = "rgba(255,255,255,0.4)";
}

/* Set the width of the side navigation to 0 and the left margin of the page content to 0, and the background color of body to white */
function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft = "0";
    document.body.style.backgroundColor = "white";
}
 // RELOADS WEBPAGE WHEN MOBILE ORIENTATION CHANGES  
    window.onorientationchange = function() { 
        var orientation = window.orientation; 
            switch(orientation) { 
                case 0:
                case 90:
                case -90: window.location.reload(); 
                break; } 
    };

Notes: Two main function of the javascript here – top one two function simply control the sidemenu – showing and hiding it from view , and the other reloads the page when the orientation changes (was having a distortion issue when orientation changes from vertical to horizontal on mobile devices so this was required.

Future Developments of Dream Reaper

I am looking to next convert the dreamreaper code into a PHP WordPress template, which I will release as a general purpose template for people who want to publish web comics.

The website is online and working fine, but this remains the next stage in it’s development and in general, the next stage in the development of a theme for people who want to publish a web comic via wordpress which I think would be a nice addition.

Thanks for reading. Look for updates soon, I will be updating this blog over the next few weeks when time allows.

The Pain and Pleasure of Rapid Game Development as told via communist spaces

The Pain and Pleasure of Rapid Game Development as told via communist spaces

I have now completed the first working version of Kill Stalins! – a quick, short and simple FPS game made with the GameGuru easy game making tool which you can buy off Steam. It started as an exercise in designing an environment for an art collaboration but it quickly became apparent that the engine, though accessible and a fun tool to play with, would not offer the options and flexibility I required for the proposed project – Communist Spaces.

Communist Spaces – Initial phase

Communist Spaces, now called Catastrophic Spaces, is a project I am working on with visual artist Becca Smith to create visualisations and a virtual environment for a panel art piece / board game which we will show soon at a art show in London. My initial thoughts were to create these environment in GameGuru as I could get up to speed with it rapidly, having been working on a game called Zero Theory for a while in my spare time, and I’d already gotten to grips with it’s intuitive landscaping system and interface.

However as this process progressed I realised, good as GameGuru is for developing FPS and even Role-playing games, it just didn’t have the depth and real power that you get with a more advanced game engine, so I decided to return once more to having a crack at Unreal Engine, a task I had taken on before, with varying degrees of success, the learning curve of UE being significantly higher.

Success becomes Disaster

A quick video of one of the UE communist spaces level is below, it took a while to get back into UE development, but you do notice how many more options are available with it, in comparison to GameGuru as a tool straight way. I made some nice progress and was confident that I would have the spaces ready for converting into some sort of playable form via a web app or similar, I was encountering some issues with textures when rendering to HTML5 but I figured I might be able to iron them out.

Ekkk, I was too cocky and too soon haha. A few weeks into the development and having already made 3 spaces which were more or less finished, including a trench warfare level I was very proud of at this point, something happened, not exactly sure what, wherever it be corruption or some sort of glitch or error, but my UE project refused to open, at all.

I had not made regular backups, and this is really a  “more the fool me” tale. Always make whatever backups you can. Still all was not lost, I had made significant inroads into my knowledge of UE and I’d got more and more into the aesthetics of the communist projects space, along with the help of Becca and looking at her work from the last few months.

Silver Lining

The silver lining to all this is that I decided in the mean time to revisit my GameGuru project, and finish it off – make it into more of a blaster with a sense of humour type thing hence the title of Kill Stalins! So the work there was not wasted.

And of course learning more about UE. I think all development is really is failing until you win, so in that sense I have won.

Communist Spaces is now Catastrophic spaces, and I’m building a website with 12 corresponding video pieces for the show which is in a week. So whilst the remit has changed, it shall remain an interesting piece with interactivity and an interesting aesthetic and idea behind it, so all good.

You can download Kill Stalins! here .

Silver Linings are nice, development is hard, the pain is real, but worth it.

 

 

Rapid Website development using Bootstrap Template

Rapid Website development using Bootstrap Template

Website : www.chrisgodberart.co.uk 

Rapid Website Application 

A website created quickly in one night as an exercise in rapid web development to showcase some of my art using a responsive and accessible Bootstrap Template that I then customised with my own content, as well as adding some JQuery for a lightbox options to display some paintings and drawings.

UI 

I wanted the website UI to emphasise a strong bold visual that is easy and also fast to navigate so I using an existing bootstrap template here https://startbootstrap.com/template-overviews/stylish-portfolio/ which was based around responsive design and showcasing creative work.

Advantages of using Boostrap in rapid app / website dev 

This saved me the effort of having to create a lot of responsive classes and sped up the process of creating layout classes (one of the main advantages of using the bootstrap framework for quick prototyping and web design) whilst still presenting my work in an interesting way that is led by visual design and minimising text bloat (Which I consider important for showcasing visual art, to me personally nothing more offputting than a text heavy artist site with no pics of their work….)

I decided to also incorporate a video I did a few years ago of being interviewed about my artwork to make the website even more visual and interactive in a sense and to add a nice element of additional media.

It is simple in design and execution , and Bootstrap is often very useful for rapidly creating interfaces given it’s modular pre-defined classes / components / JS library and  grid system.

Advice on getting started with Bootstrap 

I think the best way to get started with it, is to build a simple website layout from scratch as opposed to building with templates at first, to get familiar with the CSS / Grid System and JS / JQuery functionality as well as directory structures. But it’s definitely is useful for rapid application building to use a template if you are tied for time, and still achieve a nice result without compromising quality design / visual aesthetic and responsiveness / cross browser compatibility.

Download Bootstrap here: http://getbootstrap.com/

 

Kill Stalins! Game Guru project

Kill Stalins! Game Guru project

Project: Kill Stalins!

Kill Stalins! is a short 1 level FPS I am building with the GameGuru game building tool, a tool which is designed for rapid game development and is available on steam. The idea of Kill Stalins! came from my friend Becca Smith who wanted me to design an idea of ‘communist space’ in a video game for an upcoming art show we have, I chose somewhat of a tongue in cheek avenue to explore and decided to make it a game of the ‘lone man’ lost in a world of Stalinist clones each wanting to kill you, a comical look at a serious bastard then in some respects haha, but anyway I will write a bit about Kill Stalins now from a game design perspective.

Gameplay / Objective

Kill Stalins! is a basic twist on the generic FPS, the aim of Kill Stalins! is to avoid or to kill all the stalins in game before they kill you using a mixture of dexterity and weaponry. I chose Stalin as the main enemy of the game because he is the renowned bogeyman of Communism (for good reason), and I wanted to emphasise how Stalinism and totalitarianism in general is an oppressive and limiting ideology, hence stalin’s being the clones of the oppressive version of communist society.  I want to develop the gameplay and mechanics further now, incorporating NPC characters and dialogue options, so as to give the player a more realistic human experience, I have added a Lenin character but will also add normal people too as well as figures from history,. More of a story element might also be developed, maybe I will give the player a specific objective of getting to a Stalinist stronghold, to rip the artifice of power down. This is one that requires some thought…

 

Aesthetic / Level Design

I decided to develop quite a stark Eastern Bloc look to the level, choosing snow textures and a bunch of block tower architectures to decorate the imagined Stalinist town – a grey town of limited possibility. I have used pre-defined assets for this project but GameGuru standard city models served the purpose of the eastern bloc look well enough. I also added a large statue in the centre of the the town, similar to that which was found in Stalingrad. See photos below for comparisons.

In terms of the level design, I wanted to make something that would look realistic in the context of the time and general oppressive setting of a Stalinist world, the level design is based around the concept of a ‘communist square’  as I envision it so statues of conquering proletarians and bizarre modernist constructionist public sculptures are included as well as oppressive brualtist buildings. In terms of how I wanted the level design to affect gameplay, I tried to create obstacles and dodge area for the player to navigate around in that open space, so as to balance gameplay. I still have more to do in that regard, and that is the next stage of development. As well as general development of the idea.

Further development

  • Enhance gameplay objectives
  • further balancing of combat
  • Build map – enhance and build a bigger map
  • Debug and test
  • tidy up existing map design
  • add more NPC and conversations options
  • add Sound FX

Watch this space for more updates on Kill Stalins!

Once it is done I will release it for free on here.