Touching an Image in Cerberus X

This post is the 3rd in the series of touching an image pixel accurately. The second one is too complicated, now I have kept it clear and simple.

The image to be touch is middle handled (this makes scaling easier) and the image both moves and is scaled real time.

Here’s the source code:

The actual test is made for the original image data, that is left intact. Because the image is middle handled in order to get the top left corner of the image, one must decrease half of the width and height of the image from the x, y of the image. But as the image is scaled the actual graphical top left corner is x – (width / 2) * scale and y – (height / 2) * scale.

When then top left corner of the rectangle is calculated, to this is added the scaled size: width * scale and height * scale. This is taken care of in the if-sentence, when checking if in the rectangle is touched.

When one has the touching point, the point in the image must be “scaled” by the scale factor, see the commented part of the code for this.

In the actual test is tested is the picture’s alpha value in the calculated point <> 0; if it is, the image that has transparent pixels, must have been touched.

Clear and simple. 🙂

Below is a video of regarding this post:

If you want to compile this in Monkey X, just change in the LoadImageData-part “cerberus” to “monkey”.

Update:

In my Memorable Melodies  game is used slightly different code to touch the images, because the images to be touched don’t have “holes”.

Snowing Effect in Monkey X

Since Christmas is coming soon, I decided to share my snowing effect code I wrote last year. The original code was written in BlitzMax. This year I have already made new Christmas intro in Monkey X. You may want to take look at the snowing effect of the Christmas video of the last year.

Examine the code and you’ll get the idea quickly. Implementation in other programming languages should be quit straight forward. Just use background picture of your own.

Feel free to use the code.

If the featured image doesn’t show up, below is a screenshot of the program:

I will soon publish my new Merry Christmas 2017 and Happy New Year 2018 video. And… It’s also written in Monkey X.

Example of Own Font Class in Monkey X part 2

I decided to implement in an alternative way own font class to Monkey X to use with fonts converted with my Font 2 PNG, just to for passing time.

Check the previous post or the homepage of Font 2 PNG for format of the dat-file.

Screenshot of the program:

All you really have to understand is the simple format of the dat-file of a font to understand the source code below — and of course basic understanding of Monkey X.

Feel free to use the code above.

 

Example of Own Font Class in Monkey X

I seem to live in the past… Monkey X programming language has evolved into Monkey2, but I’m still sometimes using Monkey X.

I made an example class to use in Monkey X with bitmap fonts converted with my Font 2 PNG. The example uses old Mojo-module, but old examples on scaling bitmap font made with Font 2 PNG will give you an idea of an alternative way to implementing this.

Next, let’s take a look at a screenshot:

Next to the code:

Font 2 PNG prints the max height of the font after converting. The value is in practice just the height of the png-file.

As a reminder: Font 2 PNG produces two files, font.png and font.dat for one font. The font.dat-file holds the information for each character with two 4 byte integers, first tells the position in pixels in font, the second the width of the chatacter in pixels.

I hope this example gives you some ideas on how to use different fonts converted with Font 2 PNG.

Feel free to use the code above.

PS. I also made new version of part 1 of my Old School series demonstration in Monkey X. Video below:

From the source code in the video you’ll get an idea, how this font class could be used with Mojo2-module.

That’s it from my “hobby corner” tonight!

Old School IX

This morning I made new Old School demonstration in Monkey X. This is now 9th in the series.

Not much is changed in the code from the previous Old School demonstration. What actually required some work, was the font. As in all my Old School demonstrations, I used my Font 2 PNG program. With Mojo2-module one can use for one picture the following: “pic.png”, “pic_n.png” and “pic_s.png”. The programmer doesn’t need to worry about “_n” and “_s” versions of an image, Mojo2 takes care of them. I’ve written all I know from those extra pictures in the first old school post. I may make a better version of it in code-wise and perhaps add some extra too…

Anyway in this 9th version there are 3 versions of each character that are individual png-files.

See the magic: 🙂

I may share the Monkey X source code for these later Old School demonstrations later.

Rolling and Rotating scrolltext (Old School VIII)

I made today a little Monkey X Pro demonstration: Rolling and rotating scrolltext (Old School VIII). Now it works perfectly. Like in Old School VII, the letters fade in and out at the bottom of the circle of letters. I have used my Font 2 PNG program to grab individual characters of a ttf-font to png-images for the program. Perhaps I will later share the source code of the demonstration…

Enjoy the nostalgia! 🙂

The idea behind the code of the rolling and rotating scrolltext:

  • At every update frame 30 characters (png-images) from the scrolltext are drawn in a form of a circle, each character with 12 degrees step (12 *30 = 360), let angle related to this angle be angle1
  • When drawing the character images, the angle that increases in 12 steps is added to each character in addition to this angle is added other angle variable, let this be angle2, that is decreased (the direction of rolling and rotating) by 1 degrees at every update frame
  • Because of my (probably clumsy but working 🙂 )implementation:
  • in DrawImage method rotation angle is angle1 + angle2 + constant that adjusts the letters to the right place on the circle

As to he fade out and fade in for the letter images, you may adjust the letters with alpha values as you best you see it is sensible, probably somewhere at the bottom of the circle.

That’s it! Do try to make make your own version with programming language of your choice. I recommend my Font 2 PNG program for the font.

Good luck!

The first time I saw this kind of effect created was some time in the late 80s on Amiga in following demo:

Ah! Those good old Amiga demos. Kind of magic at their time.

Bouncing of the ball when it touches the Bat (80s Krakout style)

It’s night when I’m writing this. I came up with a little Monkey X tutorial on how to program the bouncing of the ball, when it touches the bat in the “old school way” — like in the popular C64 game Krakout in the 80s.

In the video for the tutorial you can see, that as the ball touches the bat for the first time, delta y doesn’t change. This is because both the ball and the bat are uneven as height in pixels; now both the ball and the bat have a middle point.

This is just a short piece of code, that doesn’t handle the case, when the ball is at the horizontal top or bottom of the bat. There’s some extra work for anyone who wants to make an 80s style Krakout game. 🙂

The delta y for the ball is calculated simply how the ball’s y-position is related to the middle point to the bat. The “scale” variable is used to adjust the max y-speed of the ball.

Source code below:

Feel free to use and improve the source above in your own projects.

Here’s the graphics to download (license: public domain), except the background picture (right click and save as…):

 

 

The bat is 32 x 73 pixels as size, the ball is 16 x 17 pixels.

 

For comparing to the C64’s popular Krakout, see the video below:

Link: Monkey X (from itch.io), it’s free.

Many years ago I started to program Krakout style game in the spirit of the good old Commodore 64, but as usual, something went wrong. Three months work with multiple levels and a level editor programmed in Blitz3D were lost because I hadn’t taken backups of the files, when I, well, “fixed” the Windows installation I had at the time…

3D Stars With Controlled Center Point

Just little changes to old post on 3D stars with Mojo2… Now on the projection from 3D space to 2D space (screen), the center point can be controlled, just touch the screen or keep the left mouse button pushed down to control the stars… The code should compile as such to any target on Monkey X Pro.

Source code license: Public Domain.

Scrolling a Picture Larger Than Visible Area in Monkey X

A little tutorial on scrolling a picture that is larger than the visible area of the screen in Monkey X.

In this example we will be using a picture of 1280 x 960 pixels in “native” resolution of 640 x 480 pixels. The source is primarily meant to Android target but works for example to desktop target too.

The picture is scrolled by moving a finger on the Android device. In order to avoid the picture to “jump” after not scrolling the picture, variables related to scrolling speed must be set to zero.

Lets have a look at the source code:

Examine the source code and learn. Source code license: Public Domain.

Below is a video related to this post:

 

Missile Attack in Monkey X

Again, some nostalgia. In older blog post I presented a shortened version of my old implementation of Amiga’s “Missile Attack”. This night I made the game in Monkey X and the source can be directly compiled to Android target.

The game is quite simple one: Just shoot the missiles before they get to the bottom of the screen.

If a missile goes to the left or right side of the screen, you see the colors of the background changing — and also when you fire a shot. This gives the game more life. 🙂

Below is the source code:

Source code license: GNU General Public License 3.0.

Below is the video of the game on Android tablet and on computer screen:

I may make a better version of the game later on this summer…