Posts

JavaScript 30: JS and CSS Clock

Image
  JavaScript 30 by Wes Bos Next up is a JavaScript and CSS Clock.  This lesson was a lot of fun as I was able to take what I initially learned and customized the overall look and feel of the clock.  The original clock had a blue background and a simple white design.  Although I could have stopped here, I decided to change the background and colors.  It is important to note that when Wes Bos said, "...now that we have created the animations for the seconds, you can stop the video and try to figure out the minute and hours hand" <--paraphrasing, I was able to do just that.  It felt great to be able to finish the project and then confirm my code with the rest of the video.  At this point, I'm feeling pretty proud of my JavaScript clock as I have made it into a themed based design, specifically A Clockwork Orange.  See screenshots below. Original JavaScript 30 JS CSS Clock A Clockwork Orange Themed JS and CSS Clock Alternate Image was from DeviantA...

JavaScript 30: JavaScript Drum Kit

Image
JavaScript 30 with Wes Bos Before we begin, I would like to point out that I have not had a good experience with JavaScript.  Unlike HTML and CSS, JavaScript felt like a lot of code and work.  What I mean to say is that in the past, instead of using JavaScript, I used frameworks and other technologies to help make things work without all of the fuss. From what I understand, this practice of being a "script kiddie" by copying and pasting existing code is a normal progression of the learning process.   This didn't end as well as I hoped because life jumped on top of my code learning adventure and the train came to screeching halt. In any case, below starts my journey back onto hand coding "vanilla" JavaScript.  First stop, JavaScript Drum Kit.  (side note, I made a drum kit back in the day using Flash) This was the the 1st lesson out of the 30 that are a part of the JavaScript 30 course.  For this lesson, I was able to create a drum kit using with most o...

Back On the Coding Horse

I am finally getting back into coding.  It has been a long hiatus, but the time away helped refocus my career goals.  Nevertheless, I am going to dive into coding.  Within this learning blog, I will work on web development and video games.  Yes, it is an ambitious goal, but I figured I would shoot for the stars.  If I land on the moon, that's okay too.  Below are a list of things I would like to learn. Web Development HTML CSS JavaScript Application/Game Development C++ Rust Python Although I may have a BS in Web Design and Interactive Media, I have yet to gain traction in my career.  Yes, I'm in IT currently.  I make a decent living, but I cannot help but want more than troubleshooting issues and documentation.  With all that said, to get back on the "coding horse", I'm going to take full advantage of the free tutorials and resources I have at my disposal.  First up is JavaScript 30 by Wes Bos.  In the web development world, he's w...

Lynda.com: Become a Unity 2D Developer (Day 12, Completion)

Image
More Enemies Aliens that Attack For this exercise, I once again had to create a game object using specified frames and assigning values accordingly.  Ultimately, I created another alien enemy using frames 1 - 10 for an idle animation.  From there, I created an additional animation based on the frames 11- 16 for an attack animation.  Lastly, I placed the new Alien enemy onto the stage and tested it.  Although the animations worked by manually adjusting the values, it was now time to add code to automate the animations. I then applied this script onto the alien in order to trigger the new attack animation.  At this time, the code and the trigger function is working as designed. **Note, there appears to be some sort of transparency issue with the Alien, but the code is working as intended.** Animation-based Attack Trigger In order to ensure that the alien attack will trigger the correct animations for the alien and the astronaut, I had to incor...

Lynda.com: Become a Unity 2D Developer (Day 11..Sort of)

Image
UNITY 2D LEVEL DESIGN (...continued part IV) Unfortunately, I had to take a huge departure from learning Unity.  Let's just say that I'm also studying Cisco stuff.  Needless to say, I figured it was time to finish what I had started.  Switches Create Switches This chapter was similar to other animation tutorials, specifically in the setup process.  First, I had to create a switch object by utilizing the three images of the switch, which are the three states of the switch, specifically "Down, Up, and Idle". Afterwards, it was a matter of setting up the animations and then sequencing them.  I created three animations for the switch: SwitchUpAnimation, SwitchDownAnaimtion, and SwitchIdleAnimation.  From there, the AnimState was configured according to the sequence of the animation. Switch Collision Trigger Creating the switch now leads to implementing code.  First, I created a new C# script and then proceeded to create new funct...

Lynda.com: Become a Unity 2D Developer (Day 10)

Image
UNITY 2D LEVEL DESIGN (...continued part III) ********** ******************** ******************** **************** Due to circumstances out of my control, my prior post for part III was accidentally deleted.  Below is my best efforts to document the learning process from memory. ********** ******************** ******************** **************** Doors Create a Door Creating the Door was much like all of the other game objects.  Essentially, I had to select a series of images and then combined them into a single Door animation. The Door's Logic Although the door has been created, it does not actually do anything at this time.  The remedy for this is to apply a custom C# script to delegate which frames to animate.  Values have been associated with the transition animations. Code Door Animation Events Animation events are merely markers for reference.  For example, the AnimState would delegate which transition to animate.  Trigge...

Lynda.com: Become a Unity 2D Developer (Day 9)

Image
UNITY 2D LEVEL DESIGN (...continued part II) The Map Editor Build a Level The Build a level tutorial was merely a review of prior sessions.  Ultimately, I had to setup the scene folder and file.  Afterwards, I merely selected the Tile Map option that was setup within the prior tutorials.  From there, I painted a few of the textures and added the astronaut (Player) prefab onto the stage.  Furthermore, I made the astronaut the target of the Main Camera.  By doing this, it enables the camera to follow the player as they move around the level.  However, it is important to note that the textures currently on the stage do not have any collision detection so the astronaut simply falls through everything.   Add Collisions The lack of 2D Collision will need to be remedied.  In order to make the tile picker options to be more robust, I had to modify a C# script, specifically TileMapEditor.  The goal is to include a "solid" checkbox prior ...