2

Estou tentando adicionar o emulador Nesbox num site do Wordpress, mas ele não está a funcionar porque eu não sei em qual local do Wordpress é que devo adicionar a pasta do emulador, para que funcione da maneira como o desenvolvedor explica.

<div>
<div id="emulator">
    <p>To play this game, please, download the latest Flash player!</p>
    <br>
    <a href="http://www.adobe.com/go/getflashplayer">
        <img src="//www.adobe.com/images/shared/download_buttons/get_adobe_flsh_player.png" alt="Get Adobe Flash player"/>
    </a>
</div>
</div>


<script type="text/javascript">

var resizeOwnEmulator = function(width, height)
{
    var emulator = $('#emulator');
    emulator.css('width', width);
    emulator.css('height', height);
}

$(function()
{
    fuction embed()
    {
        var emulator = $('#emulator');
        if(emulator)
        {
            var flashvars = 
            {
                system : '',
                url : ''
            };
            var params = {};
            var attributes = {};

            params.allowsciptaccess = 'sameDomain';
            params.alowFullScreen = 'true';
            params.allowFullScreenInteractive = 'true';

            swfbject.embedSWF('', 'emulator', '640', '480', '11.2.0', 'flash/expressInstall.swf', flashvars, params, attributes);
        }
    }

    embed();
});

</script>
6
  • Aqueles flashvars variam ou são sempre os mesmos?
    – brasofilo
    Commented 10/10/2015 às 1:36
  • Depende, se vc está falando sobre o var flashvars = { system : 'sega', ele tem que ser alterado dependendo do jogo que for emular
    – Endou
    Commented 10/10/2015 às 17:24
  • Sim, esse mesmo. Eu tinha pensado uma solução fácil mas com essa info vou precisar fazer uns testes
    – brasofilo
    Commented 10/10/2015 às 17:32
  • No site do desenvolvedor vc precisa altera entre sega, snes, gba etc. acho que o ideal seria um unico script rodar todos os emuladores sem ter a necessidade de altera essa parte
    – Endou
    Commented 10/10/2015 às 17:59
  • é, ela tem que ser dinâmica, recebida via GET, o SWFObject tem uma função pra isso
    – brasofilo
    Commented 10/10/2015 às 18:00

1 Resposta 1

2

Uma solução é fazer um iFrame que funcione sozinho numa URL do tipo http://exemplo.com/wp-content/arcade/, e fazer o embed no post ou página usando um Shortcode básico.

Vai precisar usar o swfobject.getQueryParamValue(param) para puxar informações da URL e passar para o objeto flashvars. Então a URL que o WordPress precisa construir seria:

http://exemplo.com/wp-content/arcade/?system=atari&url=Pac_Man-classic

E a declaração das flashvars (conferindo se existem ou então usar o default):

var flashvars = {};
flashvars.system = ( swfobject.getQueryParamValue('system') ) ? swfobject.getQueryParamValue('system') : 'sega';
var url = ( swfobject.getQueryParamValue('url') ) ? swfobject.getQueryParamValue('url') : 'Robotech_-_The_Macross_Saga';
flashvars.url = '/rom/' + url + '.zip';

E o Shortcode seria este, usado no post como [arcade url="Pac_Man-classic" system="atari"]:

<?php
/**
 * Plugin Name: (SOpt) Arcade Embed
 * Plugin URI: http://pt.stackoverflow.com/questions/91673/201
 * Version: 1.0
 * Author: brasofilo 
 */

add_shortcode( 'arcade', 'arcade_sopt_91673' );

function arcade_sopt_91673 ( $atts, $content )
{  
    $url = isset( $atts['url'] ) ? $atts['url'] : 'Robotech_-_The_Macross_Saga';
    $system = isset( $atts['system'] ) ? $atts['system'] : 'sega';
    $wp_content = WP_CONTENT_URL; // igual a http://exemplo.com/wp-content

    // atenção para o formato heredoc: http://stackoverflow.com/q/5673269/1287812
    $html = <<<HTML
    <div class="arcade">
        <iframe src ="$wp_content/arcade/?url=$url&system=$system" width="600"></iframe>
    </div>
HTML;

    return $html;
}

Exemplo de index.html:

<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>

    <script type="text/javascript">

    var resizeOwnEmulator = function(width, height)
    {
        var emulator = $('#emulator');
        emulator.css('width', width);
        emulator.css('height', height);
    }

    $(function()
    {
        function embed()
        {
            var emulator = $('#emulator');
            if(emulator)
            {
                var flashvars = {};
                flashvars.system = ( swfobject.getQueryParamValue('system') ) ? swfobject.getQueryParamValue('system') : 'sega';
                var url = ( swfobject.getQueryParamValue('url') ) ? swfobject.getQueryParamValue('url') : 'Robotech_-_The_Macross_Saga';
                flashvars.url = '/rom/' + url + '.zip';
                var params = {};
                var attributes = {};
                params.allowscriptaccess = 'sameDomain';
                params.allowFullScreen = 'true';
                params.allowFullScreenInteractive = 'true';
                swfobject.embedSWF('flash/Nesbox.swf', 'emulator', '640', '480', '11.2.0', null, flashvars, params, attributes);
            }
        }

        embed();
    });

    </script>
    </head>
<body>
    <div>
    <div id="emulator">
        <p>To play this game, please, download the latest Flash player!</p>
        <br>
        <a href="http://www.adobe.com/go/getflashplayer">
            <img src="//www.adobe.com/images/shared/download_buttons/get_adobe_flash_player.png" alt="Get Adobe Flash player"/>
        </a>
    </div>
    </div>



		</body></html>

Resumindo:

  • coloque todos os arquivos do emulador dentro da pasta wp-content/emulador (ou como preferir)
  • o arquivo principal é o index.html
  • a pasta http://exemplo.com/wp-content/arcade/rom/ contém todos os roms
  • confira que esteja tudo funcionando sozinho quando visita esse index separadamente
  • muitas vezes, ao lidar com SWFs, precisamos usar o path absolute, e isso pode ser passado pela URL usando aquele valor do $wp_content = WP_CONTENT_URL, isso gera automaticamente a URL válida do site em questão
  • depois disso, é só ativar o plugin e escrever o shortcode corretamente.
1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .