Recent

Author Topic: [Finished] 2D Platformer Game Contest  (Read 14752 times)

Ñuño_Martínez

  • Hero Member
  • *****
  • Posts: 917
    • Burdjia
Re: 2D Platformer Game Contest 2018/2019
« Reply #15 on: November 14, 2018, 10:43:25 am »
I have already running a PIXY.js window on my browser, compiled with Pas2JS!  8-)
Last time I tried pas2js I wasn't unable to do anything (it didn't find RTL files or something, can't remember). I've read a lot of you talking about it lately (new version, yep) so I think I should try again and, if it works, add a wrapper for Allegro.js to Allegro.pas (Allegro.js.pas?  %)).

On topic:  I was planning to use classic SpriteLib but it has quite bad animations and incomplete sets, so I struggled myself if it's worth to modify it to get the animations I need or create new ones by myself.  Guess what won.  Clue:  I love to re-invent the wheel. :-[
Are you interested in game programming? Join the Pascal Game Development community!
Also visit the Game Development Portal

lainz

  • Hero Member
  • *****
  • Posts: 3276
    • Lainz
Re: 2D Platformer Game Contest 2018/2019
« Reply #16 on: November 14, 2018, 03:53:46 pm »
Good idea to port allegro js.

Is easier if you install lazarus trunk with fpcupdeluxe, it has an option to install packages, I just choose pas2js, it installs the rtl as well. But the run command doesn't work very well or I don't know how to configure it, I ran the game in localhost with VS Code 'Go Live' plugin.

Currently I'm doing like this to use the external PIXY JS:

Code: Pascal  [Select]
  1. program game;
  2.  
  3. {$mode objfpc}
  4. {$modeswitch externalclass}
  5.  
  6. uses
  7.   JS, Classes, SysUtils, Web;
  8.  
  9. type
  10.  
  11.   TNotifyProcedure = procedure();
  12.  
  13.   TPIXYLoader = class external name 'PIXI.loader'(TJSObject)
  14.     class function add(img: string): TPIXYLoader;
  15.     class procedure load(ev: TNotifyProcedure);
  16.   end;
  17.  
  18.   TPIXYResources = class external name 'PIXI.loader.resources'(TJSObject)
  19.  
  20.   end;
  21.  
  22.   TPIXYSprite = class external name 'PIXI.Sprite'(TJSObject)
  23.  
  24.   end;
  25.  
  26.   TPIXYContainer = class external name 'PIXI.Container'(TJSObject)
  27.     Constructor new;
  28.   end;
  29.  
  30.   TPIXYStage = class
  31.   public
  32.     procedure addChild(cont: TPIXYContainer); overload;
  33.   end;
  34.  
  35.  TPIXYApplication = class external name 'PIXI.Application'(TJSObject)
  36.   private
  37.     FStage: TPIXYStage external name 'stage';
  38.     FView: TJSNode external name 'view';
  39.   public
  40.     constructor new(args: TJSObject);
  41.     property view: TJSNode read FView;
  42.     property stage: TPIXYStage read FStage;
  43.   end;
  44.  
  45. var
  46.   app: TPIXYApplication;
  47.   left, up, right, down: TJSObject;
  48.  
  49.     procedure setup();
  50.   var
  51.     map1: TJSArray;
  52.     ganador: boolean;
  53.     container: TPIXYContainer;
  54.   begin
  55.     container := TPIXYContainer.new;
  56.     app.stage.addChild(container);
  57.     ganador := False;
  58.     map1 := TJSArray.new(
  59.     1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
  60.     1, 0, 0, 1, 0, 0, 0, 0, 0, 1,
  61.     1, 0, 0, 1, 0, 0, 0, 0, 0, 1,
  62.     1, 0, 0, 1, 0, 0, 0, 0, 0, 1,
  63.     1, 0, 0, 1, 0, 0, 1, 0, 0, 1,
  64.     1, 0, 0, 1, 0, 2, 1, 0, 0, 1,
  65.     1, 0, 0, 1, 1, 1, 1, 0, 0, 1,
  66.     1, 0, 0, 0, 0, 0, 0, 0, 0, 1,
  67.     1, 0, 0, 0, 0, 0, 0, 0, 0, 1,
  68.     1, 0, 0, 0, 0, 0, 0, 0, 0, 1,
  69.     1, 1, 1, 1, 1, 1, 1, 1, 1, 1
  70.     );
  71.   end;
  72.  
  73. procedure TPIXYStage.addChild(cont: TPIXYContainer);
  74. begin
  75.  
  76. end;
  77.  
  78. begin
  79.   app := TPIXYApplication.New(new(['width',320,'height',342,'antialias',true,'transparent',false,'resolution',1]));
  80.   document.body.appendChild(app.view);
  81.  
  82.   TPIXYLoader.add('images/block1.png');
  83.   TPIXYLoader.add('images/block0.png');
  84.   TPIXYLoader.add('images/block2.png');
  85.   TPIXYLoader.add('images/player.png');
  86.   TPIXYLoader.add('images/enemy.png');
  87.   TPIXYLoader.add('images/enemyending.png');
  88.   TPIXYLoader.load(@setup);
  89. end.

Edit: It's getting harder to follow =) It has the strictness of FPC, that's good, and I can't port my small demo, it's getting too complex with PIXY.js. Maybe I will try allegro.js that are just functions.

Edit 2: much better! with allegro.js I have the main loop working and as well the background image drawn.
« Last Edit: November 14, 2018, 05:10:23 pm by lainz »

lainz

  • Hero Member
  • *****
  • Posts: 3276
    • Lainz
Re: 2D Platformer Game Contest 2018/2019
« Reply #17 on: November 15, 2018, 01:51:14 am »
I have working the demo from AllegroJS... is not a platformer  :D
https://lainz.github.io/AllegroPas2JS-Demo-Game/index.html

Compiled with pas2js

Source code:
https://github.com/lainz/AllegroPas2JS-Demo-Game

It requires AFAIK fpc and lazarus trunk, install it with fpcupdeluxe and then install the package pas2js with the same fpcupdeluxe, so it installs the RTL.

I'm wondering if this library is hardware accelerated or not... maybe that restriction will limit a lot the number of submited games, so I will remove that line from the rules.

Paul_

  • Full Member
  • ***
  • Posts: 130
Re: 2D Platformer Game Contest 2018/2019
« Reply #18 on: November 15, 2018, 07:59:05 am »
I'm wondering if this library is hardware accelerated or not...

It's accelerated - http://allegrojs.net/about.php.

Demos what I checked does not run smoothly, they run fast but there is tearing (Chrome).

Thaddy

  • Hero Member
  • *****
  • Posts: 9167
Re: 2D Platformer Game Contest 2018/2019
« Reply #19 on: November 15, 2018, 09:26:49 am »
It runs great and fast on chromium on the Raspberry Pi3
also related to equus asinus.

lainz

  • Hero Member
  • *****
  • Posts: 3276
    • Lainz
Re: 2D Platformer Game Contest 2018/2019
« Reply #20 on: November 15, 2018, 05:24:59 pm »
Tested and believe it or not it works better on Microsoft Edge, then Chrome and worst in Firefox.

Paul_

  • Full Member
  • ***
  • Posts: 130
Re: 2D Platformer Game Contest 2018/2019
« Reply #21 on: November 16, 2018, 02:16:54 pm »
On Edge is your example ok, only first 10 seconds is there weird slowdown (same for all http://allegrojs.net/ examples).

Anyway it lacks method for limiting frames/vsync or something like that. These HTML5/Java things usually run surprisingly smoothly.

Ñuño_Martínez

  • Hero Member
  • *****
  • Posts: 917
    • Burdjia
Re: 2D Platformer Game Contest 2018/2019
« Reply #22 on: November 17, 2018, 07:55:10 pm »
Lainz:  Great.  May be you should release your Allegro.js.pas as an independent project.
Are you interested in game programming? Join the Pascal Game Development community!
Also visit the Game Development Portal

lainz

  • Hero Member
  • *****
  • Posts: 3276
    • Lainz
Re: 2D Platformer Game Contest 2018/2019
« Reply #23 on: November 17, 2018, 10:09:44 pm »
I'm wondering if this library is hardware accelerated or not...

It's accelerated - http://allegrojs.net/about.php.

Demos what I checked does not run smoothly, they run fast but there is tearing (Chrome).

It's not using WebGL, just normal canvas, for that is slow
https://github.com/TheSos/allegrojs/blob/d2b2e554743d151c6a720bafb39053fd01c52254/allegro.js#L834

Lainz:  Great.  May be you should release your Allegro.js.pas as an independent project.

Sure, for now it has only a really small part of all the routines, I should add them first... but it's not using webgl =( so I will not add them, even if looks easier.

Maybe I get back to Pixy.js (my test is working with pixy as well, but is hard to use javascript objects in pascal - at least for me -), and make a small library in JS with functions like AllegroJS, then use that library with Pascal.
« Last Edit: November 17, 2018, 10:52:22 pm by lainz »

lainz

  • Hero Member
  • *****
  • Posts: 3276
    • Lainz
Re: 2D Platformer Game Contest 2018/2019
« Reply #24 on: November 18, 2018, 12:04:07 am »
I've created a monster =) muahahaha

It's an hybrid between allegro.js and pixi.js, basically it uses keyboard and sound from allegrojs, as well all the utility functions, but the graphics are rendered with pixi.js that uses hardware acceleration.

Here you can run it.
https://lainz.github.io/AllegroPas2JS-Demo-Game/anothertest/index.html

Maybe I can find a way to replace allegrojs functions with my own, but keeping the compatibility, so we have allegrojs with hardware accelerated with no change in source code of my demo game.

Edit: The original demo works better now, I've replaced the allegrojs "loop" with "requestanimationframe" that's better. Now it runs smoothly.
https://lainz.github.io/AllegroPas2JS-Demo-Game/index.html
« Last Edit: November 18, 2018, 01:38:30 am by lainz »

User137

  • Hero Member
  • *****
  • Posts: 1791
    • Nxpascal home
Re: 2D Platformer Game Contest 2018/2019
« Reply #25 on: November 18, 2018, 10:58:32 am »
I was wondering how good of a game one could make with just TCanvas based graphics. I think it's highly underrated.

lainz

  • Hero Member
  • *****
  • Posts: 3276
    • Lainz
Re: 2D Platformer Game Contest 2018/2019
« Reply #26 on: November 18, 2018, 02:27:10 pm »
I was wondering how good of a game one could make with just TCanvas based graphics. I think it's highly underrated.

In the previous contest I made my game with tcanvas.

But I want to try something new.

Paul_

  • Full Member
  • ***
  • Posts: 130
Re: 2D Platformer Game Contest 2018/2019
« Reply #27 on: November 18, 2018, 04:43:36 pm »
@lainz: Now it's different story, good job :)

I was wondering how good of a game one could make with just TCanvas based graphics. I think it's highly underrated.

Games aren't much about technology in terms of gameplay (use what you want), but about the design itself. Something like: "design make fun, not the technology nor visual". Still you can find popular 2D games which runs on obscure or outdated technologies or just they don't need anything special. Imagination is basic concept for thousands of years :)
 
Isn't this basically same as the old form of rasterization without acceleration? If I am not mistaken, DirectX (Direct2D) can be still used in this way, which is characteristic for games like Age of Empires 2 (1999) and even in era after 2000. 2D games were later rejected by big companies and there is no great reason to use this rendering method because modern APIs and hardware have different approach which is also working for 2D games (Rimworld, Factorio..) and brings new things like fast VRAM, blending, transformations (position/scale/rotation) or fast pixel tranformations (shaders). More proper question can be what are the benefits of the old rasterization?

There are limitations like limited VRAM, how put all 2D graphics there (sprite size in VRAM is w * h * 32 bit or something like that), but still you can use some workaround with limited color palletes and shaders and render it effectively in terms of limited memory. Same for another things.
« Last Edit: November 18, 2018, 05:09:41 pm by Paul_ »

Ñuño_Martínez

  • Hero Member
  • *****
  • Posts: 917
    • Burdjia
Re: 2D Platformer Game Contest 2018/2019
« Reply #28 on: November 19, 2018, 02:13:37 pm »
My engine is hardware accelerate because it uploads graphics (sprites and tiles, in my case) to the VRAM, then uses DirectX/OpenGL to render.  That is actually done by Allegro without programmer intervention (in the default case, of course the programmer can force the way it works and even deactivate the automatic VRAM uploading so it works with RAM only).

My idea for the engine (still work in progress) is to reproduce the way old hardware worked in the lowest level possible, as they where hardware accelerated too.  I think I'll use SNES as gide, as that hardware is very similar to some arcade systems as the used by Metal Slug, for example.
Are you interested in game programming? Join the Pascal Game Development community!
Also visit the Game Development Portal

turrican

  • Full Member
  • ***
  • Posts: 133
  • Pascal is my life.
    • Homepage
Re: 2D Platformer Game Contest 2018/2019
« Reply #29 on: November 19, 2018, 02:37:01 pm »
I'm in! I will use my Tilengine wrapper to do things up!