Archive for the ‘Programming’ Category

h1

Setting Up SFML.NET 2.0 to Work With Visual Studio 2012 C# Projects

May 12, 2013

(For those of you unfamiliar, SFML is one of the best alternative libraries to SDL and provides high-level access to graphics, sound, input and networking. It’s perfect for 2D games and other multimedia applications. You can check it out over at their website)

Special thanks to LA and Tyson for pointing out some details in the comments! 🙂

So SFML 2.0 recently went out of RC and is now the official stable version. As I found out about the news I decided to try it out, and since I just installed Visual Studio 2012 I also wanted to see if SFML would work on such an IDE. I saw that the SFML library also had updated bindings for the .NET languages (Visual C++/Basic, C#, etc.) and wanted to take my hand at getting SFML to work with it. It was a bit of a hassle since the tutorials at the main website only listed instructions for getting SFML to work with C++ projects, so I had to do some fuddling around to get it to work with a C# project (it should, since it’s a .NET binding for the library)

Anyway, for those of you still having trouble adding SFML to your C# projects in Visual Studio 2012, here are the steps to get you up and running (before anything else, make sure to download the SFML.Net binaries here (make sure to download the right version for your project, as there are both 32 and 64-bit versions), and extract them somewhere on your drive–it doesn’t matter where.):

  1. Create a new C# project in Visual Studio 2012. It can either be a Console or Windows Forms project– the difference is that a Console project displays a console when you run the application. If you create a new Windows Forms project, you can safely remove the pre-generated Form1 item in the project.
  2. Right-click your project in the Solution Explorer and click on ‘Add Reference…’
  3. When the Reference Manager window appears, browse to the folder where you extracted the SFML.net archive and go to the ‘bin’ ‘lib’ folder. Select the .dll files in the ‘lib’ folder and Click on ‘OK’ in the Reference Manager window to add them to your project.
  4. Once the .dll files appear in the References section of your project, right-click your project again and click on ‘Add’ > ‘Existing Item…’ Navigate to the ‘extlibs’ folder this time and add the .dll files there (you may have to select .dll files as file filter in the Open dialog box).
  5. Once these .dll files appear on your Solution Explorer, right-click on them and select ‘Properties’ (or press Alt-Enter). In the Copy to Output Directory property, set it to ‘Copy if newer’.
  6. That’s it! SFML.net is now set-up for your project.

To test if SFML.net has been fully set up for your project, you can try to run this code snippet (add it to your project’s main file):

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.Windows.Forms;

using SFML;
using SFML.Graphics;
using SFML.Window;

namespace SFML_Test {
   static class Program {

   static void OnClose(object sender, EventArgs e) {
      // Close the window when OnClose event is received
      RenderWindow window = (RenderWindow)sender;
      window.Close();
   }

   static void Main() {
      // Create the main window
      RenderWindow app = new RenderWindow(new VideoMode(800, 600), "SFML Works!");
      app.Closed += new EventHandler(OnClose);

      Color windowColor = new Color(0, 192, 255);

      // Start the game loop
      while (app.IsOpen()) {
         // Process events
         app.DispatchEvents();

         // Clear screen
         app.Clear(windowColor);

         // Update the window
         app.Display();
      } //End game loop
    } //End Main()
  } //End Program
}

When you run your project the output should be similar to this (see screenshot):

Visual Studio 2012 running test C# code with SFML.net 2.0

Visual Studio 2012 running test C# code with SFML.net 2.0

For those of you who still need help, feel free to ask in the comments! 🙂

h1

Double-bordered <div>’s using CSS

May 5, 2012

Hey guys. Today I’m going to demonstrate a very simple CSS/HTML coding trick that allows you to get double-bordered boxes on your webpage, without using images, scripts, or whatever. The technique we’re going to code up today uses pure CSS(2) and (X)HTML. If you’re excited to see how the final page looks like, you can view a live demo here.

The Markup

The idea, basically, is to wrap around the main <div>, which will house the text and/or image contents, within another <div>. While we could use another element like a <p> or a <span>, I believe that would render your HTML code invalid to W3C standards, and in my personal opinion, box elements of a page should be defined solely by <div>’s.

Anyway, here’s the base markup that you should have. Take note of the two <div>’s and how they are defined here:


<html>
  <head>
    <title>CSS Double Border test</title>
  </head>
  <body>
    <div class="mainwrap">
       <div class="maindiv">
          <h1>Hello World</h1>
          <h2>A test of double-bordered &lt;div&gt;'s using only HTML markup and CSS styles</h2>
          <p>This webpage may look absolutely plain or bland to you, but that was what it was meant to be; this is nothing more than a test.
 This single webpage was made to demonstrate a simple CSS trick, wherein you could actually display double-borders on a seemingly single box
 If you will observe the source you will see that there are actually two &lt;div&gt;'s at work with their respective styles defined in the internal CSS.</p>
          <p>Feel free to use the HTML markup and CSS styles of this page for your personal learning. You can use it as reference or even copy it verbatim, so to speak.
 I won't really care.</p>
       </div>
     </div>
   </body>
</html>

The “mainwrap” class denotes the wrapper <div> while the “maindiv” class denotes the, well, main <div> that contains the actual page content.

Now that we’re done with the basic HTML markup, let’s move on the next, and fun, part.

Styling the markup

We’ll be using vanilla CSS2 for this one. No special @imports, no hard-to-understand libraries or scripts, so don’t worry about those. 🙂

The idea for this part is that we assign the background that we want our actual content to have to the  “maindiv” <div>. Meanwhile, we assign the color of our “inner” border to the background color of the “mainwrap” <div>.

But how will that look like a border? If you think about it, we can define a small padding of 2px to the “mainwrap” <div>, which pushes the “maindiv” <div> inward, creating the appearance of a pseudo-border of sorts. 🙂

Finally, we set the border style of the outer “mainwrap” <div> to the outer border we want to have. And voila, two borders for one box!

Here’s the CSS I made for the example markup above. The only thing that really matters here are the styles for .maindiv and .mainwrap. The rest are there for the aesthetic purposes of the webpage.


body {
 background-color: #AA7720;
 font-family: Calibri, Tahoma, Helvetica, Verdana, Arial, sans-serif;
 text-align: center;
 color: #201000;
 text-shadow: 1px 1px 0px #F0F0C0;
 }

 a:link, a:visited {
 color: #0040C0;
 text-decoration: none;
 }

 a:active, a:hover {
 color: #1088FF;
 text-decoration: underline;
 }

 h1, h2 {
 margin-top: 5px;
 }

 .mainwrap {
 border-top: 1px solid #502000;
 border-left: 1px solid #502000;
 border-right: 1px solid #502000;
 border-bottom: 1px solid #502000;
 background-color: #F0E090;
 padding: 2px;
 width: 800px;
 margin: 20px auto;
 }

 .maindiv {
 background-color: #EEBB20;
 width: 780px;
 padding: 10px;
 }

It generally looks good if your color choices are similar for the box. I.e., you want a vivid midtone color for the content box, a light but similarly hued color for the inner border, and a dark outer border. It pays to use HTML color mixers like the one here.

And there we go, we are done coding our double-bordered <div>. You can now copy and paste this code onto your actual webpage. 😀

Finishing touches

I added some extra <div>’s to my demo page, to show that the style is actually reusable and doesn’t need much duplicated code to get it to work. Just copy it onto your HTML/CSS file and assign the class to two related <div>’s, and it works. I encourage you to reuse and expand on this code. Let me know in the comments if it helps you. 🙂

Extra credit homework: The same (and probably better) effect can be achieved using border styles and colors instead of background-colors in the CSS. Find out for yourself how. 😉

h1

Javascript RPG Calculator

April 12, 2012

Oh look, filler stuff while I’m not working on my real website. 😀

http://instilledbee.co.cc/rpgcalc

All of the source is available on the HTML file by the way.

h1

Javascript: Toggle Visibility of Elements

March 9, 2012

Late-night coding sessions allowed me to whip up this quick, reusable snippet.


//Toggle visibility of a given element, specified in the "id" parameter
function toggleNav(id) {
var x = document.getElementById(id).style.display;
if(x == "") {
document.getElementById(id).style.display = 'block';
return false;
}
else if(x == "block") {
document.getElementById(id).style.display = '';
return false;
}
}

This function checks the current value of the display style of the element specified by “id”, then sets it accordingly, i.e., if it is set to “none” (an empty string seems to be JS’s expectations), it sets it into “block” and vice-versa.

You may attach this to an onclick event to a link and set the id parameter to a <div> that has the ‘display: none’ style property. Feel free to reuse this, and/or expand on this code. 🙂

(Of course, this could be done with less effort using jQuery, am I right?)

h1

C++: Convert a “char” digit into an “int” digit

February 9, 2012

Nothing special. It’s just a one-line function that builds on the concept that chars are, well, also integers. To be more specific, they are integer ASCII codes.

//returns an int from a number literal
int castInt(char src) {
return src - 48;
}

According to this, the digits from 0-9 have codes from 0x30 to 0x39 in hex, which is 48 to 57 in decimal. What were doing is subtracting 48 from the supplied char parameter’s ASCII code to obtain a digit from 0-9.

Note that this code was intended to be a simple and quick fix and as such has many loopholes and flaws, one of which is the inability to check if the supplied parameter was actually a digit or not. Nevertheless, it could be useful in small programs, such as console prompts (“Press 1 to continue, 2 to exit…”);

Well, that’s a load of text for one C++ function.

h1

How solving for Pi works.

October 24, 2011

So did you download my Pi program? Or you just want to know some nerd algorithms? Well, read on.

How does one go about solving for pi? Well first of all let’s define some stuff to make things easier.

Let’s discuss what pi is first. Pi (every iteration of pi makes me mistype ‘pie’. Ah, typing while hungry.) is a number which relates the dimensions of a square to a circle, for instance a circle inscribed within a square. OK, non-geometry and non-math folks can close the window now.

A visual representation of the inscribed circle

A visual representation of the inscribed circle

Establishing that fact, and using the inscribed circle as a point of reference, we now enumerate some formulas related to the two shapes.

Given that a radius of a circle is equal to r, we can assume that the side length of the outer square is 2r. Thus, the area of the circle can be represented as πr2, and the area of the square as 4r2, from the definition that its side is 2r.

Using what we have established so far, we can define a ratio, specifically the ratio between the area of the circle to the area of the square. Let’s define A as the area of the circle and B as the area of the square. With this, we can define such an equation:

A/Bπr2/4r2

Notice that we can actually cancel r2 from the equation, which leaves us with:

A/Bπ/4

Rewriting and transposing some variables nets us with this:

π = 4 * (A/B)

This then forms the basis of the algorithm used in the C++ program I wrote for solving Pi. The working algorithm can be seen in the source file included with the download. As you can see by studying the code, I have the algorithm coded right, but I can’t find the right values to use, hence approximation by random number generation and incrementing is implemented. In future versions I intend to rectify this.

So there you have it. That’s my approach to solving for pi. Comments, feedbacks and discussions on the topic are strongly encouraged, so comment away! 🙂

Further Reading (for the obsessed mathematicians):

h1

Let’s Solve For Pi!

October 24, 2011

I told myself I’d at least have one new post during this one-month break. Here goes…

I dug up one of my old programs. When I say old, I mean it’s the very first (useful) program I finished. Er, one that I actually finished. When I was young (sophomore high school, to be exact) I usually got bored and never finished any of my programming projects. 😀 (Awsm RPG comes to mind… :|)

Anyways, looking how it worked, it seemed pretty neat, though it seemed improper for this program to be written in a game development software. That’s right– I wrote this old one in Game Maker 6 if I recall, all using its scripting capabilities. That goes to show how powerful GML is, or how patient I was with an interpreted language. Either way, that makes it cool(er), doesn’t it?

So I took some time today to rewrite and refactor the program, mainly to move it into a new programming language, C++, and to simplify it. Though the program now sucks because its interface has been reduced to a command-line one, I say it’d be better this way. Without all the Game Maker code bogging it, I have more freedom to expand the program to however I want it. And also I’m more familiar with high-level languages like C++ anyways. So rewriting for simplification and for refactoring.

The premise of the program isn’t too hard to comprehend. It’s a simple looping program with an algorithm solving for Pi. Yes, Pi, as in 3.14159265358979BLAHBLAH. To avoid deviating away from the topic at hand, I’ll write all about solving Pi (and the related algorithms) in another post, for those of you who’d find the discussion too boring. (If this is too boring for you, then why are you reading my blog in the first place?)

So I’m uploading the two programs, the old Game Maker one, and the C++ one. Also I’ll include the source for anyone who’s interested, though to fully understand it you’d have to read my article on Pi. Here ya go.

%d bloggers like this: