A vlog covering the dark woods project first build
So I figured I should start writing in this blog a bit more, to track my own progress and to help organise my own workflows, as an archive of sorts as well as a space for figuring out exactly why I am doing all this haha especially as so much of the development work I have been doing of late has been pure self directed and experimental projects and applications as opposed to anything commercial led or working for others with specific commercial aims.
I have been for at least the past year focusing on game design and development instead of web development as I once did, although I have still been messing with JS projects and experimental apps with React to keep my hand in it. I have found this both a learning curve and a joy. Self Motivation becomes a big part of being an Indie / Freelance dev as well as sourcing clients if you are going the freelance route, let no one tell you it is easy, it is not. I have found as I more and more became an Indie Game Developer that the freelance jobs do become fewer, but on the flipside you do get more time to work on projects you might genuinely feel passionate about. So it’s a balancing act.
The trick I have not found yet is tying applications and games I make to making money, I have been doing ok on my Itch.io page with about 100+ downloads of my various game projects big and small, but alas this is not translating into sales, and many of my earlier projects I have on there as suggested donations due to them being smaller projects.
Still I am happy with some of my achievements of this year the most major of which I will explore below
This was the big project I wanted to get done this year using the GameGuru engine, and seriously pushing that engine to it’s limits during the dev process. Jinni started off as a conversation between me and Harvey, another Indie dev and artist based in Manchester, and at the time my next door neighbor. We had a few ideas and developed a concept for an RPG game set in a post-apocalyptic world of superstition and technology tracking the games development in a vlog series. It was an interesting experience to build such a large map and also to incorporate all the different scripts and elements to get the game to be an immersive and engaging experience and in a way I think we both underestimated how much work it really is to develop a decent sandbox RPG, still I am happy with the end result being what it is, but I think also on reflection GameGuru as an engine is just not fit for purpose for producing such a game, and it did take a lot of hacking to get many aspects of the games functionality to work, and I also find myself at times battling against the engine to get things to work (though a recent update sees a much improved engine tbf)
What remains with this game is refining the updates (of which there have been 3 already, additional bug elimination and incorporating a new version which is upcoming shortly using the updated GG engine). It also needs more marketing and it was the first game I wanted to experiment with selling on Itch.io but as of yet it has had no sales despite some interest and views. So it needs pushing more. Been toying with the idea of putting on Steam as well, but want to be confident in it before I consider that seriously. I am still proud of what I managed to do over 8 months or so of work on this project, despite some of its flaws.
NanoMaze was a robot maze game made over 48 hours in Unreal Engine for the last LudumDare GameJam and for me it represented my growing confidence with that engine, it contained three levels of mazes and even some basic AI / Pathfinding blueprints, I was very happy with how I was able to get on with this piece of work and am working on a mobile version which I hope to also put on the PlayStore after some refinement. A most positive gamejam.
Torn was another LudumDare entry, and was a much more random but useful evolution in my understanding of Unreal Engine, it was a dating sim set in Hell where the player had to engage with 4 potential bizarre suitors. This was fun, but also random project.
This is an interesting app idea I messed with for a few weeks, and I think I will return to it shortly after NanoMaze is converted to mobile and Jinni is updated, it is a mindmapping app where the user can map nodes of thought in 3D, and I am looking to update and create a full working prototype hopefully by the end of the year.
In conclusion I have had a productive year, not without frustration in terms of monetising anything I am doing, but certainly rewarding in terms of creativity and increasing my knowledge so it has not all been doom and gloom, and as I suspected going into more independent indie dev territory , it is not easy, so I have not been surprised by the difficulty of monetising applications and games I have developed. Being aware of weaknesses is the first step I think, to thinking of creative solutions to get stuff out there though, so onwards and upwards.
Exploration and explanation of my coding style in PHP / JQuery / HTML5 and CSS3 in my first WordPress theme. Some swearing but this is web development what do you expect?!!!
reading and giving thoughts on Google Memo
analysis of controversial parts about Women in IT from about 8:00 onwards if you want to skip to that
A 36 minute short project for beginners covering making a CV using HTML
This lesson (HTML) covers core concepts of HTML as well as a tutorial on how to create and write basic html for a CV.
CC (Creative Commons) so please if you so wish use as an educational resource.
Patreon donations gratefully received at https://www.patreon.com/noirvortex
Visual Code Download Link
Concepts – 0:00 to 8:45
What is HTML?
HTML5 and introduction to concept of CSS
Introduction to the concept of content and presentation
Commonly used tags
How to structure an initial Index.html file (and file formats)
Coding Tutorial : 8:48 – end
Guided video Tutorial showing how to create a basic CV .html file
Sourcecode here (but try coding it yourself first!!) https://github.com/drnoir/Basic-Web-D…
HTML history –
Download / fork etc on link above
Demo in HTML of responsive landscape images scaling and tested on multiple devices made with Bootstrap / css / JQuery
A quick demo of a landscape image slider made with Bootstrap, custom CSS and JQuery
View the Index.html example to see the resizing of all images to browser view windows across – desktop / laptop / mobile / tablet etc
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
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.
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….
[snippet slug=head lang=html]
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.
[snippet slug=762 lang=html]
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”. .
Get onto that more below later…
Read CSS below for further context
[snippet slug=css-for-strip-resize lang=css]
[snippet slug=sidemenu lang=html]
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
[snippet slug=sidenav-css lang=css]
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.
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.
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/