COOKIES

This site may be using cookies to melk you with your own data. I, ben0bi, am not the owner of this web service and I also do not maintain their servers. But the EU and the owner of this service think, that the user (me) has the responsibility to inform the consumer (you), that this website uses cookies. Again: I, ben0bi, NEVER use cookies. I am not responsible for the setup of this web service. I just present some information here and do not intend to spy on you for whatever reason ever. But (also again), I do not host this website nor do I maintain any servers related to this website nor do I benefit from using the cookies maintained from this service. I hereby give the responsibility for using cookies on blogspot back to the owners of blogspot.

Dienstag, 17. Oktober 2017

DIY: Emulator: TextGraphic Setup

Nun gut, das mit der Emulatorik wird wohl hinten angestellt, aber ich hoffe, ich kann trotzdem ein bisschen Wissen vermitteln mit meiner Serie hier.

Ok, nachdem wir nun eine sehr komplizierte Methode in dieser Serie kennengelernt haben, versuche ich nun eine einfachere Version zu generieren, welche den Bildschirm mit Text aufbaut. Ich hoffe, das ist dann auch schneller, wir werden sehen.

Vielleicht mache ich dies später auch mit WebGL direkt, doch erst muss ich herausfinden, wie man die verdammten Pixel auf einer Textur direkt bearbeiten kann. Das von vorher ^ kanns ja nicht wirklich sein. Also....

Kurz: Es ist zu langsam. Hier ist der Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Emulator TextGraphic</title>

<style>
#canvas
{
font-size: 4pt;
}
#blocker
{
position: absolute;
top: 0px;
left: 0px;
background-color: rgba(1,1,1,0.01);
width: 100%;
height: 100%;
z-index: 10;
}
</style>

</head>

<body>
<div id="canvas"></div>
<div id="blocker"></div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<script>

var RGB = function(red, green, blue) {return ((red << 16) & 0xFF0000) | ((green<<8) & 0x00FF00) | (blue & 0x0000FF);}
var RED = function(color) {return (color>>16) & 0x0000FF;}
var GREEN = function(color) {return (color>>8) & 0x0000FF;}
var BLUE = function(color) {return color & 0x0000FF;}
var HEXT = function(value) {return '#'+value.toString(16);}; // return hex string of a value with preceding #.

var c_Screen = function(xsize, ysize)
{
var blockChar='&#9600';
if(xsize<=0)
xsize=1;
if(ysize<=0)
ysize=1;

// ysize must be dividable by 2 because of the block chars.
if(ysize%2==1)
ysize+=1;

var m_width = xsize;
var m_height = ysize;
var m_screenArray = new Array();

// create a randomly coloured screen.
this.randomScreen = function()
{
m_screenArray = new Array();
for(var i=0;i<m_width*m_height;i++)
{
m_screenArray.push(RGB(Math.random()*255, Math.random()*255, Math.random()*255));
}
}
// initialize with a random screen.
this.randomScreen();

this.setPixel = function(x,y,color) {m_screenArray[x*y+x]=color;}

// build the html text from the screen array.
this.buildText=function()
{
var txt='<nobr>';
for(var y=0;y<m_height;y+=2)
{
for(var x=0;x<m_width;x++)
{
var color=HEXT(m_screenArray[x*y+x]);
var subcolor=HEXT(m_screenArray[x*(y+1)+x]);
txt+='<span style="color:'+color+'; background-color:'+subcolor+';">'+blockChar+'</span>';
}
txt+='<br />';
}
txt+='</nobr>';
return txt;
}
}

var done=false;
var scr = new c_Screen(160,160);

function loop()
{
scr.randomScreen();
var txt = scr.buildText();
$('#canvas').html(txt);
window.setTimeout(loop,20);
}

$(document).ready(function()
{
$('body').keydown(function(e){done=true;});
loop();
});
</script>

</body>

</html>

Mit setPixel kann man einen Pixel setzen, und mit buildText bekommt man den HTML-Text dazu.. Ich habe es mit verschiedenen Geschwindigkeiten versucht, es kommt nicht unter 50ms und ist somit ungeeignet. Jedoch könnte man dies für ein Rundenbasiertes Spiel benutzen, mal sehen...der ANSI-Zeichensatz ist noch geil...

Hier ist der Source-Code dazu (im Ordner HTMLVersion):
https://github.com/ben0bi/EmulatroniX/releases/tag/Blog_Series_TextGraphic_1

Danke für die Aufmerksamkeit.