Projects – Page 2

Category: Projects

March 17, 2013

A Space Shooter For My First Game Jam

That’s right, I’m working on a space shooter for my first ever game jam, which is being hosted by Newgrounds. The theme is ‘touch’, meaning the game has to have touch-based controls, and it is a Construct 2 tournament meaning participants are encouraged to use Construct 2. Most of the prizes include Construct 2 licenses, so it allows winners using the free version of Construct to win a personal license, or in my case, be able to upgrade to a business license without forking out lots of cash. You can read more about the game jam here: http://www.newgrounds.com/bbs/topic/1335307.

Currently my game does not have a name yet, although I intend to have one by the April 30 submission deadline. It is a space shooter that is best described as a combination of Asteroids and Space Invaders. My inspiration to create this game comes from a space shooter I played back in 2000 on Windows XP. It was a single-player game I got from an arcade multipack that featured asteroid fields, power-ups, and ship shields that could absorb any damage or collision. As of now, I am proud to say that my game prototype has recreated much of the mechanics of that game, and in the near future I will be expanding the game further to make it more interesting since there is over a month before the game jam deadline.

Can I play it now?

Yes, you can. The latest build can be played here: https://www.zesix.com/html5/SpaceGameV2/. The current controls are on the keyboard, but I will be including touch controls as soon as the graphic artist prepares the UI elements for that.

The current iteration of the game makes it very hard for a player to get past wave 8. I will be adding game features between now and the game jam deadline to make this less of an impossibility. In addition, all graphics and sounds currently used are placeholders. I have gotten in touch with a hobbyist sound artist and graphic artist to replace the placeholder media in the game, so stay tuned for a more polished experience in the near future.

The Near Future

Despite the game being playable right now, there are a lot of things to change and features to add. My current to-do list is as follows, for anyone who is interested in what is coming up next:

Have enemies spawn only on the left and right sides. This will prevent any issues where enemies spawn close to the player. I will include code to make sure that if the player is near the left or right edge, any enemies that spawn will be repositioned away from the player to prevent ‘spawn collisions’.
Have asteroids spawn only on the top and bottom. This solves a similar issue as the enemies, and I will also include code to prevent the player from immediately colliding with a spawned asteroid.
Remove momentum loss at the end of a level. Currently, whenever the player complete a level, all momentum will stop as the next level begins. I will be removing the momentum loss so that the transition is more smooth.
Remove asteroid destruction at the end of a level. Right now, all asteroids from a wave are destroyed upon the completion of the wave. I intend to remove this so that debris from the previous level persists in the new level. I also will lower the amount of asteroids spawned per level to just one major asteroid per wave, this way things don’t get out of hand at an exponential scale.

Of course, once the sound artist and graphic artist finish some of their work, I will slowly integrate their media into the game to replace the current placeholder artwork.

I Found A Bug! Where Can I Report It?

If you’ve found a bug or glitch, please report it in the comments here. In order for me to fix anything, I have to be able to reproduce it so please describe the problem with as much detail as you can. Also include what browser you are using since some bugs don’t occur in all browsers.

That sums up things for now. For the next few weeks, I will be working on this to get it ready for the game jam submission. Stay tuned!

May 18, 2012

Second HTML5 App Update – Text Arranger 1.2

New Features

Alpha (transparency) control.
Shadows, with both horizontal and vertical offsets, can now be applied and adjusted.
Color gradients, both linear and radial, can be applied to the text. Image gradients, however, are not supported.
Canvas resizing now supported.
Image generation, so now you can save whatever you created as an image!

The JavaScript Code

$(document).ready(function() {
  // Uses Modernizr.js to check for canvas support
  function canvasSupport() {
    return Modernizr.canvas;
  }

  // Once DOM is ready, start the app
  canvasApp();

  function canvasApp() {
    // Check for canvas support
    if (!canvasSupport()) {
      return;
    }

    // Grab the canvas and set the context to 2d
    var theCanvas = $("#canvasOne");
    var context = theCanvas.get(0).getContext("2d");

    // Variables for text handling
    var message = "";
    var fillOutline = "fill"; // set default fill/outline to fill
    var fontSize = "50";
    var fontFace = "serif";
    var fontWeight = "normal";
    var fontStyle = "normal";
    var textFillColor = "#000000";
    var textStrokeColor = "#000000";
    var textAlpha = 1; // no transparency by default
    var shadowX = 1;
    var shadowY = 1;
    var shadowBlur = 1;
    var shadowColor = "#707070";
    var fillType = "colorFill";
    var gradientFillColor = "#000000";

    // Variables used for positioning
    var textBaseline = "middle";
    var textAlign = "center";

    // Event listeners
    $("#textBox").keyup(textBoxChanged);
    $("#fillOutline").change(fillOutlineChanged);
    $("#textSize").change(textSizeChanged);
    $("#textFont").change(textFontChanged);
    $("#fontWeight").change(fontWeightChanged);
    $("#fontStyle").change(fontStyleChanged);
    $("#textFillColor").change(textFillColorChanged);
    $("#textStrokeColor").change(textStrokeColorChanged);
    $("#textAlpha").change(textAlphaChanged);
    $("#shadowColor").change(shadowColorChanged);
    $("#shadowBlur").change(shadowBlurChanged);
    $("#shadowX").change(shadowXChanged);
    $("#shadowY").change(shadowYChanged);
    $("#fillType").change(fillTypeChanged);
    $("#gradientFillColor").change(gradientFillColorChanged);
    $("#canvasWidth").change(canvasSizeChanged);
    $("#canvasHeight").change(canvasSizeChanged);
    $("#createImageData").click(createImageDataClicked);

    // First screen draw
    drawScreen();

    // Event handler functions
    function textBoxChanged(e) {
      var target = e.target;
      message = target.value;
      drawScreen();
    }

    function fillOutlineChanged(e) {
      var target = e.target;
      fillOutline = target.value;
      drawScreen();
    }

    function textSizeChanged(e) {
      var target = e.target;
      fontSize = target.value;
      drawScreen();
    }

    function textFontChanged(e) {
      var target = e.target;
      fontFace = target.value;
      drawScreen();
    }

    function fontWeightChanged(e) {
      var target = e.target;
      fontWeight = target.value;
      drawScreen();
    }

    function fontStyleChanged(e) {
      var target = e.target;
      fontStyle = target.value;
      drawScreen();
    }

    function textFillColorChanged(e) {
      var target = e.target;
      textFillColor = "#" + target.value;
      drawScreen();
    }

    function textStrokeColorChanged(e) {
      var target = e.target;
      textStrokeColor = "#" + target.value;
      drawScreen();
    }

    function textAlphaChanged(e) {
      var target = e.target;
      textAlpha = target.value;
      drawScreen();
    }

    function shadowColorChanged(e) {
      var target = e.target;
      shadowColor = "#" + target.value;
      drawScreen();
    }

    function shadowBlurChanged(e) {
      var target = e.target;
      shadowBlur = target.value;
      drawScreen();
    }

    function shadowXChanged(e) {
      var target = e.target;
      shadowX = target.value;
      drawScreen();
    }

    function shadowYChanged(e) {
      var target = e.target;
      shadowY = target.value;
      drawScreen();
    }

    function fillTypeChanged(e) {
      var target = e.target;
      fillType = target.value;
      drawScreen();
    }

    function gradientFillColorChanged(e) {
      var target = e.target;
      gradientFillColor = "#" + target.value;
      drawScreen();
    }

    function canvasSizeChanged(e) {
      var styleWidth = $("#canvasWidth").val();
      var styleHeight = $("#canvasHeight").val();

      //changing canvas size & resolution - no change in size ofr the drawn elements (manipulating direct html attributes - first remove the css that can get in the way)
      /*
      theCanvas.width('').get(0).width = styleWidth;
      theCanvas.height('').get(0).height = styleHeight;
      */

      //changing canvas size but not resolution (manipulating css width/height) - "zooming" at the loss of quality
      theCanvas.width(styleWidth);
      theCanvas.height(styleHeight);

      drawScreen();
    }

    function createImageDataClicked(e) {
      var imageData = theCanvas.get(0).toDataURL();
      window.open(imageData, "canvasImage", "left=0, top=0, width=" + theCanvas.width() + ", height=" + theCanvas.height() + ", toolbar=0, resizable=0");
    }

    // Draws or updates the screen.
    function drawScreen() {
      // Canvas resets
      context.globalAlpha = 1;
      context.shadowColor = "#707070";
      context.shadowOffsetX = 0;
      context.shadowOffsetY = 0;
      context.shadowBlue = 0;

      // Background
      context.fillStyle = "#ffffff";
      context.fillRect(0, 0, theCanvas.get(0).width, theCanvas.get(0).height); //width and height in terms of canvas resolution should be used

      // Outside Border
      context.strokeStyle = "#000000";
      context.strokeRect(5, 5, theCanvas.get(0).width-10, theCanvas.get(0).height-10); //width and height in terms of canvas resolution should be used

      // Change global alpha and shadows to whatever the user has set
      context.globalAlpha = textAlpha;
      context.shadowColor = shadowColor;
      context.shadowOffsetX = shadowX;
      context.shadowOffsetY = shadowY;
      context.shadowBlur = shadowBlur;

      // Text
      context.font = fontWeight + " " + fontStyle + " " + fontSize + "px " + fontFace;
      context.textBaseline = textBaseline;
      context.textAlign = textAlign;

      // Gradient handling
      var metrics = context.measureText(message); // get width of the text; used for the gradients
      var textWidth = metrics.width;
      var tempColor;

      // Variables created in order to center the text on the canvas
      var metrics = context.measureText(message);
      var textWidth = metrics.width;
      var xPosition = (theCanvas.get(0).width/2); //width and height in terms of canvas resolution should be used
      var yPosition = (theCanvas.get(0).height/2); //width and height in terms of canvas resolution should be used

      // if a gradient is chosen, we add stops at 0% and 60%
      if (fillType == "colorFill") {
        tempColor = textFillColor;
      } else if (fillType == "linearGradient") {
        var gradient = context.createLinearGradient(xPosition - textWidth/2, yPosition, xPosition + textWidth/2, yPosition);
        gradient.addColorStop(0.0, textFillColor);
        gradient.addColorStop(0.6, gradientFillColor);
        tempColor = gradient;
      } else if (fillType == "radialGradient") {
        var gradient = context.createRadialGradient(xPosition, yPosition, fontSize, xPosition + textWidth, yPosition, 1);
        gradient.addColorStop(0.0, textFillColor);
        gradient.addColorStop(0.6, gradientFillColor);
        tempColor = gradient;
      } else {
        tempColor = textFillColor;
      }

      // Draw the text differently depending on fill or outline (stroke)
      switch(fillOutline) {
        case "fill":
          context.fillStyle = tempColor;
          context.fillText(message, xPosition, yPosition);
          break;
        case "stroke":
          context.strokeStyle = textStrokeColor;
          context.strokeText(message, xPosition, yPosition);
          break;
        case "both":
          context.fillStyle = tempColor;
          context.fillText(message, xPosition, yPosition);
          context.strokeStyle = textStrokeColor;
          context.strokeText(message, xPosition, yPosition);
          break;
      }
    }
  }

});

The Updated App

This will be the last major update to the app. I could create a website for it and make the interface more intuitive, but since this is just a personal project to work with the canvas text API, I’m not going to do that.

The updated (version 1.2) app can be found here: https://www.zesix.com/html5/textArranger1.2/

May 2, 2012

Second HTML5 App – Text Arranger 1.0

Recently, I have started a quest in order to learn how to work with text on HTML5 canvas. So far I have created the barebones of what will become a realtime text editor.

Right now “Text Arranger” (what I’m calling my app) simply prints to the screen and gives a fill/outline/both option to the user. I’ll be updating it in the coming weeks with more features so it will actually become quite useful.

The JavaScript

All of this is from canvasApp.js, the file where all the application code is stored.

$(document).ready(function() {  
  // Uses Modernizr.js to check for canvas support
  function canvasSupport() {
    return Modernizr.canvas;
  }

  // Once DOM is ready, start the app
  canvasApp();

  function canvasApp() {
    // Check for canvas support
    if (!canvasSupport()) {
      return;
    }

    // Grab the canvas and set the context to 2d
    var theCanvas = $("#canvasOne");
    var context = theCanvas.get(0).getContext("2d");

    // Initialize variables
    var message = "";
    var fillOutline = "fill"; // set default fill/outline to fill

    // Event listeners
    $("#textBox").keyup(textBoxChanged);
    $("#fillOutline").change(fillOutlineChanged);

    // First screen draw
    drawScreen();

    // Event handler functions
    function textBoxChanged(e) {
      var target = e.target;
      message = target.value;
      drawScreen();
    }

    function fillOutlineChanged(e) {
      var target = e.target;
      fillOutline = target.value;
      drawScreen();
    }

    // Draws or updates the screen.
    function drawScreen() {
      // Background
      context.fillStyle = "#ffffff";
      context.fillRect(0, 0, theCanvas.width(), theCanvas.height());

      // Outside Border
      context.strokeStyle = "#000000";
      context.strokeRect(5, 5, theCanvas.width()-10, theCanvas.height()-10);

      // Text
      context.font = "50px serif";

      // Variables created in order to center the text on the canvas
      var metrics = context.measureText(message);
      var textWidth = metrics.width;
      var xPosition = (theCanvas.width()/2) - (textWidth/2);
      var yPosition = (theCanvas.height()/2);

      // Draw the text differently depending on fill or outline (stroke)
      switch(fillOutline) {
        case "fill":
          context.fillStyle = "#000000";
          context.fillText(message, xPosition, yPosition);
          break;
        case "stroke":
          context.strokeStyle = "#000000";
          context.strokeText(message, xPosition, yPosition);
          break;
        case "both":
          context.fillStyle = "#ff0000";
          context.fillText(message, xPosition, yPosition);
          context.strokeStyle = "#000000";
          context.strokeText(message, xPosition, yPosition);
          break;
      }
    }
  }

});

I’ve tried my best to document it as well as I can. The code uses my HTML5 Canvas Skeleton.

You can find the current version of the app here: https://www.zesix.com/html5/textArranger1.0/

July 8, 2010

Zems – A Virtual Card Game

A Match of Cards

I’ve always had a love for card games. This includes both standard deck games like “Thirteen” and “Slapjack” as well as complex fantasy games like “Magic: The Gathering” and “Yu-Gi-Oh!” While these games are somewhat frowned upon by a considerable amount of society for my age range, the rewards from playing these card games, especially the complex thinking methods that arise from competition, become very apparent when trying to solve a problem with several people.

A lot of people might disagree with me when I say that card games make you smarter. Many people abhor these games simply because they seem immature or childish. However, I believe there is nothing to lose by playing these games.

Naturally, if you do something long enough, you start to notice flaws and find ways to improve upon them. Thus, Zems was born out of the frustrations apparent in popular fantasy card games such as Magic and Yu-Gi-Oh!

The Flaws of Physically-based Card Games

Most of the flaws in popular physically-based card games are outlined in my ezine article “The Flaws of Yu-Gi-Oh!”

However, for those who want to jump straight to the flaws, I have outlined them here:

A lot of money must be invested in order to stay competitive.
Most vendors who sell cards have used pack examination techniques to determine which packs contain the rarest cards and thus have already claimed them.
Game balance is hard to maintain since cards have to be mass-reproduced in addition to cards rulings’ changes.

My proposed solution to remedy the above is to reestablish the card game scene in a virtual setting. This would bring about the following benefits over a physically-based card game:

Card access is eliminated since desired cards are easily accessible through an online card database.
Tournament location problems are no longer an issue as users simply need a computer with Internet access to compete.
Game balance problems can be easily fixed as there are no cards to mass reprint.
Topdecking (a form of cheating in which a player secretly places desired first turn cards on the top of the deck) is eliminated, as well as other forms of cheating.
Since the server handles all calculations, gameplay elements not possible in a physically-based card game are possible in a virtual setting.

The biggest drawback is that many players like the feeling of physically holding cards in their hand, which I completely understand. However, I believe the possibilities present within a virtual card game are enough to outweigh this familiar and traditional setting so many players are used to.

Basic Lore

Everything has to have a foundation, otherwise there wouldn’t be any logical reasoning behind it. For games, that foundation is either lore or familiarity, but often both. Thus, for those interested in a basic overview of the Zems lore, it can be found below:

In the beginning there existed a group of all-powerful beings called Colossals. These Colossals lived in harmony with each other for several millenia, using their vast powers to create spheres of existence based upon theirÂ imaginations. These spheres were the first realms, and the Colossals interlinked them through an ethereal network drawn from each Colossal’s power. This network ensured that these first realms could never be destroyed without the combined powers of all the Colossals.

These early realms were:

Spectral Realm, where emotions were given living existence.
Elemental Realm, where the different elements of nature were represented.
Gilded Realm, where the dreams of Colossals and their future creations would be housed.
Physical Realm, where the physical, living creations of the Colossals would live.
Divine Realm, the home of the Colossals.

After creating these early realms, the Colossals each found joy in creating physical, living creations similar to themselves. These beings, housed in the physical realm, matured and evolved under the direction of their creators. Over time, the expansion of the different races eventually led to racial interaction. While the Colossals tried their best to mediate conflicts and tensions among the races, they could not prevent the inevitable. As generations passed, the Colossals began to bicker amongst themselves in order to earn advantages for their personal creations. Thus, it was the Colossals, the creators and mediates, who first declared war on each other, and every physical creation was dragged into the ensuing Colossal War.

Delving Deeper…

For those curious about gameplay mechanics and what is definite in the game, the place to look is the Zems Wiki.

For people interested in participating in the discussion and development of the game, please join the Zems Forums.

I am looking for help from anyone and everyone interested. No technical skills are necessary – I’m mainly looking for ideas and feedback. Forum participants will also be among the first invited to test the beta version of Zems peer-to-peer live matchups, so please check out the forums and get involved!