I moved to a new URL! Check it out!

posts tagged with: otter

Otter Example: Shaders

Otter Example: Shaders
Welcome to shader town! One of the most exciting things about transitioning from flash to SFML was the use of GLSL shaders! Otter supports all the cool shader stuff that SFML does, and this example covers how to apply shaders to an image.

Check out some really quick example shaders being applied to a cool image of an otter.

Image

uniform sampler2D texture;

void main() {
vec4 pixel = texture2D(texture, gl_TexCoord[0].xy);
float gray = (pixel.r + pixel.g + pixel.b) / 3;

gl_FragColor = vec4(gray, gray, gray, pixel.a) * gl_Color;
}

Image

uniform sampler2D texture;

void main() {
vec4 pixel = texture2D(texture, gl_TexCoord[0].xy);

gl_FragColor = vec4(1 - pixel.r, 1 - pixel.g, 1 - pixel.b, pixel.a) * gl_Color;
}

Image

uniform sampler2D texture;

// A weird way to generate a random number with a vec2 seed I guess.
float rand(vec2 co){
return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
}

void main() {
vec2 samplePos = gl_TexCoord[0].xy;
samplePos.x += rand(samplePos) * 0.05;
samplePos.y += rand(samplePos) * 0.05;
vec4 pixel = texture2D(texture, samplePos);

gl_FragColor = pixel * gl_Color;
}
Shaders are the best!

Otter Example: Surfaces

Otter Example: Surfaces
Another Otter example has washed ashore. This one deals with understanding how to use Surfaces. Check out the full example right here to see how to make pretty pictures using Surfaces.

Image


Image


Surfaces are essentially just wrappers for a render texture. I like to think of them as canvases that can be drawn to. Otter by default uses one big Surface the size of the game window to render the game. Surfaces can be a great way to add something like a minimap or HUD to your game, or make use of shaders. I often use multiple surfaces when making my games so that I can zoom in and out on the main Surface and keep things on the HUD unaffected by the zooming.

Otter Example: Sound and Music

Otter Example: Sound and Music
Another Otter example coming fresh off the ovens! This one marks the 14th example, and covers playing sound and music using the framework. The full example is right here, and here's a glimpse at the codes:
using Otter;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace SoundStuff {
class Program {
static void Main(string[] args) {
// Create a Game.
var game = new Game("Sound and Music");
// Start the game with a new SoundScene.
game.Start(new SoundScene());
}
}

class SoundScene : Scene {
// Load the sounds into individual Sound objects.
public Sound SoundOne = new Sound("sound1.wav");
public Sound SoundTwo = new Sound("sound2.wav");
public Sound SoundThree = new Sound("sound3.wav");

// Load the music into a Music object.
public Music Music = new Music("music.ogg");

public override void Update() {
base.Update();

// Play sounds for the 1, 2, and 3 keys being pressed.
if (Input.KeyPressed(Key.Num1)) {
SoundOne.Play();
}
if (Input.KeyPressed(Key.Num2)) {
SoundTwo.Play();
}
if (Input.KeyPressed(Key.Num3)) {
SoundThree.Play();
}

// Pause or play the music on the spacebar being pressed.
if (Input.KeyPressed(Key.Space)) {
if (Music.IsPlaying) {
Music.Pause();
}
else {
Music.Play();
}
}

// Adjust the volume of the sounds with up and down keys.
if (Input.KeyDown(Key.Up)) {
Sound.GlobalVolume += 0.02f;
}
if (Input.KeyDown(Key.Down)) {
Sound.GlobalVolume -= 0.02f;
}

// Adjust the volume of the music with left and right keys.
if (Input.KeyDown(Key.Right)) {
Music.GlobalVolume += 0.02f;
}
if (Input.KeyDown(Key.Left)) {
Music.GlobalVolume -= 0.02f;
}
}
}
}
So easy!

Now there's almost nothing holding you back from making a video game using Otter if you so choose. There's still a handful of examples to go, but this one I believe marks the last in the series that is necessary to make a complete thing. Input, graphics, collision, and sound should cover a pretty large portion of making a game, right?

Otter Example: Ogmo Editor Levels

Otter Example: Ogmo Editor Levels
A new example for using my game making framework is now online! Check it out here!

Image


This Otter example goes over how to take levels made using Ogmo Editor and load them up for making games with them. The example code is actually pretty straight forward, I think!
using Otter;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace OgmoEditorStuff {
class Program {
static void Main(string[] args) {

// Create a new Game.
var game = new Game("Ogmo Editor Example");
// Set the background color to see stuff a little better.
game.Color = Color.Cyan;

// Create a new Scene to use for the Ogmo data.
var scene = new Scene();

// The path to the level to be loaded.
var pathLevel = "Level.oel";
// The path to the Ogmo Project to use when loading the level.
var pathProject = "OgmoProject.oep";

// Create a new OgmoProject using the .oep file.
var OgmoProject = new OgmoProject(pathProject);

// Ensure that the grid layer named "Solids" gets the Solid collision tag when loading.
OgmoProject.RegisterTag(Tags.Solid, "Solids");

// Load the level into the Scene.
OgmoProject.LoadLevelFromFile(pathLevel, scene);

// Start the game using the Scene with the loaded Ogmo Level.
game.Start(scene);
}
}

// Collision tags to use in the game.
enum Tags {
Solid,
Player,
Coin,
Exit
}

// A Player Entity to match the Entity in the Ogmo Project.
class Player : Entity {
public Player(float x, float y) : base(x, y) {
var img = Image.CreateRectangle(32, 32, Color.Red);
AddGraphic(img);
SetHitbox(32, 32, Tags.Player);
}
}

// A Coin Entity to match the Coin in the Ogmo Project.
class Coin : Entity {
public Coin(float x, float y) : base(x, y) {
var img = Image.CreateRectangle(16, 16, Color.Yellow);
AddGraphic(img);
SetHitbox(16, 16, Tags.Coin);

// Adjust the position here because of the Origin in the Ogmo Project.
X += 8;
Y += 8;
}
}

// An Exit Entity to match the Exit in the Ogmo Project.
class Exit : Entity {
public Exit(float x, float y) : base(x, y) {
var img = Image.CreateRectangle(64, 64, Color.Magenta);
AddGraphic(img);
SetHitbox(64, 64, Tags.Exit);
}
}
}
But you should check out the full example for yourself for more details.

Otter Updates!

Otter Updates!
I've been pretty productive on coding stuff lately so with that comes some updates for Otter! Here's some of the things that have changed or been added lately in the dev branch:

* OgmoProject has a lot more utility methods now like GetValue() and GetLayerData(). If you need to check out level data before actually loading a level into a Scene this can be pretty useful.

* Added OgmoProject.RemapAsset() for when you need to assign a different path for an asset being referenced in your Ogmo projects. For example if you need to take the path of a tilemap from the ogmo project and reassign it to something else when being loaded into the game.

* Fixed a thing that I broke in SetHibox on Entities.

* Util.Clamp now supports Vector2 input and output.

* Added shortcuts to Scene methods like GetEntity<> on Entity just to make code a little bit less verbose at times.

* Added Button.LastPressed and Button.LastReleased. These are both timers that will count up since the last button press and release respectively. Pretty useful for doing input buffering type stuff, or waiting until an input has been released for some amount of time before changing state, and all that kind of stuff.

* Added GetFillRect() to NineSlice.

* Made Debugger.RegisterInstantCommand() public and added Util methods to go along with it. You can now add debug commands that can be used immediately instead of executing them at the next update. Also fixed some bugs in the debugger related to this.

* Fixed the rendering of GridCollider (it was too large by 1 pixel for each cell.)

* Added GetTileIndex() to Tilemap and GetIndex() to TileInfo.

* Texture.CopyPixels now actually works (warning: blittng operations are very slow.)

* More Collider parameter options in all of the Collide, Overlap, etc methods.

* Added Scene.GetEntitiesWith<> which is a weird way to grab a list of Entities that have a specific set of Components. This is probably very slow and should be used sparlingly, but it might be useful to some folk.

* Various small fixes and tweaks that don't really effect end users.

Otter Example: Text

Otter Example: Text
The last Otter example I was able to jam out before leaving for PAX was all about Text and RichText. Text seems to just be insanely difficult and time consuming to implement, so making it really easy for users of Otter was a big goal of mine. For most simple cases of using Text, Otter should accomplish that goal!

Here's a quick example of just some normal text using some simple effects.
  class Program {
static void Main(string[] args) {
// Create a Game.
var game = new Game("Text Example");

// Create a Scene.
var scene = new Scene();

// Create a Text object using the default font with size 16.
var text1 = new Text("Just some basic text.", 16);
// Position the Text.
text1.SetPosition(20, 20);
// Add it to the Scene's Graphic list for rendering.
scene.AddGraphic(text1);

// Create a Text object using the deafult font and a size of 32.
var text2 = new Text("Bigger text!", 32);
// Position the Text.
text2.SetPosition(20, 50);
// Add it for rendering.
scene.AddGraphic(text2);

// Create a Text object using the font yardsale.ttf and a size of 40.
var text3 = new Text("Using a font", "yardsale.ttf", 40);
// Position the Text.
text3.SetPosition(20, 120);
// Add it for rendering.
scene.AddGraphic(text3);

// Create a Text object using the font yardsale.ttf and a size of 40.
var text4 = new Text("Using a shadow!", "yardsale.ttf", 40);
// Set the shadow color of the Text.
text4.ShadowColor = Color.Red;
// Position the Shadow.
text4.ShadowX = 1;
text4.ShadowY = 3;
// Position the Text.
text4.SetPosition(20, 170);
// Add it for rendering.
scene.AddGraphic(text4);

// Create a Text object using the font yardsale.ttf and a size of 40.
var text5 = new Text("Using an outline!", "yardsale.ttf", 40);
// Set the outline color of the Text.
text5.OutlineColor = Color.Green;
// Set the thickness of the outline.
text5.OutlineThickness = 3;
// Position the Text.
text5.SetPosition(20, 220);
// Add it for rendering.
scene.AddGraphic(text5);

// Start the Game using the created Scene.
game.Start(scene);
}
}
Image


For doing text beyond that Otter has a RichText graphic object that can be used. This allows for some more advanced things such as limited text boundaries, word wrapping, text align, effects applied to specific characters, animated text, and more, but RichText is also less efficient for rendering larger blocks of text.

For the full example head on over to the Otter example.

Image