Project: Shooty Shooty SpyFall

TopHeaderSpyshot

linecut

SMIntroduction

Shooty Shooty Spyfall was a game that me and friends used to play at University, something I thought up one day, and is a custom take on the fun game Spyfall. It was designed to be a little more competitive since I personally didn’t like the voting system as much.

 

After playing it for some time, during one of the projects, I decided to create it as an app itself. The app was simply designed to help set up the game and give everyone roles, as the game was still played in-person and decided by in-person actions.

 

The game was designed by myself, with all visual and UI also done by me as well, and created to run on Android phones. (which we all had)

linecut

SMDevelopment

Developer: A Panda In Glasses (Solo)

Platform: Windows, Android (Planned) 

Engine: Unity 2D

Available: N/A

linecut

SMScreenshots

This slideshow requires JavaScript.

linecut

linecut

MMGameDesign

 

Shooty Shooty Spyfall was a modified take on the classic Spyfall game that friends and I would play. The difference is fundamentally down to how the game ends and the available actions given to all players, and this goes a long way in changing a lot about how the game is experienced.

It plays out like classic Spyfall except rather than requiring a unanimous vote, any player can “take a shot” at who they think the Spy is, immediately ending the game. This put a lot more pressure and increased the pace of games, changing the feel and enjoyment of it quite a lot more than anticipated.

Click the banner, or the link at the end of this sentance, to read more: Click! 

 

linecut

MORECOMINGSOON

linecut

A Panda In Glasses – Clothing! Why? Why not!

Promo1s

SMIntroduction

 

So while I was working on A Panda In Glasses’ designs, and having a good old time keeping the same orange colour permanently locked onto my colour palette in Photoshop, I was thinking of other things I could do. Though I was doing this in an attempt to create something substantial, it was fun and I wanted to explore a bit more!

At University, for Bears in Glasses, we made t-shirts so when giving presentations we looked like a very cool (I use the word “cool” loosely here) team. But it was a little thing which our tutors enjoyed.

I thought I’d somewhat re-explore this idea. Because it was fun!

 

linecut

 

Clothes5s

 

And so this was the first thing I thought I could do. Create a little miniature version of the full-sized logo:

BigLogo2

LittleLogo

 

Nothing too complex. Just a funny, little version. Which I then used to make the badge you see above! I thought that, during videos, it’d be a little thing so the logo is at least in frame and I thought it came out rather excellently. It’s a little off-centre, but I think that adds to the charm considering the glasses also peak out of the frame a little bit.

But I thought… why stop there?

linecut

 

This slideshow requires JavaScript.

So I made a t-shirt and a hoodie. Why? Why not!

 

StarStripe5

 

I made a few extra, custom images like the one above (which I’ve added a background too since the white would appear invisible) to just add a little bit of custom flair to it and they’re something I can be happy with!

It was a fun little throwback to University and they’re currently sat folded up beside my Bears in Glasses t-shirt.

 

linecut

 

I like to do random, creative things! I used spreadshirt.co.uk to make them, as they do custom clothing, and despite the colour not being exactly the same across the clothing, I’m very happy with them! We used them for Uni too, hence my choosing of them.

And no, this isn’t an advertising piece for Spreadshirt. 🙂

Project: A Panda In Glasses [WIP]

HeaderPhotoAPIG

linecut

SMIntroduction

I love games.

 

I love talking about games.

 

I love the colour orange.

 

And A Panda In Glasses is a personal project which brings them all together! APIG is (and will be) a video series created, edited, and presented by myself where I’ll be focusing on games and the teams/design decisions behind them.

 

I enjoy Youtube channels and other kinds of media from a variety of websites, but they seem to mostly focus on the industry. I’d like to instead focus on more behind-the-scenes things and discuss design principles and more, as well as forcing people to look at some very orange videos. We all win.

linecut

MORECOMINGSOON

linecut

linecut

MMLogoDesign

Click above to read more. ^

SmallLogo1

linecut

MMClothing

Click above to read more. ^

Clothes3s

linecut

Portfolio Design – What’s Changed?

This Portfolio has taught me one important thing; don’t ever let myself get a tattoo!

A lot’s changed since I first made this website, and my first post about my portfolio design was done back on my original website! When I had a fancy .wordpress.com URL and it looked… well, I wasn’t very happy with it. It looked very soft and dull! Now, what you’re seeing is nothing close to what it once looked like and I thought it’d be interesting to show the change.

When I was deleting old pictures from my website, I realized it might be fun to post up some of the first ones I made and compare them with the newest ones.

| Header Image

PlainHeader15

This was the original header for my Portfolio, with text written over the top of it. This was before I had created my logo and just made a very quick and simple striped pattern. At this stage, I wasn’t so sure about what I wanted it to look like, but already had the colour scheme in mind. Hence the offensively orange orange!

This slideshow requires JavaScript.

And these were some attempts at making a title as you see it now, which I’ve added to a slideshow since white on white would make the text look invisible! But I was trying to find a good identity for the website while also being simple, matching the theme, and actually being visible!

This slideshow requires JavaScript.

And these were the final attempts at making a unified style! I incorporated the stripes into the typeface, added in a shadow effect, and the deed was done. For the final design, well, just need to scroll up!

linecut

| Featured Images 

One part of WordPress I like is that every post and page can have a “Featured Image”. Being a Designer, I liked the idea of creating a unified theme of how I can do these featured images. To create a template and colour scheme I can adhere to and make every post and image have a unique image to it!

This is the first one I made, which was for the original Portfolio design post!

LayoutHeader1

It had the beginnings of the uniform design, with the orange border at the bottom and the logo in the corner, but I still wanted a bit more than that!

AGPortfolioDesign

And so this was what was created next!

I used a screenshot of my original website itself and created a small cut-off area on the left where I created a logo which should be very familiar as I still use it even today. I made a quick paintbrush as a vector, filled orange, and added some text over the top. And I was reasonably happy with this!

I used this exact template to make other icons but the other categories I wanted my website split into.

But it was shortly after finishing this I began working on a new website, and required different sizes for the images. Rather than re-sizing, and realizing I still wasn’t quite happy with them, I changed the icons and made a new style.

AGPortfolioDesign

And this is what I came up with! I took a screenshot of the new portfolio once again, after having updated the icons and logos, and placed it on the canvas just like how I’d done it before. I found the text was a lot bolder and it looked much more clean with the white text and orange outline, rather than the other way around.

But, the problem with this was, it’s quite hard to read. It’s not as bold. And so I went through quite a lot of changes in an attempt to make the icon easier to see at a glance. Glance value being very important in games and graphics!

And these were two attempts at making it happen.

The first one I just thought looked not in-keeping with the theme. I had no gradients and was using nothing but block colours, so the faded orange just didn’t fit. It didn’t work in the second either, but I incorporated the striped pattern into the design and that gave me the inspiration for the final one.

AGPortfolioDesign

Which was this!

For this one, I decided to focus on re-creating a “tab” which was easily readable, but most importantly matched the design of my portfolio. And I think it worked well. I used stripes to outline the vector image for some added flair, added my logo at the bottom along with the orange stripe I used as a footer, and I think it matched with the portfolio quite well!

This final design had everything needed. It looked good, it matched the theme of the website, and most importantly it was usable and clear by users! And that was that.

Here’s a few image galleries showing the same evolution for some other headers.

linecut

linecut

It’s been a fun and creative experience creating a website! And I’m very happy with how the design looks now. (That doesn’t mean a month from now I might change my mind, but we’re out of the woods for now!)

UI/Camera Overlay – LENSES Demo

For the full project page for LENSES, which was my final project at University, please click here!

Header1

| Camera Overlays

One of the most core parts about LENSES was a project was it being seen through the lens of a camera. So from the very start, a typical player HUD was never intended to be used. All necessary information would, in a similar way to games like Dead Space, be shown on the character.

But the screens added the extra depth of having overlays and on-screen effects.

This slideshow requires JavaScript.

All the cameras in the game have their own unique overlay with different effects placed on top of them. There were a few reasons for this:

  • Added immersion.
  • Increased aesthetic.
  • Environmental story-telling.

To look more closely at a few of them,

Screen2

They all share the same basic overlay which features the time, date, and camera identity in each of the corners. These were all done individually for each camera used and had important reasons as to why these were actually chosen.

Date

This was simply to show the exact day, month, and year which the game took place in.

Time

Many games have timed events. Our game was intended to be no different. And so a consistent clock in the corner always counting was going to be utilized when any timed event was necessary; if warned you have 10 minutes to do something there would be no on-screen count-down, but you could simply look at the timer of the cameras to know how much time was left.

Additionally, like Majora’s Mask did, the constant timer would hopefully add a sense of urgency to the player.

Camera Name 

The game didn’t feature any kind of map; you could see and read maps around the area, and the constant name in the corner allows a player to know where they are at all times and navigate the level.

| Effects 

The effects used, as you can see, all feature added noise to the images and a camera-effect overlayed on top.

Step6

This was to add more depth and a post-processing to the game even while it was running and would not only make it feel more immersive but more cinematic in the process.

The very first image used showing off these on-screen effects also features a large blood splat across the side, intended to look smeared down the edge.

Screen4

And screenshots like this one featured scraches on them, as if the screen had been damaged somewhat.

This stems from my initial mock-up on how the game would look:

cams1

This was the mock-up used when I presented the game to my team. On the left is a screenshot I took of the Resident Evil Remake. And on the right is the same screenshot but with a fuzzy, screen effect added, along with additional overlay and some on-screen effects. Everyone was unanimous in this looking a lot better and more immersive for a horror game.

The added level of immersion and on-screen effects had been well-received by our tutors.

| Computer Screen

As part of the game, you would also be intended to use a computer. And so for this, I had to create a simple computer screen which looked old fashioned, primitive, but was also fully usable by the user. Being a game, a static image wouldn’t quite do.

These were the final results. The screen features a few effects like scratches and chip, but otherwise this was created using Unity’s UI tool in-engine and was fully usable by the user, with animations. The final image even shows that we could include overlays of cameras to show other things happening in the game.


 

All these images were created using a combination of Adobe Photoshop, Illustrator, and Unity 4.

Graphic Breakdown – Yesterday’s Children

This is a graphical breakdown of an initial project I did at University called “Yesterday’s Children.”

FinishedStep

At University I did a variety of different projects and always took a great amount of time to make the presentation of these projects look as professional as I could. I therefore did a lot of custom promotional graphics and the above is one such example for a horror game project called Yesterday’s Children.

I thought that it came out very well, and this is a graphical breakdown of how it was done.

| Intent

When beginning this, the main ‘theme’, or idea, that I had was to have a photograph of children having been scribbled out, turn out, stabbed out, and finally cut out of a photograph and for the entire graphic to look very dark and gloomy, but not overly so. i.e. No buckets of blood everywhere, which I find cliche.

| Third-Party Assets

For this Uni project I utilized some assets I acquired from other sources that I made sure were available to legally use for an educational capacity. These are below.


| Breakdown

Step1

I started with just a basic wooden pattern which was darkened and slightly and the contrast lowered to make it look more dull.

Step2

The image of the cottage was then added into the canvas, re-sized into the approximate shape I wanted the photograph to be, and the contrast and brightness changed to look the opposite of the wood; very vibrant and bright.

A soft surface blur was then applied to the top, followed by a radial blur around the edges. This was done to add a somewhat surreal feel to the graphic.

Step3

A white rectangle was added underneath by expanding the size of the image by 10px, and the image made black and white.

Step4

On top of this, I created an additional overlay layer and added some scratch effects over the top to try and create an old photo-feel. This was done using dissolved stripe effects across, which was then duplicated and rotated twice. All layers were placed on a lower opacity.

Step5

On top of this, I added some grunge effects to the image. This was done using brushes I had previously created and are just ‘splat’ outlines with a lot stone-like texture applied on-top to add more depth. This was coloured a dark brown colour and also placed as an overlay layer, which dyed the black & white image this colour overall.

Step6

I also then did the same effect on the edges of the photograph.

Step7

An inner-glow was then applied onto a 0% fill layer the same size as the cottage image, to add a little more depth, and a satin fill layer on top of the edges of the photograph.

Step8

And finally, the shape of 2 boys were cut out of the graphic using the cut tool and saving the cut-out shapes for later. You can also notice I re-applied the layers and used perspective distorts to create a shadow for the boys. This would end up not being used due to additional effects placed atop the graphic.

Step9

With the image starting to take shape, I rotated the photograph into my desired location, so it looked sprawled atop the desk, and added a drop shadow beneath it. I also added some light blood effects onto the table and photograph, trying to imitate a ‘spatter’ going in the same direction.

This was done using, again, previously created brushes very similar to the grunge brushes but lacking any texture to them, coloured bright red, and then duplicated 3 times as overlay layers to create the desired effect.

Step10

I then took the scissors, rendered them from the white background, and placed them underneath the photograph. I feathered the edges slightly and lowered the contrast so they did not look as shiny.

Step11

And here I used the previously saved clippings from the photograph when cutting out the shape of the 2 boys. This was moved to the side of the photograph and was meant to show that they had been “cut out.”

Step12

The two boys were then coloured black, but rather than using a fill tool I simply used a hard brush to do it myself and deliberately causing an imperfect colour fill. You can see the photograph underneath still.

Step13

And this same hard brush was then used over the top of the outline to try and show someone having deliberately scratched and scribbled out the two boys using a pencil.

Step15

I then added the text for the title to the side of the graphic, utilizing the exact same hard-brush tracing to make it look scribbled on somewhat.

Step16

To add that final bit of depth and realism, since the image was coming together but still looked quite flat, I applied the entire image onto a single layer and rendered lighting effects to the side of the image. To make it look more like a real photograph being laid onto a table.

Step17

And this was the result of that. Already I believe it looks a lot more real and has a lot more depth to it.

Step18

The text was looking very hard to read, and I therefore re-applied a multiplied layer of the initial text, lacking the scribbled-out effect, to make sure that the text could be read. If the title of the project couldn’t be seen, that might be somewhat of an issue!


And that was the graphic finished! I believe it came out rather well and looks like a good piece of promotional art for a horror project which shows something happening, but doesn’t go over-board in explaining it fully and thus losing the mysterious element. Something very important for horror.

There was a few different outtakes I made that I changed my mind about. The first one was changed as I didn’t think the knife explained enough, and the second one due to the difficulty in seeing the cut-outs of the children.

What I hope I created was some exciting promotional art for my Uni project. My tutors were impressed and this was used on the front page. (And I felt bad for the printer which had to do it)

3D Design – Custom E3 “Stages”

E3 isn’t far off!

With how much I love games, E3 is always a highlight of my year. And with this portfolio set up and me enjoying it being somewhat of an outlet for my random and spontaneous creative episodes, I thought I would enjoy writing and sharing some thoughts on this year’s conferences.

But knowing me, I have to have some sort of design in order to do that. And thus, I thought I’d re-create a “stage” as the header graphic for each of the conferences!

 

This slideshow requires JavaScript.

Bethesda1

EA1

MS1

Nintendo1

Sony1

Ubisoft1

I’ll be doing a graphic breakdown later of how I did it, but this was a fun one done with Photoshop and Maya. The lighting’s still a bit off but hey, it works. And I’m looking forward to using them while discussing all the games shown at E3.

Can’t wait to play Half Life 3 too!

3D Design – From 2D to 3D

When I designed the logo for my Portfolio, one of the reasons I kept it simple was the desire to eventually re-create it in 3D and expand its uses. With a 3D version of the logo, I intended to create animations which would go before videos; in a similar way to company logos playing before a video game starts, that was something I was interested in doing myself.

And so this is Part 1 of that pursuit. This post will look at the creation of the 3D Logo; going from 2D to 3D, and the breakdown of how exactly I did that.

Graphic1

It’s a red panda, if that isn’t clear.

Above you can see a side-by-side comparison of the original 2D logo, before I rotated it and added the sticker fold on the bottom right corner of it, with the finished 3D version of the logo. All the pieces of this logo are ready to be animated and used in further capacities.

Below are a few more shots of the logo at different angles, and with Depth of Field enabled in the render.

Graphic2

CINEMATIC!

The tools I used to do this are Adobe Photoshop & Illustrator, and AutoDesk Maya.

| Breakdown

To start with, here is the logo on its own.

Step1

So the goal of this is a very simple one, which is to re-create this logo in 3D as close as possible. Having a clear and focused view on what exactly I’m doing and how exactly to do it is important and allowed for this process to have not taken much time.

I opened the PSD file in Photoshop and began to save various important parts of the logo into different files, maintaining transparency of them.

Step2

Folders are good!

After this was done, I had 6 .png images which, if put on top of one another, would create the logo.

These 6 images were then opened one by one in Adobe’s Illustrator.

Step3

Having a lie-down on the Illustrator canvas

Size is relatively irrelevant as they will be turned into vectors shortly. In order to do that, I used Illustrator’s Trace tool in order to convert the bitmaps into vectors.

Step4

Ready for a tracing.

These are the settings I decided upon, but there are only a few of the options which were absolutely important to this working. One of these was making sure the mode was set to Color, and for ‘Ignore White’ to be ticked. These two together ensured that the vector was then able to be used further.

Step5

I’m a vector!

And this is the image as a vector. You can see some slight changes here and there, but there’s no massive drop in quality or anything substantially noticeable. This puts more strain on your PC and settings can be reduced to improve performance, but thankfully this PC was made to run Crysis and so nothing can stop it.

The next step is an important one. Maya has a tool available to create objects out of Illustrator files, but only if saved a certain way.

Step6

Illustrator 8!

The file was saved as an Illustrator 8 file. I then did this for the 5 other images I had created, closed Illustrator and opened Maya. Here I can use the aforementioned tool in order to quickly bring these images into the third dimension.

Step7

Hello Maya.

These are the default settings of the tool, which can be found under the Create tab. These can be tweaked to find the perfect level, but I was more than happy with a thin bevel and extrusion. When happy I clicked Create…

Step8

kill me

And this was what appeared in Maya. As you can see it brings in the Illustrator canvas as a solid object, but you can also clearly see the outlines of our vector hiding somewhere inside there.

With this now in the program, I begun using the Face select tool to basically cut out the vector. This wasn’t so difficult and didn’t take long; just double-clicking faces to ensure all were selected and deleting them.

While doing this, I also applied materials to the model. I created 2 basic materials, an Orange and White blinn. As my logo is very simple in its colour palette, painting individual faces was all that was needed. UV texturing, etc. was not required.

Step9

I’m alive!

And this was the final result. With the model cut out and colours added to it, trying to ensure it was as close as possible to the original logo by making a few multi-cuts here and there to get rid of noticeable problems, I could then move on and do this again for the other 5 images of the logo.

Step9b

Almost done!

This is all the images added together in a 3D space, placed on top of one another as they were in 2D. With all the images being of similar size, the models all fit together perfectly without any re-sizing needed. There are a few rough edges here and there, but it is functional and ready to use as part of an animation.

Then I simply set the scene slightly with some lighting and cameras.

Step10

Lights, camera…

There were a few decisions made regarding the cameras and lights.

 

The light I adjusted until the desired effect was made. Due to the type of material I used to colour the objects, they should all be slightly reflective and appear ‘shiny’ and metallic.

For the cameras, I slightly increased the FOV, but added a depth of field option. This allows me to select a focused point (which would be where the logo is), and any objects during the animation which would be in the foreground would appear blurred in a cinematic way. Maya tells you exactly the distance between camera and selected object, so it was simple to input the correct number and tweak the F Stop to a desirable level.

Step11

Rendered!

And this is a rendered shot of the logo from the same angle as a previous image. Shadows and reflections are cast as intended, and only minor tweaks will be needed in the rendering to ensure the highest possible quality.

 

This slideshow requires JavaScript.

These are my render settings. I ensured that quality was set to high, and that Final Gathering and Global Illumination were enabled to make sure that the logo looks as good as it possibly can. Though this causes the render to take considerably longer, I believe it was worth the trade-off.

And a final shot of the logo.

Step12

I’m done!

I am happy with how it turned out and intend to use in the future for the animation. I’ll likely make a few tweaks here and there before then, but I would consider it finished!


Next up, I’ll be looking to animate this in 3D space. Stay tuned!

Graphic Breakdown – LENSES

Header1

I received a few comments on the above graphic, which is the main “banner” of LENSES, and I thought I would do a breakdown on how exactly I created it. Click here to check out the actual Project page itself.

To start with, the only tool I used to create this was Adobe Photoshop CS6.

The intention of the art was to fit with the game’s theme itself; the primary theme being that the game is experienced through the lenses of cameras through-out the facility, rather than being either first-person or a third-person camera which would follow the player. This is similar to classic Resident Evil titles but with an increased immersive value. I decided that imitating that sort of style would be a good fit and tell a person SOMETHING about the game with just a glance.

Step1

Step 1

The start was very simple. I chose a decent sized canvas to begin work on, filled it with a plain black and then added a small amount of Noise. The noise is a slight disruption to the black which will offer a bit more depth and will help in succeeding the goal of creating an image which looks like security footage.

Step2

Step 2

I found this image online and ensured that it was usable, and put the blending mode to Luminosity. This made it go black & white with a slight boost due to the black noise layer that had been previously made.

Step3

Step 3

I then re-applied the image on top of the previous one as an Overlay, tweaking the brightness, contrast and exposure of the images until it began to look like what you see above. The distorted view and heavily contrasted lighting makes it look as if the camera was damaged, and then I applied the same black noise layer on top. As you can see, the image features that noise and already looks like its on the way.

Step4

Step 4

On top of this, I then added the text and boxes. The text is added in just using the Text Editor, with the boxes drawn in using the Polygon tool. It’s always better to use that tool than to use a Selection tool and then fill it, so try to avoid doing that.

The text was left relatively un-touched and simply re-sized to be correct. The boxes were put into dual-layers with an overlay opacity at 50%. This made them still visibly apparent, but they blend into the background image a little more dynamic than if I had simply reduced opacity.

Step5

Step 5

The next step was to duplicate all of the text layers, leaving an un-edited backup, rasterize the duplicated copies and simply using the square selection tool to distort the text slightly. I made thin selections of the text and then holding shift to ensure they only moved across one axis, I just chipped away at them until they look relatively distorted.

After this, I turned the text layers again into Overlay and layered about 4 additional duplicated layers on top of these. As you can see the text continues to be readable and clear, but the main “LENSES” text interacts with the background shades slightly and gives it just a little more flavour.

Step6

Step 6

This is one of the main steps, which is creating the RGB distortion that you would see when taking a photograph of a computer screen. I created a small RGB pattern by making a 3×3 canvas and making the squares as you see there. I then converted those into a pattern, created a brand new layer on top of all the others and applied the pattern overlay to it.

I also added a vingette-style inner shadow. This gives a lot of additional depth, despite it being very slight and not massively noticeable at a first glance.

Step7

Step 7

I then lowered the opacity of that layer to around 65%. As you can see, however, it’s too clear and the image below just can’t be seen as well.

Step8

Step 8

This final step was done by hiding the RGB layer and then re-applying the entire image. Edit > Apply Image > Merged, which will put the entire image into a new layer. This layer was then placed above the RGB layer and was dual-layered in overlay once again.

You can see now that the image is beginning to take shape. The graphics are clear, and the distortion effect is noticeable.

Once this was done I applied the image once again, to create a new layer, and then used the Distort effect to make it seem less flat, as if you were looking at the image at a slight angle. A very slight gaussian blur was also added.

Step9

Step 9

After that, on this new layer, I used Render > Lighting Effects in order to add light to the image. The actual direction and strength of the light were tweaked until it was clear and looked nice, but a few options importantly were at certain values.

The gloss value was turned to 100%. This gives it the shine that a monitor would have, and Metallic was turned to -100%. This should give the lighting a “shiny” look, as if it is being cast onto a more reflective object. This goes a long way in giving the image a lot of depth.

Step10

And this is how the image looked after all of that. It’s slowly starting to come together, but still needs just a slight few additions in order to make it look perfect.

Step11

I duplicated the original RBG layer, distorted them similarly to how the original applied image had been, and then dual-layered them in overlay. I turned the opacity of both down just enough not to over-power the image, but to increase the screen distortion effect.

Step12

And finally I re-applied the image again, excluding the distortion layers. This ensures that the image is very clear and very readable, which it needs to be, and yet it does look distorted and very similar to how an image would look had it been photographed from a computer screen.

Additional work could be done on top of this, such as creating reflections on the screen, but I didn’t wish to overly clutter the art.


And that’s the breakdown of the graphic!

I hope you enjoyed this.