Coder Social home page Coder Social logo

abc123's Introduction

Paul Bernard-Hall

Game Developer
              JavaScript Fanatic


Here are some of the things I use the most:

JavaScript / TypeScript

Game Dev with Phaser and React

Image Editing with Krita and Aesprite

2D Skeletal Animation with Spine 2D

Map Editing with Tiled

Normal Map Creation with Laigter

Android & iOS with Capacitor

Hosting on Ubuntu with Node.js, NGINX, and PM2

Protected with Cloudflare and Certbot


Blog


Tue Aug 20, 2024

Sadly noticed my nib was dead on Monday, thanfully replacements are coming.



I found out that I could apply gradient map to textures on brushes, which adds a lot of depth and shading in a single stroke. While all these examples are of "Texture - Reptile", the gradients look very similar applied to other textures. These are beautiful, and this is definitely going to help for metallic surfaces too.

Find the Gold / Pearl gradients here: gold-and-pearl-gradients



Made a rainbow cloud brush:



I found a brush pack that really captures the thick paint amazingly. You can see it in the background undr my name.

Find the brush pack here: Memileo Impasto Brushes




Sat Aug 17, 2024

Lots of updates. This week I have been working on clouds, skin, plants and trees.

Cloud Study

These are my two favorites from the cloud study:

I also had a lighter background ready so I can see how that changes them. It made me realize I can't rely on the background for shading the clouds and need to mix in the light/darker shade myself if I want it to show on both light/dark backgrounds.

You can see here is where I realized the white cloud didn't really have any darker shades because I was relying on the black background for that. However the purple cloud I added the shading myself.

Skin Study:

I need to play with the different pore brushes, but I am getting an idea of how to make skin.

Greenery Study

I got a good start on trees and bushes. I want to make a little personal library of pre-made assets.

I am going to do some bushes or trees with a separate branch layer, so if I wanted to let you gather from a bush I could use a particle effect during the gatherng and then remove the leaf layer to represent a depleated resource

Cloth / Fabric

Along with Metal this has been a tricky one so far... While there are some canvas textures, there is no canvas brush by default or in any brush pack I found so far.

So I created my own canvas texture brushes. Selecting the texture, and then changing the TEXTURE blend mode to "Lightness Map" was all I needed to do to get this effect. Pixel Engine. (Blend mode under the brush texture pattern options, not general brush blend mode)

Left Texture: "Woof Tissue" for Burlap - Right texture: "01 Canvas" for a finer thread appearance

Drawing, rigging, and animating a full model

I decided to draw a model as if it was an artists poseable mannequin. I figure this will be the easiest way to start learning how to make human-ish movements.

First I drew each separate part in Krita, and exported it to another file where I merged each body part as a single layer or group. Then I imported each part into Spine, create a skeleton, and attached the parts to the skeleton.

Then I was able to get a (very rudimentary) wave animation keyed out.

Dragon Skin Reborn

I added a few more colors to the dragon skin pattern. I also realized I will need to come up with something else for actual scales. I reawlly love this texture and how this is coming along. Can't wait to actually draw and animate the dragon.

Dragon Skin Purple & Green



What's next...

The coming week I will be focusing more on character models and animation. I need to make side-profile versions, and then try making walk/run/jump animations. Also dragons. And fire.



Mon Aug 12, 2024

I am getting familiar with different brushes in Krita, and hoarding any good bundles I can find. Advanced brushes can make certian things, particuarilly textures and hair, a lot easier.

I have been trying a few different methods to make dragon scales, this one being made with a reptile texture brush and a few layers underneath.



I also found a cloud brush makes nice looking clouds very easily.



Here are some of my favorite brush packs so far:

Rakurri Brush Set V2

FizzyFlowers Essential Brushset V2

Grass and Fields Brush Pack - KMC Visuals

Basic Cloud Brushes - Bea2


Fri Aug 9, 2024

For the past month or so I have been learning Spine 2D. Spine lets you create skeletal based animations, which can greatly reduce filesize compared to using spritesheets. It also makes it easier to create natural feeling animations, as it can interpolate between keyframes for you. Spine pro also supports meshes and mesh deformation, which can be weighted to bones so moving a bone can deform specific vertices

Here is a small example of making a butterfly animation

1: Source Image

2: Dissecting it in Krita

3: Rigging each part together in Spine with a skeleton

4: Keying the animation in Spine


       

     

     

     

abc123's People

Contributors

paulb-h avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.